Wednesday, November 10, 2021

Overlay old image map on leafletjs web map

 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>
	<title>Leaflet Map...</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>

    <script src="" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

    <!-- JQuery -->
    <script src=""></script>    

<style type="text/css">

		position: fixed;
		z-index: 900;
		border: 2px solid gray;
		top: 100px;
		left: 20px;

<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 id="mapid" style="width: 100%; height: 600px;"></div>

	// Create the map obj...
	var mymap ='mapid', {minZoom: 2, maxZoom: 20})
				 .setView([8.54090, 7.71428], 13);

	// Set a default base map to...
        // minZoom: 0,
     	maxZoom: 18,

  	var imageUrl = "Group_Assignment.jpg",
  	imageBounds = [ [8.58061, 7.68495], [8.50206, 7.75181] ];
	var Old_Imge = L.imageOverlay(imageUrl, imageBounds, {


var overlayMaps = {
    'Old Image' : Old_Imge

var baseLayers = {
	// Basemaps go here...

// Adding baseMaps and overlayMaps
L.control.layers(baseLayers, overlayMaps, {collapsed: false}).addTo(mymap);

	  // jQuery methods go here...

	  $('#sldOpacity').on('change', function () {


}); // end Jquery doc ready.



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:-

Live Demo

That is it!

No comments:

Post a Comment