Routing API + Leaflet

Display a route on a Leaflet map

by Geoapify

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css">
<div id="my-map"></div>

CSS

html,
body,
#my-map {
  width: 100%;
  height: 100%;
  margin: 0;
}

JavaScript

// Leaflet has native support for raster maps, So you can create a map with a few commands only!

// The Leaflet map Object
const map = L.map('my-map').setView([38.908838755401035, -77.02346458179596], 12);

// The API Key provided is restricted to JSFiddle website
// Get your own API Key on https://myprojects.geoapify.com
const myAPIKey = "6dc7fb95a3b246cfa0f3bcef5ce9ed9a";

// Retina displays require different mat tiles quality
const isRetina = L.Browser.retina;

const baseUrl = "https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}.png?apiKey={apiKey}";
const retinaUrl = "https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}@2x.png?apiKey={apiKey}";

// Add map tiles layer. Set 20 as the maximal zoom and provide map data attribution.
L.tileLayer(isRetina ? retinaUrl : baseUrl, {
  attribution: 'Powered by <a href="https://www.geoapify.com/" target="_blank">Geoapify</a> | <a href="https://openmaptiles.org/" rel="nofollow" target="_blank">© OpenMapTiles</a> <a href="https://www.openstreetmap.org/copyright" rel="nofollow" target="_blank">© OpenStreetMap</a> contributors',
  apiKey: myAPIKey,
  maxZoom: 20,
  id: 'osm-bright',
}).addTo(map);

// calculate and display routing:
// from 38.937165,-77.045590 (1920 Quincy Street Northwest, Washington, DC 20011, United States of America)
const fromWaypoint = [38.937165, -77.045590]; // latutude, longitude
const fromWaypointMarker = L.marker(fromWaypoint).addTo(map).bindPopup("1920 Quincy Street Northwest, Washington, DC 20011, United States of America");

// to 38.881152,-76.990693 (1125 G Street Southeast, Washington, DC 20003, United States of America)
const toWaypoint = [38.881152, -76.990693]; // latitude, longitude
const toWaypointMarker = L.marker(toWaypoint).addTo(map).bindPopup("1125 G Street Southeast, Washington, DC 20003, United States of America");


const turnByTurnMarkerStyle = {
  radius: 5,
  fillColor: "#fff",
  color: "#555",
  weight: 1,
  opacity: 1,
  fillOpacity:...