Leaflet JS file

Leaflet JS file#

Leaflet is an open-source JavaScript library that is used for creating mobile-friendly interactive maps. It is a lightweight and easy-to-use library that allows developers to create dynamic, customizable maps on web pages with minimal effort.

How to include Leaflet JS file in your HTML document?#

The simplest way to include the Leaflet JS file in your HTML document is by using the CDN (Content Delivery Network). You can include the following line of code in the head section of your HTML document:

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.css" integrity="sha512-5m5B5YfKjO8DmTaI+ZxF7Cx2bWhjjv9XWxpFtjK1zCJ+YwvV8W8bM+uJ7Mkzv6v9+SPVB1y3qjHs+YFHKMdNA==" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.js" integrity="sha512-tV7sJNpC9XH0qValyN+VdALfYMQ2r/8JcMkCj+G6l4fQ4lXx88xJgGjcR6kS5SjsTKIq3NBtl6F3gH5c1F5X9A==" crossorigin="anonymous"></script>
</head>

This includes the Leaflet CSS file and JavaScript file from the CDN. Alternatively, you can download the Leaflet library from the official website and include it locally:

<head>
    <link rel="stylesheet" href="leaflet.css" />
    <script src="leaflet.js"></script>
</head>

Creating a basic map with Leaflet#

To create a simple map using Leaflet, you need to create a div element with a unique id where the map will be displayed:

<div id="mapid"></div>

Then, in your JavaScript file, you can create a new Leaflet map object and specify the location and zoom level:

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

This will create a map centered at latitude 51.505 and longitude -0.09 with a zoom level of 13. Finally, you can add a tile layer to the map to display a base map:

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '<a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
    maxZoom: 18,
}).addTo(mymap);

This will add an OpenStreetMap tile layer to the map.