Trouble vector basemap with d3 sample

[SimonJackson]

I found a really cool D3 sample that I want to include on a prototype Hub page that I will be showcasing.

I managed to bash the script into using my hosted feature service, along with referring to a traditional tiled service.

This can be seen here.  This is not using the Esri leaflet library.

However, to match some of the other maps on my page, I need to include the Esri leaflet library so that I can incorporate the Esri dark blue vector tile service.

As soon as I switch from using leaflet-0.5 to the leaflet@1.2.0 (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)

Would love some help getting this resolved.    I did try to replicate my sample in a JSFiddle, but could not get it to run.

[JohnGravois · Accepted solution]

you're in luck. that great sample is plug and play in Leaflet 1.x by making one small tweak

// 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

[SimonJackson]

Massive thanks John - would have taken me 20x as long to have spotted that.  

The new version using the dark blue canvas can be seen here.

A follow on question.  I know this is an experimental add-in for the Esri Leaflet library, but the vector basemap appears to perform slower than the previous 'traditional' tiled service did.  

Any tips on how I could speed things up in the sample?

[JohnGravois]

> Any tips on how I could speed things up in the sample?

i wish i did. i've noticed startup times that are slower than i'd expect with esri vector tile sources before and i don't know what causes it. and the 300kb wrapped plugin certainly helping.

[SimonJackson]

Thats all good - load times are probably ok.

I notice I have lost the popups by switching out to using an esri vector basemap.  Any quick tips for that?

If I put a watchpoint on line 134, it does not seem to fire when I click a circle, when previously without bringing in the esri-leaflet library and using the vector layer, it did.

circles.on('click', function (d, i) 

The previous sample let me interact with the graphics that I am displaying on the map.  I saw some of the esri-leaflet samples that work with the featurelayers that you add to the map, but hoping I can avoid reworking too much of the existing code.  Perhaps there is something I need to disable on the map properties?

[JohnGravois]

happy to look at a simplified repro case if you can log a new issue in the esri-leaflet-vector github repo.

i don't see any problems with popups when using L.esri.featureLayer

http://jsbin.com/pudiyih/edit?html,output