@extendz/extendz-openlayer

demo

you can find example and demo here

per request

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

installation

npm i @extendz/extendz-openlayer --save

usage

mapexample.module.ts

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

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

export class MapexampleModule {}

mapexample.component.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

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 | define polygon draw types and it's color | | pointstyps | Array | define points draw types and it's color | | points | Array | 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 |