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

Een tegelkaartservice van ArcGIS Online toevoegen aan Leaflet

AdrianWelsh

Dus, ik weet soms echt niet wat ik doe. Ik hoop dat dit een eenvoudige vraag is. Ik heb een tegelkaartservice die ik naar de cloud heb gepubliceerd in https://community.esri.com/community/gis/web-gis/arcgisonline?sr=search&searchId=8d391d6f-63e6-4084-9d28-153bf05f8834&searchIndex=0 van een jpg die gegeorefereerd is. Ik wil dit in Leaflet laten zien, maar ik weet niet precies hoe ik dit moet doen (het doel is dat ik er daarna wat punten aan wil toevoegen die popup-informatie zullen hebben, enzovoort - ik wil gewoon de afbeelding als de "basemap").

Ik plaatste een leaflet-vraag een paar maanden geleden waarbij John Gravois0c mij hielp, hier: Hoe maak je een aangepaste basemap met willekeurige locatie . Hij plaatste een geweldig voorbeeld dat me liet zien hoe je een losse afbeelding aan een kaart toevoegt zonder dat deze gegeorefereerd is met deze code: JS Bin - Collaborative JavaScript Debugging (die ik de hele tijd gebruik!).

Hoe dan ook, wat is een eenvoudige manier om een snel leaflet-voorbeeld te maken dat mijn tegelservice als de "basemap" toont? Of is dit niet mogelijk?

Alvast bedankt!

Vind meer berichten getagd met

Esri Leaflet

Accepted answers

JohnGravois

you just aren't zoomed in close enough.

<SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> L<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'map'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">40.374761</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">111.736418</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">18</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
L<SPAN class="punctuation token">.</SPAN>esri<SPAN class="punctuation token">.</SPAN><SPAN class="token function">tiledMapLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Ftiles.arcgis.com%2Ftiles%2FmvnrDxfOCq0CsVom%2Farcgis%2Frest%2Fservices%2F15094Background%2FMapServer" target="_blank">http://tiles.arcgis.com/tiles/mvnrDxfOCq0CsVom/arcgis/rest/services/15094Background/MapServer</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; minZoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">15</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; maxZoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">21</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">addTo</SPAN><SPAN class="punctuation token">(</SPAN>map<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

i figured that out by snooping the web traffic in the JSAPI sample viewer that ships with the service.

All comments

JohnGravois

sample: http://esri.github.io/esri-leaflet/examples/tile-layer-2.html

API reference: http://esri.github.io/esri-leaflet/api-reference/layers/tiled-map-layer.html

AdrianWelsh

John,

Thanks for your help. I tried using the code in that sample but my image is not showing up. Here is my code sample:

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>html</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">charset</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN>utf-8</SPAN> <SPAN class="punctuation token">/></SPAN></SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>title</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Navigation Charts<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>title</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">name</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">'</SPAN>viewport<SPAN class="punctuation token">'</SPAN></SPAN> <SPAN class="attr-name token">content</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">'</SPAN>initial-scale<SPAN class="punctuation token">=</SPAN>1,maximum-scale<SPAN class="punctuation token">=</SPAN>1,user-scalable<SPAN class="punctuation token">=</SPAN>no<SPAN class="punctuation token">'</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN>

&nbsp; <SPAN class="comment token"><!-- Load Leaflet from CDN--></SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN> <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Funpkg.com%2Fleaflet%401.0.1%2Fdist%2Fleaflet.css" target="_blank">https://unpkg.com/leaflet@1.0.1/dist/leaflet.css</A><SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN>
&nbsp; <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Funpkg.com%2Fleaflet%401.0.1%2Fdist%2Fleaflet-src.js" target="_blank">https://unpkg.com/leaflet@1.0.1/dist/leaflet-src.js</A><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>

&nbsp; <SPAN class="comment token"><!-- Load Esri Leaflet from CDN --></SPAN>
&nbsp; <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Funpkg.com%2Fesri-leaflet%402.0.4" target="_blank">https://unpkg.com/esri-leaflet@2.0.4</A><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>

&nbsp; <SPAN class="language-css style token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="selector token">body</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN>0<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN>0<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="selector token">#map</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">top</SPAN><SPAN class="punctuation token">:</SPAN>0<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">bottom</SPAN><SPAN class="punctuation token">:</SPAN>0<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">right</SPAN><SPAN class="punctuation token">:</SPAN>0<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN>0<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN>

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>map<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>

<SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp; <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> L<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'map'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">40.374761</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">111.736418</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">5</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp; L<SPAN class="punctuation token">.</SPAN>esri<SPAN class="punctuation token">.</SPAN><SPAN class="token function">tiledMapLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Ftiles.arcgis.com%2Ftiles%2FmvnrDxfOCq0CsVom%2Farcgis%2Frest%2Fservices%2F15094Background%2FMapServer" target="_blank">http://tiles.arcgis.com/tiles/mvnrDxfOCq0CsVom/arcgis/rest/services/15094Background/MapServer</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; detectRetina<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; minZoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; maxZoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">10</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">addTo</SPAN><SPAN class="punctuation token">(</SPAN>map<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>html</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

JohnGravois

you just aren't zoomed in close enough.

<SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> L<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'map'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">40.374761</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">111.736418</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">18</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
L<SPAN class="punctuation token">.</SPAN>esri<SPAN class="punctuation token">.</SPAN><SPAN class="token function">tiledMapLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Ftiles.arcgis.com%2Ftiles%2FmvnrDxfOCq0CsVom%2Farcgis%2Frest%2Fservices%2F15094Background%2FMapServer" target="_blank">http://tiles.arcgis.com/tiles/mvnrDxfOCq0CsVom/arcgis/rest/services/15094Background/MapServer</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; minZoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">15</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; maxZoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">21</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">addTo</SPAN><SPAN class="punctuation token">(</SPAN>map<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

i figured that out by snooping the web traffic in the JSAPI sample viewer that ships with the service.

AdrianWelsh

John,

I appreciate the help. I am not sure how to snoop the web traffic, but I am glad you figured that out.

From the new code, my map showed up (changing the zoom numbers). Though, when it gets zoomed in closer, the image gets real grainy and does not behave as I would expect. Plus, sometimes the tiles disappear. Is this an issue with the service or with something else?

this picture

Should look more like this picture

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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