Hi
Is this possible to integrate with UniMap as Custom Maplayer? Targomo creates a layer on Maps.
https://targomo.com/developers/libraries/javascript/code_example/googlemaps_polygons/
Example HTML
<!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>
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
#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'>© OpenStreetMap contributors</a> <a href='https://targomo.com/developers/resources/attribution/' target='_blank'>© Targomo</a></div>
<script>
async function initMap() {
// create targomo client
const client = new tgm.TargomoClient('westcentraleurope', '__targomo_key_here__');
// Coordinates to center the map
const myLatlng = new google.maps.LatLng(52.36, 4.88);
// define the map
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 11,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROAD
});
// init the first marker
const marker = new google.maps.Marker({
position: myLatlng,
map: map
});
// polygons time rings
const travelTimes = [300, 600, 900, 1200, 1500, 1800];
// you need to define some options for the polygon service
const options = {
travelType: 'bike',
travelEdgeWeights: travelTimes,
maxEdgeWeight: 1800,
edgeWeight: 'time',
serializer: 'json'
};
// define the starting point
const sources = [{ id: 0, lat: myLatlng.lat(), lng: myLatlng.lng() }];
// define the polygon overlay
const layer = new tgm.googlemaps.TgmGoogleMapsPolygonOverlay(map, {
strokeWidth: 20
});
// get the polygons
const polygons = await client.polygons.fetch(sources, options);
// calculate bounding box for polygons
const bounds = polygons.getMaxBounds();
// add polygons to overlay
layer.setData(polygons);
// zoom to the polygon bounds
map.fitBounds(new google.maps.LatLngBounds(bounds.southWest, bounds.northEast), 0);
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
</body>
</html>
Regards
Leon