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

Carte de base vectorielle Trouble avec exemple d3

SimonJackson

J'ai trouvé un exemple D3 vraiment cool que je veux inclure sur une page prototype Hub que je vais présenter.

J'ai réussi à forcer le script à utiliser mon service de fonctionnalités hébergé, tout en faisant référence à un service carrelé traditionnel.

Cela peut être vu ici. Ceci n'utilise pas la bibliothèque Esri leaflet.

Cependant, pour correspondre à certaines des autres cartes sur ma page, je dois inclure la bibliothèque Esri leaflet afin de pouvoir incorporer le service de tuiles vectorielles Esri dark blue.

Dès que je passe de leaflet-0.5 à leaflet@1.2.0 (depuis l'exemple vectoriel) dans l'en-tête, ainsi qu'au dernier CSS, j'obtiens l'erreur suivante dans la console

leaflet.js:5 Erreur non interceptée : L'objet fourni n'est pas une Layer.
à e.addLayer (leaflet.js:5)
à e.addTo (leaflet.points-layer.js:44)
à d3_map_vt.html:76
à d3.v3.js:2011
à Object.<anonymous> (d3.v3.js:1996)
à Object.event (d3.v3.js:504)
à XMLHttpRequest.respond (d3.v3.js:1949)

J'aimerais beaucoup de l'aide pour résoudre ce problème. J'ai essayé de reproduire mon exemple dans un JSFiddle, mais je n'ai pas réussi à le faire fonctionner.

Trouver plus de publications taguées avec

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

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

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