How to create a simple map (with a marker) using Leaflet ?

This tutorial is based on Leaflet Quick Start Guide and uses version 1.4.0 of the library. I suggest you check if there is a more up-to-date version before proceeding.

  1. Include the Leaflet stylesheet in the <head> section of your HTML page

     <link rel="stylesheet" href=""
  2. Include the Leaflet JavaScript library at the end of the <body> section of your HTML page

     <script src=""
  3. Put a <div id="map"> element where you want your map to be

     <div id="map" style="width: 600px; height: 400px;"></div>
  4. Now you can add a <script> section at the end of the <body> section (after the <script> that loads Leaflet JavaScript library). All the following JavaScript code needs to go in that new <script> section.

  5. Initialize the map

     var map ='map').setView([50.84673, 4.35247], 12);

    The map will be displayed in <div id="map"> element and will be centered on Brussels (Latitude = 50.84673, Longitude = 4.35247) at zoom level 12.

  6. Add the OpenStreetMap Belgium baselayer

     L.tileLayer('{z}/{x}/{y}.png', {
             '&copy; <a href="">OpenStreetMap</a> contributors' +
             ', Tiles courtesy of <a href="">GEO-6</a>',
         maxZoom: 18
  7. You can add a marker at a specific location

     var marker = L.marker([50.84673, 4.35247]).addTo(map);
  8. And bind a popup to that marker.

     var popup = marker.bindPopup('<b>Hello world!</b><br />I am a popup.');

    By default, the popup will open if you click on the marker.
    If you want the popup to open automatically when the map is loaded, you can add


Now, you can check the result!