GIS Tutorial with Leafletjs (Popup and Marker Modifications)
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:

Recommended  Easy to Identify Identity Card Number (NIK) Using PHP

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.

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.

Recommended  Application of Jquery Mask For Numbers in HTML and PHP Forms

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:

Please save. And check whether it works or not. 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. 🙂

[Total: 8    Average: 5/5]

Detri Amelia Chandra

Hello, I introduce myself Detri Amelia Chandra. Some of my expertise is in System Analysis, Database Design, Artificial Neural Networks and a little in Programming. Check out my thoughts about the world on my blog. I updated this blog a bit rarely, so please keep visit my blog here often ...

This Post Has 2 Comments

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

    1. Waalaikumsalam… terimakasih sudah berkunjung… ok, ntar dibuat artikel cara integrasi ke database…

Leave a Reply

Close Menu