Skip to content

Instantly share code, notes, and snippets.

@chingchai

chingchai/leaflet_image_overlay.html

Created July 21, 2019 16:56
Show Gist options
  • Save chingchai/6f4f693265ade224dc8d3062a953f16f to your computer and use it in GitHub Desktop.
Save chingchai/6f4f693265ade224dc8d3062a953f16f to your computer and use it in GitHub Desktop.
Download ZIP
Leafletjs-Image_Overlay
Raw
leaflet_image_overlay.html
<html>
<head>
<title>Image Overlays</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<style>
html,
body {
height: 100%;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = L.map('map');
// Add Basemap
var Stamen_TonerLite = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 20,
ext: 'png'
}).addTo(map);
// Add Service
var imageUrls = [
'http://api2.thaiwater.net:9200/api/v1/thaiwater30/shared/image?_csrf=&image=AAECAwQFBgcICQoLDA0ODz2sq-vcpj7lwlcz80eSBcZLaEzHj--MdbovEXSJG9zelsffPdgz6HbJ-TKTkNcnxdttiASLo0edxg==&t=2019-03-09%2010:47'
],
bounds = L.latLngBounds([[22.543789, 93.593127], [1.508690,111.844414]]);
map.fitBounds(bounds);
// Add Image Overlay
var overlay = L.imageOverlay(imageUrls, bounds, {
opacity: 0.7,
attribution: 'Wave forecast &copy; <a href="http://web.thaiwater.net/thaiwater30/">HAII</a>',
interactive: false,
autoplay: false
});
map.addLayer(overlay);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment