loading...
Cover image for Getting Started with Leaflet

Getting Started with Leaflet

itsmestevieg profile image Stevie G Updated on ・2 min read

Leaflet (3 Part Series)

1) Getting Started with Leaflet 2) Custom Leaflet GUI 3) LeafletJS Capture GeoJSON & WKT (SQL Spatial Format)

Start a basic HTML template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Getting Started with Leaflet JS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
  </body>
</html>

Include Leaflet CSS file in the head section of your document:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">

Include Leaflet JavaScript file after Leaflet’s CSS (before the closing </body> tag):

<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js'></script>

Put a div element with the id map where you want your map to be:

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

Make sure the map container has a defined height, for example by setting it in CSS:

body {
  padding: 0;
  margin: 0;
}
html,
body,
#map {
  height: 100%;
}

Now you’re ready to initialize the map and do some stuff with it.

Lets start by setting up the BaseMap services. See (Docs) for more info:

//Init Overlays
var overlays = {};

//Init BaseMaps
var basemaps = {
  "OpenStreetMaps": L.tileLayer(
    "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "osm.streets"
    }
  ),
  "Google-Map": L.tileLayer(
    "https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "google.street"
    }
  ),
  "Google-Satellite": L.tileLayer(
    "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "google.satellite"
    }
  ),
  "Google-Hybrid": L.tileLayer(
    "https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "google.hybrid"
    }
  )
};

Next we setup the map options such as center and zoom.

//Map Options
var mapOptions = {
  zoomControl: false,
  attributionControl: false,
  center: [-29.0529434318608, 152.01910972595218],
  zoom: 10,
  layers: [basemaps.OpenStreetMaps]
};

Finally we can initialise the map

//Render Main Map
var map = L.map("map", mapOptions);

Besides tile layers, you can easily add other things to your map, including markers, polylines, polygons, circles, and popups. Let’s add a marker:

var marker = L.marker([-29.0529434318608, 152.01910972595218]).addTo(map);

Popups are usually used when you want to attach some information to a particular object on a map. Leaflet has a very handy shortcut for this:

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

For more information please see the Leaflet Quick Start Guide

See it in action on CodePen

Leaflet (3 Part Series)

1) Getting Started with Leaflet 2) Custom Leaflet GUI 3) LeafletJS Capture GeoJSON & WKT (SQL Spatial Format)

Posted on by:

itsmestevieg profile

Stevie G

@itsmestevieg

I'm a passionate distinguished Computer Engineer

Discussion

markdown guide