My favorite javascript package of the month: Leaflet.js

2 min readAug 24, 2021

Leaflet Logo Source: https://leafletjs.com/docs/images/logo.png

One of my favorite packages for interactive plotting is leaflet package. This package allows you to create interactive maps very similar to the maps you see on Google maps. It is one of the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of gzipped JS plus 4 KB of gzipped CSS code, it has all the mapping features most developers ever need.

Today you’ll learn how to build an aesthetically pleasing interactive map.

To create a simple map you need the following things:

An proper idle. I recommend Pycharm.
A local web server. The easiest way is to run Python’s SimpleHTTPServer in your map directory

The html file need the following things:

A link to the Leaflet CSS styles sheet
A link the Leaflet JavaScript library
A <div> element to hold the map
A height style specified for the map div.
A short script to create the map in that <div>

Past the below html code into the html file (I will name it leaflet.html)

<html>
<head>
  <title>I am leaflet map</title>
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="    crossorigin=""/>
 <!-- Make sure you put this AFTER Leaflet's CSS -->  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script><style>
    #map{ height: 100% }
  </style>
</head>
<body>

  <div id="map"></div>

<script>

// initialize the map
  var map = L.map('map').setView([51.505, -0.09], 13);

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

  L.marker([51.5, -0.09]).addTo(map)
      .bindPopup(' Hello, <br> I am a marker popup')
      .openPopup();

</script>
</body>
</html>

Want to follow along? Download this project files.

The next step is to create a main.py file to service the leaflet.html file.

# Import the server module

import http.server


# Set the hostname and port number

HOST = "localhost"

PORT = 4000

# Define class to display the leaflet page of the web server

class PythonServer(http.server.SimpleHTTPRequestHandler):

    def do_GET(self):

        if self.path == '/':

            self.path = 'leaflet.html'

        return http.server.SimpleHTTPRequestHandler.do_GET(self)


# Declare object of the class

webServer = http.server.HTTPServer((HOST, PORT), PythonServer)


# Print the URL of the webserver

print("Server started http://%s:%s" % (HOST, PORT))


try:
    # Run the web server

    webServer.serve_forever()

except KeyboardInterrupt:

    # Stop the web server

    webServer.server_close()

    print("The server is stopped.")

Now you just need to execute the following cmd in a terminal:

python main.py

My favorite javascript package of the month: Leaflet.js

Written by Gustav Willig