Home / Programming / GIS / GIS Tutorial with Leafletjs (Popup and Marker Modifications)

GIS Tutorial with Leafletjs (Popup and Marker Modifications)


Bismillahirrahmanirrahiim … This time Detriamelia.com will discuss the GIS Tutorial with LeafletJs equipped with a modification of popups and markers on the map with leaflets. Perhaps many don’t know the technique for making the easiest map with the js leaflet. For that I will explain a little what LeafletJS.

About LeafletJS

LeafletJS is a javascript library for creating maps (GIS) that are mobile friendly and have a very small size of only 38 KB. With a very small library size, of course it is very powerful for today’s class of map libraries. Leaflet itself is very rich in features including being able to run well on all platforms such as desktop or mobile. Plus, Leaflet has an Open Source license so we can use it without paying a penny. Incredible isn’t it …: D

For more details, please visit the official website here. Immediately, this time I will help you all to implement LeafletJS in map making, and then I will also help to add markers at certain coordinates and of course it is equipped with custom popups so that they look more beautiful and professional.

Please follow my tutorial below:

GIS Tutorial with Leafletjs (Popup and Marker Modifications)

First you have to download the js leaflet library by clicking the following link: Download Library LeafletJS, then please extract it and add it to your gis project folder.

After that make the index.html file, please copy the following syntax:

id = “map” is to indicate the parameters that the map will display here. Then please create a file with the name script.js and save it to the assets/js/ folder and add the following syntax:

0.433084, 101.4133345 is the position of the coordinates displayed first on the map, while ‘15‘ is the zoom setting of the map. Please set yourself. L.tilelayer is the process of adding map base layers. If I use a base map from openstreeetmap. Please adjust yourself if you want to use another map base.

Recommended  Beautify Bootstrap Modal Animation With Animate.CSS

Then we will add a marker to the map. Let’s add the custom marker settings first. Please copy the following syntax and paste it directly below the syntax above:

Please adjust ./assets/images/home.svg with your own marker image. Or you may download an image that I have provided in the download link below. Next we add the Custom Popup settings. Please copy the following syntax right below the syntax above:

I enable this custom popup to display my home address and social media links. Of course this custom popup can be modified according to our wishes with formal html.

Next we apply markers and popups to our map by adding the following script just below the syntax above:

For the complete script, please see the following script:

If it’s finished, please save.

Then for the final step, create a style.css file and save it to the folat assets/css/ and add the following syntax to it:


To make this map view more better, lets add “Street View” button to make user able to access via google map. See the example below :

Street View Button
Street View Button


Just add the script below after <div class=’custom-popup’ id=”map”></div> :

Dont forget to change 0.433267,101.415001 with your lat,lng. Next step is, add the css code below between <head> and </head> syntax :

Please save. And check whether it works or not. You will see “Street View” button on right top. To see the demo and download the application that I made, please click the link below:


Alhamdulillah … Finally, the article about GIS Tutorial With Leafletjs (Modified Popups and Markers) was finished. Hopefully this article adds insight and is useful for all of us. If you have questions or doubts, don’t be shy to ask questions by adding comments. 🙂

  • Facebook
  • Twitter
  • Linkedin
  • Pinterest


  1. Assalamualaikum ka, arikelnya sangat membantu. Boleh request nggak ka? bagaimana cara integrasi ke databasenya.. menampilkan marker berdasarkan data di database.. terimakasih ka sebelumnya.

  2. Assalamualaikum ka,artikelnya sangat membantu…
    kebetulan saya pakai bahasa php dalam penggunaannya,untuk menambahkan satuan di belakang nilai pop up bagaimana ya?terimakasih

Leave a Comment

Your email address will not be published. Required fields are marked *

This div height required for enabling the sticky sidebar
Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views :