How To Add Interactive Maps In HTML Using Leaflet?

Most of the websites require Map features to be integrated and adding interactive maps can greatly boost the user experience and provide valuable information for your website.

One such popular Javascript library that provides this feature is Leaflet which helps in creating interactive maps easily. This blog will guide you on how we can add maps in our website using Leaflet.

Steps To Add Map Using Leaflet

  • First, we need to include the Leaflet library in your project. The leaflet can directly be included using CDN itself to access its functionality.
  • Add the CSS for Leaflet using the <link> tag in the head section
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="      crossorigin=""/>
Code language: HTML, XML (xml)
  • Add the Javascript for Leaflet as well in the <script> tag
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="      crossorigin=""></script>
Code language: HTML, XML (xml)
  • Now create a container in your HTML where you want to show the map. We can use <div> tag for the same and give it an id say ‘mapid’.
<body>      <div id="mapid"></div> ... ... ... </body>
Code language: HTML, XML (xml)
  • Next, we will write a script to initialize the Leaflet instance to display the map.
let mapInstance = L.map("mapid", {        center: [28.5, 77.1],        zoom: 10,      });
Code language: JavaScript (javascript)

In the above code, L  is used to refer to the leaflet library. We are using the .map() function to initialize the Leaflet map, providing the ID of the container in which we need to display the map, the latitude and longitude of the center point of the map, and the zoom level.

  • After this, we need to add the tile layer in order to actually display the map.
L.tileLayer(        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",        {          attribution:            '&copy; OpenStreetMap contributors',          maxZoom: "19",        }      ).addTo(mapInstance);
Code language: JavaScript (javascript)

We can use various other tile providers to add the tile layer. In the above example, we have used the OpenStreetMap tile provider that adds a tile layer and added the map instance we created. The {z},{x},{y} and {s} are different placeholders for zoom level, coordinates, and subdomain required for the tile layer.

That is it, now run your project and you’ll be able to see the map at the respective mapid div position.

Now we might want to add a marker to show some important locations according to our project.

And we might want to delete a marker as well.

To add or delete a marker using a leaflet, follow the below steps.

Steps To Add The Markers On the Map

  • To add a marker, we will be using the marker() function of Leaflet.

But before that, there might be an issue that the marker icon is not being displayed.

For that add the following code before adding a marker. This will resolve the issue.

delete L.Icon.Default.prototype._getIconUrl;        L.Icon.Default.mergeOptions({        iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),        iconUrl: require("leaflet/dist/images/marker-icon.png"),        shadowUrl: require("leaflet/dist/images/marker-shadow.png"),      });
Code language: CSS (css)
  • To add the marker, create an array named markers. Make the scope of this array such that it can be accessed in both add and remove markers functions.
var markers = [];
Code language: JavaScript (javascript)
  • Create an array of latitudes and longitudes and the name of that location.
var locations = [  ["LOCATION_1", 22.8166, 77.0942],  ["LOCATION_2", 22.9804, 77.9189],  ["LOCATION_3", 22.7202, 77.5621],  ["LOCATION_4", 22.3889, 77.6277],  ["LOCATION_5", 22.5929, 77.6325] ];
Code language: JavaScript (javascript)
  • Now add a for loop on the array provided and add a marker on each of the location
for (var i = 0; i < this.locations.length; i++) {        let marker = new L.marker([          this.locations[i][1],          this.locations[i][2],        ])          .bindPopup(this.locations[i][0])          .addTo(mapInstance);          markers.push(marker);      }
Code language: JavaScript (javascript)

In the above code, we used the marker() function to add the markers on the map and iterated through the locations array.

The bindPopup is used to display the name of the location whenever the user clicks on the marker of that location.

The add () function will tell that the marker belongs to the Leaflet map instance named mapInstance declared at the start.

Lastly, we pushed the marker into the markers array. This will be used when you want to delete the markers.

Step to delete the Markers

  • To delete the marker, we will use the markers array we defined in the above section.
  • We will iterate through the markers array and remove the marker.
for(var m = 0; m < this.markers.length; m++){      this.map.removeLayer(this.markers[m]);      }
Code language: JavaScript (javascript)

In the above code, we used the removeLayer() function that will remove all the markers.

Conclusion

This is it. I hope you learned how to integrate interactive maps using the leaflet library. The leaflet is a beginner-friendly package that helps in adding maps in very easy steps.

This blog helps in understand how we can initialize a map using Leaflet. It also guides on adding and deleting the markers on the map created. Go ahead and use this easy-to-embed feature in your projects and enhance your user experience. You can explore further on Leaflet’s official documentation which provides various other options to customize your map and add other features.

Recent Post

  • Generative AI for IT: Integration approaches, use cases, challenges, ROI evaluation and future outlook

    Generative AI is a game-changer in the IT sector, driving significant cost reductions and operational efficiencies. According to a BCG analysis, Generative AI (GenAI) has the potential to deliver up to 10% savings on IT spending—a transformation that is reshaping multiple facets of technology. The impact is especially profound in application development, where nearly 75% […]

  • Generative AI in Manufacturing: Integration approaches, use cases and future outlook

    Generative AI is reshaping manufacturing by providing advanced solutions to longstanding challenges in the industry. With its ability to streamline production, optimize resource allocation, and enhance quality control, GenAI offers manufacturers new levels of operational efficiency and innovation. Unlike traditional automation, which primarily focuses on repetitive tasks, GenAI enables more dynamic and data-driven decision-making processes, […]

  • Generative AI in Healthcare: Integration, use cases, challenges, ROI, and future outlook

    Generative AI (GenAI) is revolutionizing the healthcare industry, enabling enhanced patient care, operational efficiency, and advanced decision-making. From automating administrative workflows to assisting in clinical diagnoses, GenAI is reshaping how healthcare providers, payers, and technology firms deliver services. A Q1 2024 survey of 100 US healthcare leaders revealed that over 70% have already implemented or […]

  • Generative AI in Hospitality: Integration, Use Cases, Challenges, and Future Outlook

    Generative AI is revolutionizing the hospitality industry, redefining guest experiences, and streamlining operations with intelligent automation. According to market research, the generative AI market in the hospitality sector was valued at USD 16.3 billion in 2023 and is projected to skyrocket to USD 439 billion by 2033, reflecting an impressive CAGR of 40.2% from 2024 […]

  • Generative AI for Contract Management: Overview, Use Cases, Implementation Strategies, and Future Trends

    Effective contract management is a cornerstone of business success, ensuring compliance, operational efficiency, and seamless negotiations. Yet, managing complex agreements across departments often proves daunting, particularly for large organizations. The TalkTo Application, a generative AI-powered platform, redefines contract management by automating and optimizing critical processes, enabling businesses to reduce operational friction and improve financial outcomes. […]

  • Generative AI in customer service: Integration approaches, use cases, best practices, and future outlook

    Introduction The rise of generative AI is revolutionizing customer service, heralding a new era of intelligent, responsive, and personalized customer interactions. As businesses strive to meet evolving customer expectations, these advanced technologies are becoming indispensable for creating dynamic and meaningful engagement. But what does this shift mean for the future of customer relationships? Generative AI […]

Click to Copy