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

Mapa base vetorial com problema no exemplo d3

SimonJackson

Encontrei um exemplo D3 muito legal que quero incluir em uma página protótipo do Hub que vou apresentar.

Consegui adaptar o script para usar meu serviço de feição hospedado, junto com a referência a um serviço tradicional em mosaico.

Pode ser visto aqui. Este não está usando a biblioteca Esri leaflet.

No entanto, para combinar com alguns dos outros mapas na minha página, preciso incluir a biblioteca Esri leaflet para poder incorporar o serviço de tile vetorial Esri dark blue.

Assim que mudo de leaflet-0.5 para leaflet@1.2.0 (do exemplo vetorial) no cabeçalho, junto com o CSS mais recente, recebo o seguinte erro no console

leaflet.js:5 Erro não capturado: O objeto fornecido não é uma Layer.
em e.addLayer (leaflet.js:5)
em e.addTo (leaflet.points-layer.js:44)
em d3_map_vt.html:76
em d3.v3.js:2011
em Object.<anonymous> (d3.v3.js:1996)
em Object.event (d3.v3.js:504)
em XMLHttpRequest.respond (d3.v3.js:1949)

Gostaria muito de ajuda para resolver isso. Tentei replicar meu exemplo em um JSFiddle, mas não consegui fazê-lo funcionar.

Encontre mais publicações marcadas com

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

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

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