How to customize the OpenStreetMap marker icon and binding popup

In the article How to embed Open Street Map in a webpage (like Google Maps), I explained how to embed an OpenStreetMap in our webpage. In this article, I am going to customize the map marker and bind a simple popup.

You can watch this tutorial as a video in more detail or read the following article

The following script loads an open street map (You can find a complete explanation of this script in this article)

let mapOptions = {
 center:[51.958, 9.141],
 zoom:10
}
let map = new L.map(‘map’ , mapOptions);
let layer = new L.TileLayer(‘http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer);
let marker = new L.Marker([51.958, 9.141]);
marker.addTo(map);

I’ve added a marker to the map using these two lines:

let marker = new L.Marker([51.958, 9.141]);
marker.addTo(map);

For customizing the marker we can pass icon options to the marker class

//define options
let iconOptions = {
 title:”company name”,
 draggable:true,
}
//pass the options to marker
let marker = new L.Marker([51.958, 9.141] , iconOptions);

after adding the above lines to our script the output will be :

For changing the default marker icon, we add an icon option to the iconOptions.

let customIcon = {
   iconUrl:”https://image.flaticon.com/icons/png/512/1397/1397898.png",
 iconSize:[40,40]
}

we use iconUrl to specify the path of the image which we want to use as an icon. It can be absolute or relative. And for specifying icon size we use iconSize. you can see a full options list here.

After defining the desired options, we should create an icon instance using L.icon and pass customIcon variable as shown below.

let customIcon = {
 iconUrl:”https://image.flaticon.com/icons/png/512/1397/1397898.png",
 iconSize:[40,40]
}
let myIcon = L.icon(customIcon);

And the last step is adding myIcon to iconOptions:

let customIcon = {
 iconUrl:”https://image.flaticon.com/icons/png/512/1397/1397898.png",
 iconSize:[40,40]
}
let myIcon = L.icon(customIcon);

let iconOptions = {
 title:”company name”,
 draggable:true,
 icon:myIcon
}
let marker = new L.Marker([51.958, 9.141] , iconOptions);

after adding the above lines to our script the output will be :

Binding popup

we can bind popup in two ways.

The first and simplest way is using the bindPopup() method:

let marker = new L.Marker([51.958, 9.141] , iconOptions);
marker.addTo(map);
marker.bindPopup(“content”).openPopup();

we used openPopup() in order to open the bound popup.

by adding the last line to the script, the output will be :

But there is a more complicated way to open a popup, actually standalone popup.

let popup = L.popup()
.setLatLng([51.958, 9.797] )
.setContent(“<p>new popup</br> more complicated</p>”)
.openOn(map);

using L.popup() to instantiate a popup object.

using setLatLng() to set the geographical points, where we want to open the popup (it can be the same location as the marker or not).

using setContent() for putting out content . And openOn() adds the popup to the map and closes the previous one.

the output after adding these lines would be :

Full code:

let mapOptions = {
 center:[51.958, 9.141],
 zoom:10
}
let map = new L.map(‘map’ , mapOptions);
let layer = new L.TileLayer(‘http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer);
let customIcon = {
 iconUrl:”https://image.flaticon.com/icons/png/512/1397/1397898.png",
 iconSize:[40,40]
}
let myIcon = L.icon(customIcon);

let iconOptions = {
 title:”company name”,
 draggable:true,
 icon:myIcon
}
let marker = new L.Marker([51.958, 9.141] , iconOptions);
marker.addTo(map);
marker.bindPopup(“content”).openPopup();
let popup = L.popup().setLatLng([51.958, 9.797] ).setContent(“<p>new popup</br> more complicated</p>”).openOn(map);

It can be also found on the codepen.io :

I hope this article was useful to you :)

You may also like to read:

How to calculate distance between two points in Leaflet js

How to get latitude and longitude from a click event on Open Street Map