leaflet-gis-statistics v0.1.1

LeafletGisStatistics

LeafletGisStatistics is an open source Angular module that extends and simplifies the Leaflet GroupMarkers and Fullscreen

Installation

You can install this library via npm using the next command on your project

 npm i leaflet-gis-statistics

Implementation

After installing, import the module in your application:

import { LeafletGisStatisticsModule } from 'leaflet-gis-statistics';

imports: [
	...
	LeafletGisStatisticsModule
 ],

The next step is to add inside the file angular.json

{
  ...
            "styles": [
              "./node_modules/leaflet/dist/leaflet.css",
              "./node_modules/leaflet.markercluster/dist/MarkerCluster.css",
              "./node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css",
              ...
            ],
 ...
}

Basic template implementation:

  <leaflet-gis-statistics [markersArray]= "getMarkers()" 
                          [initCenterMap]= "centerMap" 
                          [limitColors]= "[5,10,1000,5000]"
                          [valuesSymbol] = "['$','km']"
                          [valuesDescription]= "['price','distance']"
                          [markerTitle]= "'Example Title'"
                          [markerIcon]="'https://www.freeiconspng.com/thumbs/localization-icon/red-location-icon-1.png'" >
  </leaflet-gis-statistics>

Add marker to your map using the updateMarkers function in your own component

  import { Component } from '@angular/core';

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent {
    centerMap:Array<Number>= [ -37.89, 175.46];  
    constructor(){
    }
    getMarkers():Array<Array<any>>{
      return [
        [-37.8839, 175.3745188667, {value:571}],
        [-37.8869090667, 175.3657417333, {value:486}]];
    }
  }