nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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.

Find more posts tagged with

Esri Leaflet

Accepted answers

JohnGravois

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

All comments

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

> 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

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

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.