How to add images on map using leaflet and Javascript

Question

I am looking for a way to add images to a 'leaflet map' using Javascript.

What I want to do is to load image, adjust its size and position, and attach it to a leaflet map.

Solution

Here's a basic demo showing how to add an image using imageOverlay.

You adjust the position and size of the image by providing imageBounds

// center of the map
var center = [-33.8650, 151.2094];

// Create the map
var map = L.map('map').setView(center, 5);

// Set up the OSM layer
L.tileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>',
    maxZoom: 18
  }).addTo(map);

// add a marker in the given location
L.marker(center).addTo(map);
L.marker([-35.8650, 154.2094]).addTo(map);

var imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Sydney_Opera_House_-_Dec_2008.jpg/1024px-Sydney_Opera_House_-_Dec_2008.jpg',
imageBounds = [center, [-35.8650, 154.2094]];

L.imageOverlay(imageUrl, imageBounds).addTo(map);

html,
body {
  height: 100%;
}
#map {
  height: 100%;
}

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/leaflet.css">

<div id="map"></div>

Comments

[Ravish]

Welcome to SO, here at SO we help you fix your 'attempts'. Please describe what you did so far, where you are stuck etc so that someone can help you. Want to know how to ask a good question? Follow this guide: stackoverflow.com/help/how-to-ask

[user2441511]

Is this what you're looking for? stackoverflow.com/a/10628079/2441511