[Solution] Embed Map(openstreetmap) of Leaflet.js into HTML

[Solution] Embed Map(openstreetmap) of Leaflet.js into HTML

This post contains how can we use leafleat.js javascript to embed openstreetmap into HTML file and how to create markercluster(group of marker).

In this post we will discuss.

1) What is leaflet.js
2) What is open street map and how we can embed openstreetmap into HTML file 
3) What is MarkerCluster and what is fitbound of leaflet.js ?
4) Code to Embed openstreetmap into HTML(you can download the code).

So let's start.

You can download the code of this small project from https://github.com/visionfortech/embed-openstreetmap-in-html

What is leaflet.js ?

Leaflet.js is the trending open-source javascript library for mobile as well as tablet as well as web interactive maps.Its file size is just of 33 KB and most importantly it  has mapping features what we developers always needs.

What is open street map and how we can embed openstreetmap into HTML file  ?

OpenStreetMap is a collaborative project to create a free editable map of the world. The creation and growth of OSM has been motivated by restrictions on use or availability of map information across much of the world, and the advent of inexpensive portable satellite navigation devices. OSM is considered a prominent example of volunteered geographic information.

Created by Steve Coast in the UK in 2004, it was inspired by the success of Wikipedia and the predominance of proprietary map data in the UK and elsewhere.Since then, it has grown to over 2 million registered users, who can collect data using manual survey, GPS devices, aerial photography, and other free sources. These crowdsourced data are then made available under the Open Database Licence. The site is supported by the OpenStreetMap Foundation, a non-profit organisation registered in England and Wales.

For Embeding map into HTML

You need to import below JavaScript file into your HTML file.

<script type='text/javascript' src="js/leaflet-src.js">

What is leaflet.js ?

Leaflet.js is the trending open-source javascript library for mobile as well as tablet as well as web interactive maps.Its file size is just of 33 KB and most importantly it  has mapping features what we developers always needs.

Embed into HTML

1) At first you need to include leaflet.js library into your HTML page.

<script type='text/javascript' src="js/leaflet-src.js">

2) Then you need add below thing into your JavaScript.

var mymap = L.map('mapid').setView([10.1, 20.2], 13);

 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 }).addTo(mymap);

 var myIcon = L.icon({
    iconUrl:'images/map-marker-pratik.png',
    iconRetinaUrl:'map-marker-pratik.png',
    iconSize: [25, 40]
  });2) Then you need add below thing into your JavaScript.

3) Then add marker on your Map by doing below

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('Visionfortech.')
    .openPopup();3) Then add marker on your Map by doing below

What is MarkerCluster and what is fitbound of leaflet.js ?

Suppose you have multiple market at same position then what you can do ?

         At that time you need MarkerCluster Library of leaflet.js which can group the marker into once and it will show you the group(or we can say total count of marker at that particular position).

<link rel="stylesheet" type="text/css" href="css/MarkerCluster.css" /> <!-- Use to group Marker -->
<link rel="stylesheet" type="text/css" href="css/MarkerCluster.Default.css" /><!-- Use to group Marker -->
<script type='text/javascript' src='js/leaflet.markercluster.js'></script><!-- Use to group Marker -->
<script src="js/leaflet.markercluster-src.js"></script>

To use markerCluster you have to include above libraries into your HTML File.

After that you have to include below into your JavaScript

var marker_cluster = L.markerClusterGroup();
 
for(var i = 0; i < latitude.length; i++)
{
     var marker =  L.marker([latitude[i], longitude[i]],{icon: myIcon});
     marker.bindPopup("Latitude = "+latitude[i]+"<br>"+"Longitude = "+longitude[i]+"<br>"+"Provider = "+provider[i]);
     marker_cluster.addLayer( marker );//will add each marker into markerCluster
}
mymap.addLayer( marker_cluster );

What is FitBound ?

Suppose you have thousands of marker and you want to display each and every marker on screen when page gets loaded.

mymap.fitBounds(marker_cluster.getBounds())

you can do that by adding a single line into your JavaScript Function.

You can download whole code from  https://github.com/visionfortech/embed-openstreetmap-in-html

Enjoy....!!!!

Feel free to comment below your experience with above approach and If you still find any problem  with above steps Let me know I would love to help you to resolve your  problem.

 If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to Visionfortech