Notable Pottery Manufacturer

    @extendz/extendz-openlayer
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.3 • Public • Published

    @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

    Install

    npm i @extendz/extendz-openlayer

    DownloadsWeekly Downloads

    26

    Version

    0.2.3

    License

    AL2

    Unpacked Size

    4.11 MB

    Total Files

    73

    Last publish

    Collaborators

    • asnich
    • hrandika
    • osandadileepa
    • rumes