Skip to content

Instantly share code, notes, and snippets.

@chingchai

chingchai/thaichote_wmts_leaflet.html

Created May 2, 2018 07:50
Show Gist options
  • Save chingchai/11194e622576b639382f2b592c2194bb to your computer and use it in GitHub Desktop.
Save chingchai/11194e622576b639382f2b592c2194bb to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet Add Thaichote WMTS
Raw
thaichote_wmts_leaflet.html
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Thaichote</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="http://leafletjs.com/docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" integrity="sha512-wcw6ts8Anuw10Mzh9Ytw4pylW8+NAD4ch3lqm9lzAsTxg0GFeJgoAtxuCLREZSC5lUXdVyo/7yfsqFjQ4S+aKw=="
crossorigin="" />
<script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js" integrity="sha512-mNqn2Wg7tSToJhvHcqfzLMU6J4mkOImSPTxVZAdo+lcPlk+GhZmYgACEe0x35K7YzW1zJ7XyJV/TT1MrdXvMcA=="
crossorigin="">
</script>
<style>
#map {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div id='map'></div>
<!-- Leaflet Script -->
<script type="text/javascript">
//var map =L.map('map').setView([13.00077, 100.57218], 8);
var map = L.map('map', {
center: [13.326, 100.483],
zoom: 8
});
// Add Basemap Google Maps
var ghyb = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
minZoom: 0,
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
}).addTo(map);
// Add WMTS Thaichote by GISTDA GO
var theos_wmts = L.tileLayer(
'http://go-tiles1.gistda.or.th/mapproxy/wmts/thaichote/GLOBAL_WEBMERCATOR/{z}/{x}/{y}.png', {
minZoom: 0,
maxZoom: 20,
format: 'image/png',
attribution: '&copy; <a href = "http://www.gistda.or.th">GISTDA</a>',
}).addTo(map);
// Overlay WMS Layer from OCEAN GISTDA
var wmsLayer1 = L.tileLayer.wms('http://ocean.gistda.or.th/geoserver/coastalradar/ows?', {
layers: 'coastalradar:recent_gulf',
format: 'image/png',
version: '1.1.0',
transparent: true,
tiled: true,
attribution: '&copy; <a href="http://coastalradar.gistda.or.th">OCEAN GISTDA</a>',
}).addTo(map);
var overlayMaps = {
"WMS Layer": wmsLayer1,
};
var baseMaps = {
"Google Hybrid": ghyb,
"Thaichote": theos_wmts
};
L.control.layers(baseMaps, overlayMaps).addTo(map);
L.control.scale().addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment