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

Problem mit Vector Basemap und d3 Beispiel

SimonJackson

Ich habe ein wirklich cooles D3 Beispiel gefunden, das ich auf einer Prototype Hub Seite einbinden möchte, die ich präsentieren werde.

Es ist mir gelungen, das Skript so anzupassen, dass es meinen gehosteten Feature Service verwendet, zusammen mit einem traditionellen gekachelten Service.

Das ist hier zu sehen. Dies verwendet nicht die Esri leaflet Bibliothek.

Um jedoch einige der anderen Karten auf meiner Seite anzupassen, muss ich die Esri leaflet Bibliothek einbinden, damit ich den Esri dark blue vector tile service integrieren kann.

Sobald ich im Header von leaflet-0.5 auf leaflet@1.2.0 (aus dem Vector Beispiel) wechsle, zusammen mit dem neuesten CSS, erhalte ich folgenden Fehler in der Konsole

leaflet.js:5 Uncaught Error: Das bereitgestellte Objekt ist kein 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)

Ich würde mich sehr über Hilfe freuen, um dieses Problem zu lösen. Ich habe versucht, mein Beispiel in einem JSFiddle zu replizieren, aber es ließ sich nicht ausführen.

Finde mehr Beiträge mit dem Tag

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

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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