JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js" crossorigin=""></script>
<!-- Include targomo leaflet full build -->
<script src="https://releases.targomo.com/leaflet/latest-full.min.js"></script>
<style>
body,
html {
margin: 0;
width: 100%;
height: 100%;
}
#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- where the map will live -->
<div id="map"></div>
<script>
// create targomo client
const client = new tgm.TargomoClient('northamerica', 'apiKey here');
// Create a Leaflet map with basemap, set the center of the map to Portland, Oregon.
const tileLayer = new tgm.leaflet.TgmLeafletTileLayer(client, 'Light');
var map = L.map('map', {
layers: [tileLayer],
scrollWheelZoom: false
}).setView([45.494435, -122.651968], 13);
// set the attribution
const attributionText = '<a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">© Targomo</a>';
map.attributionControl.addAttribution(attributionText);
// create a target marker icon to be able to distinguish source and target markers
const redIcon = L.icon({
iconUrl: '__base_url__images/code-example/marker-icon-red.png',
shadowUrl: '__base_url__images/code-example/marker-shadow.png',
iconAnchor: [12, 45],
popupAnchor: [0, -35]
});
// create a draggable source and two draggable target markers, add them to the map
const sourceMarker = L.marker([45.497804, -122.676429], { draggable: true }).addTo(map);
const targetMarkers = [
L.marker([45.514286, -122.641754], { icon: redIcon,...