Search code examples
d3.jsleafletesri-leafletesri-oss

Updating a D3 Map sample


I spotted a nice D3 Map & Chart sample that is using

  • leaflet-0.5
  • d3.v3

I would like to make use of some features in the esri-leaflet package (specifically use a Vector basemap), but I believe I need to update the current sample to leaflet-1.2.0 to do this.

As soon as I switch from using leaflet-0.5 to the [email protected] (from the vector sample) in the header, along with the latest CSS then I get the following error in the console:

leaflet.js:5 Uncaught Error: The provided object is not a Layer.
at e.addLayer (leaflet.js:5)
at e.addTo (leaflet.points-layer.js:44)
at d3_map_vt.html:76
at d3.v3.js:2011
at Object.<anonymous> (d3.v3.js:1996)
at Object.event (d3.v3.js:504)
at XMLHttpRequest.respond (d3.v3.js:1949)

Can someone give me some pointers on how to go about updating this sample and what the cause of the above error is? Do I need to also update the d3 library as well?

I have tweaked the code for my own data here


Solution

  • you're in luck. that great sample only requires one small tweak to run in Leaflet 1.x.

    // line 1 of leaflet.points-layer.js
    L.PointsLayer = L.Layer.extend({ // instead of L.Class    
      includes: L.Evented.prototype, // instead of L.Mixin.Events