In this post, I will show how to overlay an image map on the leafletjs web map interface.
The image map is a seen below:-
We need to get the coordinates of the opposite corners in this format "[[y1, x1], [y2, x2]]".
To overlay rhe image, the code is thus:-
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Map...</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
#slider{
position: fixed;
z-index: 900;
border: 2px solid gray;
top: 100px;
left: 20px;
}
</style>
</head>
<body>
<div id="slider">
<h4>Image Opacity: <span id="image-opacity">0.5<span/> </h4>
<input type='range' id='sldOpacity' min='0' max="1" step='0.1' value='0.5' >
</div>
<div id="mapid" style="width: 100%; height: 600px;"></div>
<script>
// Create the map obj...
var mymap = L.map('mapid', {minZoom: 2, maxZoom: 20})
.setView([8.54090, 7.71428], 13);
// Set a default base map to...
L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
// minZoom: 0,
maxZoom: 18,
subdomains:['mt0','mt1','mt2','mt3']
}).addTo(mymap);
var imageUrl = "Group_Assignment.jpg",
imageBounds = [ [8.58061, 7.68495], [8.50206, 7.75181] ];
var Old_Imge = L.imageOverlay(imageUrl, imageBounds, {
opacity:0.4,
}).addTo(mymap);
Old_Imge.bringToFront();
var overlayMaps = {
'Old Image' : Old_Imge
};
var baseLayers = {
// Basemaps go here...
};
// Adding baseMaps and overlayMaps
L.control.layers(baseLayers, overlayMaps, {collapsed: false}).addTo(mymap);
$(document).ready(function(){
// jQuery methods go here...
$('#sldOpacity').on('change', function () {
$('#image-opacity').html(this.value);
Old_Imge.setOpacity(this.value);
});
}); // end Jquery doc ready.
</script>
</body>
</html>Note that the code above include adding the image to layer control and a slider to give some controls on the overlaid image. See live demo below:-
That is it!
No comments:
Post a Comment