Leaflet Isochrone Colors Legend

Use polygon options to build custom legend 
<!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="" type="text/javascript"></script>
    <script src="https://releases.targomo.com/core/latest.min.js" type="text/javascript"></script>
    <script src="https://releases.targomo.com/leaflet/latest-full.min.js"></script>
    <script src="../_shared/tgm-utils.js"></script>

    <style>
        body, html {
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #map {
            width: 100%;
            height: 100%;
        }
        
        .legend {
            position: fixed;
            top: 10px;
            width: 100%;
            z-index: 1000;
            display: flex;
            justify-content: center;
        }

        .legend .container {
            width: 75%;
            max-width: 400px;
            display: flex;
            justify-content: center;
        }

        .legend .container .cell {
            text-align: center;
            padding: 5px 0;
            color: white;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            min-width: 60px;
        }
        
    </style>
</head>
<body>
    
    <div class="legend">
        <div class="container"></div>
    </div>
    
    <div id="map"></div>
    <script>async function initMap() {
            // Coordinates to center the map (Tallinn, Estonia)
            const center = [59.450954, 24.728370];
        
            // Initialize map with TgmExampleUtils
            const { client, map } = TgmExampleUtils.initLeafletMap({
                apiKey: '__targomo_key_here__',
                region: 'easterneurope',
                center: center,
                zoom: 13,
                tileStyle: 'Dark'
            });
        
            // polygons time rings
            const travelTimes = [300, 600, 900, 1200, 1500, 1800];
        
            // you need to define some options for the polygon service
            const options = {
                travelType: 'walk',
                travelEdgeWeights: travelTimes,
                maxEdgeWeight: 1800,
                edgeWeight: 'time',
                serializer: 'json'
            };
        
            // define the starting point
            const sources = [{ id: 0, lat: center[0], lng: center[1] }];
        
            // Add markers for the sources on the map using TgmExampleUtils
            sources.forEach(source => {
                TgmExampleUtils.createMarker([source.lat, source.lng], map);
            });
        
            // define the polygon overlay
            const polygonOverlayLayer = new tgm.leaflet.TgmLeafletPolygonOverlay({ strokeWidth: 30 });
            polygonOverlayLayer.addTo(map);
        
            // iterate the colors assigned to the polygons to build legend
            Object.keys(polygonOverlayLayer.options.colors).forEach(time => {
                const color = polygonOverlayLayer.options.colors[time];
                const label = (time / 60) + 'min';
                const target = document.querySelector('.container');
                const cell = document.createElement('div');
                cell.classList.add('cell');
                cell.style.backgroundColor = color;
                cell.innerText = label;
                target.appendChild(cell);
            })
        
            // get the polygons and fit bounds using TgmExampleUtils
            await TgmExampleUtils.fetchAndFitPolygons(client, sources, options, map, polygonOverlayLayer);
        }
        
        initMap();</script>
</body>
</html>
content_copy
Copied to clipboard