# @extendz/extendz-openlayer

> Extend UI Platform built on Angular Material

Latest version **0.2.3** (published 2018-04-23) · AL2 license · 0 weekly downloads

## Install

```sh
npm install @extendz/extendz-openlayer
pnpm add @extendz/extendz-openlayer
yarn add @extendz/extendz-openlayer
bun add @extendz/extendz-openlayer
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.3 |
| Published | 2018-04-23 |
| First published | 2018-02-23 |
| Weekly downloads | 0 |
| License | AL2 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 3.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Rumes Shyaman |
| Maintainers | asnich, hrandika, osandadileepa, rumes |
| Keywords | angular, openlayer, open layer, Openlayer, OpenLayer, Open Layer, reusable, angular-openlayer, angular-Openlayer, angular-OpenLayer, angular-open layer, angular-Open Layer, ng-openlayer, ng-Openlayer, ng-OpenLayer, ng-open layer, ng-Open Layer, angular4-openlayer, angular4-Openlayer, angular4-OpenLayer, angular4-open layer, angular4-Open Layer, angular5-openlayer, angular5-Openlayer, angular5-OpenLayer, angular5-open layer, angular5-Open Layer, ng-openlayer |

## Links

- npm: https://www.npmjs.com/package/@extendz/extendz-openlayer
- npm.io page: https://npm.io/package/@extendz/extendz-openlayer

## Dependencies (6)

- [rxjs](https://npm.io/package/rxjs.md) ^5.4.2
- [tslib](https://npm.io/package/tslib.md) ^1.7.1
- [zone.js](https://npm.io/package/zone.js.md) ^0.8.19
- [openlayers](https://npm.io/package/openlayers.md) ^4.6.4
- [@angular/cdk](https://npm.io/package/@angular/cdk.md) ^5.0.0
- [@angular/material](https://npm.io/package/@angular/material.md) ^5.0.0

## Recent versions

- 0.2.3 (latest) — 2018-04-23
- 0.2.2 — 2018-04-23
- 0.2.1 — 2018-04-23
- 0.2.0 — 2018-04-23
- 0.1.9 — 2018-04-23
- 0.1.8 — 2018-04-23
- 0.1.7 — 2018-04-23
- 0.1.6 — 2018-04-23
- 0.1.5 — 2018-04-23
- 0.1.4 — 2018-04-23
- 0.1.3 — 2018-04-23
- 0.1.2 — 2018-04-23
- 0.1.1 — 2018-04-23
- 0.1.0 — 2018-04-23
- 0.0.9 — 2018-04-23
- … 8 more at https://npm.io/package/@extendz/extendz-openlayer/versions

## README

<!---
    Copyright 2018 the original author or authors
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
 
        http://www.apache.org/licenses/LICENSE-2.0
 
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
-->

# @extendz/extendz-openlayer

## demo

you can find example and demo [here](https://extendz.github.io/extendz-live/openlayer)

## per request

* angular 2,4,5
* nodejs 6 or above
* npm

## installation

`npm i @extendz/extendz-openlayer --save`

## usage

### mapexample.module.ts

```typescript
import { ExtendzOpenlayerModule } from ‘@extendz/extendz-openlayer’;

@NgModule({
	imports: [
		CommonModule,
		ExtendzOpenlayerModule
	],
})

export class MapexampleModule {}
```

### mapexample.component.html

```html
<div style="height: 90vh">
	<open-layer
	[image] = "tiffImage" <--- TiffImage Object ex: "{jobId:number, imageUrl:string, 													extent:Array<number>}"
	[drawtype] = "openlayerTool.POLYGON" <--- Open layer initial draw type
	[points] = "polygon" <----  Array of LatLng objects
	[polygontyps] = "polygonOptions" <--- Array of Tool objects  
	[pointstyps] = "pointOptions" <--- Array of Tool objects
	[drawcolor] = "'rgba(204,0,0,0.5)'" <--- color of initial points or polygon
	(onDraw) = "onDraw($event)" <---ondraw event emit drawn shape or point coodinats
	(onDelete) = "onDelete()" <--- ondelete event emit deleted shape or point 										coordinates
	></open-layer>
</div>
```

### openlayer-example.component.ts

```typescript
import { Component, OnInit } from '@angular/core';
import {
  TiffImage,
  LatLng,
  Tool,
  OpenLayerTool,
  OpenLayerToolType
} from '@extendz/extendz-openlayer';

@Component({
  selector: 'app-mapexample',
  templateUrl: './openlayer-example.component.html',
  styleUrls: ['./openlayer-example.component.css']
})
export class OpenlayerExampleComponent implements OnInit {
  tiffImage: TiffImage = {
    jobId: 1,
    imageUrl: 'assets/img/152179.png',
    extent: [-76.51367693405734, 42.42886985890468, -76.51169990480923, 42.42984853959061]
  };

  polygon: Array<LatLng> = [
    {
      lat: -76.51267693405734,
      lng: 42.42896985890468
    },
    {
      lat: -76.51277693405734,
      lng: 42.42906985890468
    },
    {
      lat: -76.51277693405734,
      lng: 42.42916985890468
    }
  ];

  openlayerTool = OpenLayerToolType;

  pointOptions: Array<Tool> = [
    {
      name: 'CAR',
      color: 'rgba(204,0,0,0.5)'
    },
    {
      name: 'CAR PRODUCTIONS',
      color: 'rgba(95,156,55,0.5)'
    }
  ];

  polygonOptions: Array<Tool> = [
    {
      name: 'CONCENTRATES',
      color: 'rgba(204,0,0,0.5)'
    },
    {
      name: 'STOCK',
      color: 'rgba(95,156,55,0.5)'
    }
  ];

  constructor() {}

  ngOnInit() {}
}
```

### @Input

| Options | Type          | Description                                                 |
| ------- | ------------- | ----------------------------------------------------------- |
| image	  | TiffImage 		   | define jobid, image url, extent							|
| drawtype | OpenLayerToolType | define initial draw type   								|
| polygontyps | Array<Tool>    | define polygon draw types and it's color					|
| pointstyps  | Array<Tool>    | define points draw types and it's color					|
| points  	  | Array<LatLng>  | Define Map center according to given latitude and longitude|
| drawcolor   | string  	   | define initial draw color 									|

### @Output

| Options   | Type                   | Description                                  |
| --------- | ---------------------- | -------------------------------------------- |
| onDraw()   | ReturnObject | Return created points or polygon coordinates, job id, draw type, draw tool |
| onDelete() | ReturnObject | Return created points or polygon coordinates, job id, draw type, draw tool                |

---
_Source: https://npm.io/package/@extendz/extendz-openlayer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._