Skip to content

Instantly share code, notes, and snippets.

@pvgenuchten

pvgenuchten/tms in leaflet

Created June 17, 2022 10:27
Show Gist options
  • Save pvgenuchten/8bf1cda36fb3282fd3f711ae8bcd0042 to your computer and use it in GitHub Desktop.
Save pvgenuchten/8bf1cda36fb3282fd3f711ae8bcd0042 to your computer and use it in GitHub Desktop.
Download ZIP
tms in leaflet
Raw
tms in leaflet
<html><body>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
<div id="map2" style="width:80%;height:400px"></div>
<script>
var map = L.map('map2', {
center: [51.505, -0.09],
zoom: 6
});
//either include layer.tms=true or use {-y), see https://leafletjs.com/examples/wms/wms.html
var tms_example1 = L.tileLayer('https://s3-eu-west-1.amazonaws.com/vito-lcv/global/2019/cog-grass-colored-fraction_grass/{z}/{x}/{-y}.png', {
}).addTo(map);
var tms_example2 = L.tileLayer('https://s3-eu-west-1.amazonaws.com/vito-lcv/global/2019/cog-seaswater-colored-fraction_seaswater/{z}/{x}/{y}.png', {
tms: true
}).addTo(map);
var baseLayers = {
"tms1": tms_example1,
"tms2": tms_example2
};
L.control.layers(baseLayers).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment