Created
August 25, 2020 17:05
-
-
Save arashmad/7e873ed20e77a983754213eb4768f96b to your computer and use it in GitHub Desktop.
This is an example of how you can get a tile image link by click on Leaflet Tile Layer map
This file contains 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
/* | |
In this example I showed that users can click on map and | |
get link of image tile and containt location of clicked position. | |
I used Leaflet.js library and a ArcGIS tile service to prove my work. | |
You can easily change "samplePosition" and "initialZoom" to move to | |
your favourite location and zoom. | |
Just open browser console log and click on the link that is appread | |
after clicking on map. | |
*/ | |
// Constants | |
var singleTileLink = '' | |
var esriEndpoint = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/' | |
var samplePosition = {lat: 47.59, long:2.38} | |
var initialZoom = 14 | |
// Layer and Map | |
var mainMap = L.map('map').setView([samplePosition.lat, samplePosition.long], initialZoom); | |
var esriLayer = L.tileLayer(`${esriEndpoint}{z}/{y}/{x}`); | |
mainMap.on('click', function (e) { | |
singleTileSpecification = getTileURL(e.latlng.lat, e.latlng.lng, this.getZoom()); | |
singleTileLink = `${esriEndpoint}${singleTileSpecification}` | |
console.log(singleTileLink) | |
}); | |
esriLayer.addTo(mainMap); | |
// Function | |
function getTileURL(lat, lon, zoom) { | |
var pi = Math.PI; | |
var xtile = parseInt(Math.floor((lon + 180) / 360 * (1 << zoom))); | |
var ytile = parseInt(Math.floor((1 - Math.log(Math.tan(lat * pi / 180) + 1 / Math.cos(lat * pi / 180)) / Math.PI) / 2 * (1 << zoom))); | |
var tileSpecification = `${zoom}/${ytile}/${xtile}`; | |
return `${esriEndpoint}${tileSpecification}`; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment