Google Maps Multigraph Overlay
<!DOCTYPE html>
<html>

<head>
    <!--  Include google maps api -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=__your_google_api_key__"
        type="text/javascript"></script>
    <!--  Include targomo googlemaps full build -->
    <script src="https://releases.targomo.com/googlemaps/latest-full.min.js" type="text/javascript"></script>
    <style>
        body,
        html {
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #map {
            width: 100%;
            height: calc(100% - 15px);
        }
        #attribution {
            width: 100%;
            height: 15px;
        }
        #attribution>a {
            float: right;
            font-size: 11px;
            line-height: 15px;
            padding: 0px 5px;
        }
    </style>
</head>

<body>
    <!--  where the map will live  -->
    <div id="map"></div>
    <div id="attribution"><a href='https://www.openstreetmap.org/copyright' target='_blank'>&copy; OpenStreetMap contributors</a> <a href='https://targomo.com/developers/resources/attribution/' target='_blank'>&copy; Targomo</a></div>
    <script>
        async function initMap() {
            // create targomo client
            const client = new tgm.TargomoClient('australia', '__targomo_key_here__');

            const sources = [{ id: 1, lat: -37.809025, lng: 144.763515 }, { id: 2, lat: -37.828199, lng: 145.280529 }];

            // define the map
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 10, minZoom: 10,
                center: new google.maps.LatLng(sources[0].lat, sources[0].lng),
                mapTypeId: google.maps.MapTypeId.ROAD
            });

            sources.forEach(source => {
                const myLatlng = new google.maps.LatLng(source.lat, source.lng);
                const marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map
                });
            });

            const styleOptions = (feature) => {
                const hue = (1 - (feature.getProperty('w') / 1800)) * 120;
                return {
                    weight: 0,
                    fillColor: "hsl(" + hue + ",70%,50%)",
                    strokeWeight: 0,
                    radius: 10,
                    fillOpacity: 0.7,
                    strokeOpacity: 1
                };
            };

            // The traveloptions an multigraph specific options.
            const multigraphOptions = {
                edgeWeight: "time",
                useClientCache: true,
                travelType: "car",
                maxEdgeWeight: 1800,
                multigraph: {
                    aggregation: {
                        type: 'routing_union'
                    },
                    layer: {
                        geometryDetailPerTile: 3,
                        minGeometryDetailLevel: 5,
                        maxGeometryDetailLevel: 25,
                        type: "hexagon"
                    },
                    serialization: {
                        format: "mvt",
                    }
                }
            }
            const multigraphOverlay = new tgm.googlemaps.TgmGoogleMapsMultigraphOverlay(
                map,
                new google.maps.Size(256, 256),
                client,
                multigraphOptions,
                sources,
                styleOptions
            );

            multigraphOverlay.initialize().then(() => {
                map.overlayMapTypes.setAt(0, multigraphOverlay);
            })
        }
        google.maps.event.addDomListener(window, 'load', initMap);
    </script>
</body>

</html>
content_copy
Copied to clipboard