@extendz/extendz-openlayer

Extend UI Platform built on Angular Material

Stats

StarsIssuesVersionUpdatedCreatedSize
@extendz/extendz-openlayer
0.2.33 years ago4 years agoMinified + gzip package size for @extendz/extendz-openlayer in KB

Readme

@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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.