topic Trouble vector basemap with d3 sample in Open Source Mapping Libraries Ques.

Trouble vector basemap with d3 sample

SimonJackson — Mon, 28 Aug 2023 13:17:57 GMT

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.

Re: Trouble vector basemap with d3 sample

JohnGravois — Sun, 12 Dec 2021 09:28:18 GMT

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

Re: Trouble vector basemap with d3 sample

SimonJackson — Wed, 09 Aug 2017 23:51:19 GMT

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?

Re: Trouble vector basemap with d3 sample

JohnGravois — Thu, 10 Aug 2017 01:42:12 GMT

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

Re: Trouble vector basemap with d3 sample

SimonJackson — Thu, 10 Aug 2017 04:51:37 GMT

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?

Re: Trouble vector basemap with d3 sample

JohnGravois — Thu, 10 Aug 2017 05:02:17 GMT

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