CODEWITHSUNDEEP
angularleafletpie-chart
Amal Shehu
Amal Shehu

Reputation: 119

How to create a pie chart marker on leaflet angular2?

I would like to add pie chart. I made a google search and found something like leaflet-dvf.Already I'm using @assymetric/angular2-leaflet and leaflet. I tried to integrate leaflet-dvf in my angular 2 application.

I added its scripts on index.html

index.html

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/css/dvf.css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/leaflet-dvf.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/leaflet-dvf.markers.js"></script>

map.component.ts

import { MapService } from '../../map.service';
import { Component } from '@angular/core';
import { Observer } from 'rxjs/Observer';


@Component({
  moduleId: module.id,
  selector: 'map-demo',
  templateUrl: './map.component.html',
  styleUrls: ['map.component.css']
})
export class MapDemoComponent {
  mapInstance: any;
  coords: any = [];
  mapData: any;
  // Open Street Map Definition
  LAYER_OSM = {
    id: 'openstreetmap',
    name: 'Open Street Map',
    enabled: true,
    layer: L.tileLayer('https://{s}.tiles.mapbox.com/v4/{mapId}/{z}/{x}/{y}.png?access_token={token}', {
      maxZoom: 18,
      attribution: `Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>
                    contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,
                    Imagery © <a href="http://mapbox.com">Mapbox</a>`,
      mapId: 'id',
      subdomains: ['a', 'b', 'c', 'd'],
      token: 'token'
    })
  };

  // Values to bind to Leaflet Directive
  layersControlOptions = {
    position: 'bottomright'
  };
  baseLayers = {
    'Open Street Map': this.LAYER_OSM.layer
  };
  options = {
    zoom: 10,
    center: L.latLng([40.4859372, -111.8768695])
  };


  constructor() {

  onMapReady(map: L.Map) {
    this.mapInstance = map;
  }

  generateCord(data: any) {

        var circle = L.circle([item.Latitude, item.Longitude], {
          color: 'rgb(63, 61, 61)',
          fillColor: fillColor,
          fillOpacity: 0.8,
          radius: item.PRODUCTION
        }).bindTooltip(item.USER_NAME + `(${item.User_Classification}) `)
          .addTo(this.mapInstance);
        //   var marker = L.marker([item.Latitude, item.Longitude]).addTo(this.mapInstance)
        // .bindTooltip(item.USER_NAME)
        // .openTooltip();

      });
    }

  }

}

I have installed typing for leaflet so when i use plugins, It collapse.Because both starts with L.MethodName.

var barChartMarker = new L.BarChartMarker(new L.LatLng(0, 0), options).addTo(this.mapInstance);

The above plugin won't work with declare var method. How can i add a pie chart marker for my leaflet map?

Upvotes: 0

Views: 1902

Answers (1)

reblace
reblace

Reputation: 4195

One way to get around the lack of typings information for the DVF library is to cast L to any before calling the method.

let dvf:any = L as any;
let barChartMarker = new dvf.BarChartMarker(new L.LatLng(0, 0), options).addTo(this.map);

Note that the DVF docs indicate that the master branch doesn't work with Leaflet 1.0. Just make sure you're using the right version of the plugin.

Upvotes: 0

Related Questions