@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