An example that shows an ESRI's satellite layer with Leaflet.js. A lot of different tile services are compatible with Leaflet: click here for a list with live previews.
Last active
April 23, 2024 09:25
-
-
Save nitaku/047a77e256de17f25e72 to your computer and use it in GitHub Desktop.
Leaflet with ESRI satellite tiles
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body = d3.select 'body' | |
| width = body.node().getBoundingClientRect().width | |
| height = body.node().getBoundingClientRect().height | |
| d3.select('#map') | |
| .style | |
| width: width | |
| height: height | |
| mbAttr = 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' | |
| mbUrl = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}' | |
| base_layer = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr}) | |
| map = L.map 'map', | |
| center: [30, 0], | |
| zoom: 2, | |
| layers: [base_layer] |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| body { | |
| display: flex; | |
| } | |
| #map { | |
| flex-grow: 1; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Leaflet with ESRI satellite tiles</title> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> | |
| <link rel="stylesheet" href="index.css"> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Generated by CoffeeScript 1.10.0 | |
| (function() { | |
| var base_layer, body, height, map, mbAttr, mbUrl, width; | |
| body = d3.select('body'); | |
| width = body.node().getBoundingClientRect().width; | |
| height = body.node().getBoundingClientRect().height; | |
| d3.select('#map').style({ | |
| width: width, | |
| height: height | |
| }); | |
| mbAttr = 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'; | |
| mbUrl = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'; | |
| base_layer = L.tileLayer(mbUrl, { | |
| id: 'mapbox.streets', | |
| attribution: mbAttr | |
| }); | |
| map = L.map('map', { | |
| center: [30, 0], | |
| zoom: 2, | |
| layers: [base_layer] | |
| }); | |
| }).call(this); |
do you know the license for displaying those maps hosted at arcgisonline.com ?
Author
No, I'm sorry
Il Mar 23 Apr 2024, 10:45 João Pimentel Ferreira ***@***.***>
ha scritto:
… ***@***.**** commented on this gist.
------------------------------
do you know the license for displaying those maps hosted at
arcgisonline.com ?
—
Reply to this email directly, view it on GitHub
<https://gist.github.com/nitaku/047a77e256de17f25e72#gistcomment-5033201>
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAMHXWJ2PTMMN6LNEMYR5RTY6YNTHBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVAZDQMZRGU3TEMNHORZGSZ3HMVZKMY3SMVQXIZI>
.
You are receiving this email because you authored the thread.
Triage notifications on the go with GitHub Mobile for iOS
<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675>
or Android
<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>
.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi, I am using ESRI for satellite images. I would like to ask if this is free to use?