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; } } }

Problema con el mapa base vectorial usando d3 ejemplo

SimonJackson

Encontré un ejemplo genial de D3 que quiero incluir en una página prototipo de Hub que estaré mostrando.

Logré adaptar el script para usar mi servicio de entidades alojado, junto con la referencia a un servicio tradicional en mosaico.

Esto se puede ver aquí. Esto no está usando la biblioteca Esri leaflet.

Sin embargo, para que coincida con algunos de los otros mapas en mi página, necesito incluir la biblioteca Esri leaflet para poder incorporar el servicio de mosaicos vectoriales azul oscuro de Esri.

Tan pronto como cambio de usar leaflet-0.5 a leaflet@1.2.0 (del ejemplo vectorial) en el encabezado, junto con el CSS más reciente, obtengo el siguiente error en la consola

leaflet.js:5 Error no capturado: El objeto proporcionado no es una Layer.
en e.addLayer (leaflet.js:5)
en e.addTo (leaflet.points-layer.js:44)
en d3_map_vt.html:76
en d3.v3.js:2011
en Object.<anonymous> (d3.v3.js:1996)
en Object.event (d3.v3.js:504)
en XMLHttpRequest.respond (d3.v3.js:1949)

Me encantaría recibir ayuda para resolver esto. Intenté replicar mi ejemplo en un JSFiddle, pero no pude hacerlo funcionar.

Encuentra más publicaciones etiquetadas con

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

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

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