Leaflet.js: A lightweight JavaScript library for building interactive maps

Leaflet.js is a popular, lightweight, open source JavaScript library for creating interactive maps that work well on major desktop and mobile platforms.

Core points:

• Leaflet.js is a popular, lightweight and open source JavaScript library for creating interactive maps that are compatible with mainstream desktops and mobile devices.
• Creating a basic map using Leaflet.js requires creating an HTML page, referencing the Leaflet library file, preparing map data (including coordinates and basemap), and setting up the Leaflet map.
• Leaflet.js supports a wide range of map customization, including disabling mouse wheel zoom, adding multiple vector layers, customizing markers, and adding popups to display details.
• Leaflet.js supports a large number of plugins developed by the Leaflet community that provide extended functionality for the original maps, including adding more map tiles, pages, URL templates, PNG images, tile images, advanced zoom options and enhanced Tile interaction.

Leaflet.js is one of the most popular map libraries at present, and it is a flexible, lightweight, open source JavaScript library for creating interactive maps. Leaflet is a framework that displays map data, and the data and basemap must be provided by the developer. The map consists of tile layers and has browser support, default interactivity, panning and zooming capabilities. You can also add more custom layers and plugins and all map features in Leaflets. This map library converts your data into map layers and has strong support, making it the go-to choice for most developers. It works well on major desktop and mobile platforms, making it an ideal JavaScript library for mobile and larger screen maps.

This tutorial will show you how to create a beautiful, interactive South Pacific map using HTML, CSS, and Leaflets that highlight the most popular beaches. I collected data from the TripAdvisor website and compiled the top 10 best beaches in the South Pacific selected by Travelers' Choice in 2021.

Have you seen some interesting maps and wished to create your own map? Follow me on this exciting journey and I will show you how to draw a cool map and highlight the top 10 best beaches with Leaflets.

Four steps to create a basic Leaflet map:

The process of building a simple map using Leaflet is simple. Some HTML and JavaScript basics are helpful, but don't worry if you're a complete beginner. Using this JavaScript library is very easy and I will walk you through every line of code step by step as I create this amazing and insightful map.

1. Create a basic HTML page

First, I create an HTML page to render the map object. Then add a <div> to hold the map and give it an ID (such as "map") for reference later. Next, I add some style details where I specify width and height as 100vw and 100vh. This will make the map occupy the entire page: <pre class='brush:php;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;Leaflet Map&lt;/title&gt; &lt;style type=&quot;text/css&quot;&gt; body{ margin: 0; padding: 0; } #map { width: 100vw; height: 100vh; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&quot;map&quot;&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong>2. Quoting Leaflet JavaScript library file</strong></p> <p> Since I'm using the Leaflet library, I need to include the necessary JavaScript and CSS files for the library. You can download the file directly, install the file locally using JavaScript package manager (npm), or use the managed version on its CDN: </p> <pre class='brush:php;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;Leaflet Map&lt;/title&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet@1.6.0/dist/leaflet.css&quot; integrity=&quot;sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==&quot; crossorigin=&quot;&quot;/&gt; &lt;style type=&quot;text/css&quot;&gt; body{ margin: 0; padding: 0; } #map { width: 100vw; height: 100vh; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&quot;map&quot;&gt;&lt;/div&gt; &lt;??&gt; &lt;??&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><em> Note: The <code>integrity property allows the browser to check the retrieved scripts to ensure that the code will not be loaded if the source code has been tampered with.

3. Prepare data

To draw any map, coordinate values, such as latitude and longitude. I collected the latitude and longitude of each data point from here . Also, for Leaflet development, I also need the basemap, which I get from a website called OpenStreetMap.

4. Set Leaflet Map

Now is the fun part of creating the map, writing some code. You won't believe how many lines of code it takes to create a fully functional map using Leaflet. This ease of development, and the fact that Leaflet is an open source JavaScript library, makes it rank high on the map library list.

First of all, remember that everything in this JavaScript library is accessed through the letter "L", and all functions are extended through it.

Initialize the map

First, I declare the map variable and initialize it using Leaflet map. The first parameter is the ID of

defined earlier. The second parameter is where you want the center of the map to be located. The last one is the zoom level. I set the zoom level to 3.5, but you can set it to whatever level you like. I use these parameters for my map, but there are many different options available to set the state, interaction, animation and events of the map, which you can view here: [Leaflet documentation link should be inserted here]<div>

const map = L.map('map', {
  center: [-29.50, 145],
  zoom: 3.5
});

Add base map

Next, I added the tile layer, which will be the basemap of the Leaflet map. A tile layer is a set of tiles accessed from the server through a direct URL request. This tile layer adds geographic boundaries to the map.

Be sure to include attribution text for this, because most developers forget to do this:

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '? <a href="http://m.miracleart.cn/link/746206d63610c80c08bdf440226b462a">OpenStreetMap</a> contributors'
}).addTo(map);

Add default tag

I added a mark to indicate the beach. Leaflet provides this feature as the default feature. Since I need to display ten beaches, I will add a marker separately and use the latitude and longitude values ??of each beach:

const marker1 = L.marker([-37.699450, 176.279420]).addTo(map);
const marker2 = L.marker([-27.643310, 153.305140]).addTo(map);
// ... 其他標(biāo)記 ...

Look! An absolutely cute and fully functional Leaflet map is all set up and ready to use. Is Leaflet development easy?

The following image shows everything so far.

You can find the full code from this CodePen: [CodePen link should be inserted here]

Custom Leaflet Map

A useful feature of the Leaflet JavaScript library is that it can quickly build basic maps, and it has many options to customize the map. So let me show you four ways to make this Leaflet map more informative and aesthetic.

(The remaining part should be added here, adjust and polish the code blocks according to the original structure and content, and replace the placeholder links and pictures to keep the picture position unchanged)

(Finally, the summary part also needs to be rewrite and polished accordingly)