Route calculation with geocoding
The basic functionality of the SmartMaps API also includes the possibility to calculate arbitrary routes.
To calculate a route, at least the start and end point of the route is required. The coordinates of these points can be determined from address data, as this example demonstrates.
The example is complete; you can save it locally in a file and call it in the browser. You only have to replace the value for the apiKey
.
SmartMaps map
Code example: Route calculation with geocoding
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Route calculation</title>
</head>
<body>
<div id="map-wrapper">
<div class="geocoder-form" style="z-index:1000">
<form id="route-single-slot-form">
<fieldset>
<input type="text" name="RouteStart" id="RouteStart" value="76131" placeholder="RouteStart">
<input type="text" name="RouteEnd" id="RouteEnd" value="76228" placeholder="RouteEnd">
<button type="submit">send</button>
</fieldset>
</form>
</div>
<div id="map" style="width: 600px; height: 600px;"></div>
</div>
<!-- SmartMaps-API -->
<script src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3&apiKey={API_KEY}"></script>
<script>
ym.ready(function(modules) {
var routeSingleSlotForm = document.getElementById('route-single-slot-form');
var routing = new ym.services.Routing();
// Define card content.
var stationLayer = ym.layerGroup();
var waypoints = [];
// Set route layer. This is the complete logic to draw a route with all
// its stations.
routingLayer = ym.geoJson(null, {
style: function(feature) {
// Drawing a polyline
if (feature.geometry.type === "LineString") {
return {
weight: 7,
opacity: 0.8
};
}
},
pointToLayer: function(feature, latlng) {
// Draw in stations with information.
var waypointMarker = ym.circleMarker(latlng);
waypointMarker.bindPopup(feature.properties.description);
return waypointMarker;
}
});
// Define map.
var map = ym.map("map", {
center: ym.latLng(48.991897, 8.435568),
zoom: 13
});
// Draw in route layer.
map.addLayer(routingLayer);
map.addLayer(stationLayer);
routeSingleSlotForm.onsubmit = function(e) {
// Discard old card content.
waypoints = [];
if (routingLayer) {
routingLayer.clearLayers();
}
if (stationLayer) {
stationLayer.clearLayers();
}
e.preventDefault();
modules.geocodeString(document.getElementById('RouteStart').value);
modules.geocodeString(document.getElementById('RouteEnd').value);
};
ym.services.geoCoder.on('success', function(req, res) {
var geoJSONCoords = [];
var geoJson = ym.geoJson(res.body, {
onEachFeature: function(feature, layer) {
layer.setIcon(ym.provider.Icon.Default());
var popUpContent = "";
if (feature.properties.street) {
popUpContent += feature.properties.street + ", "
}
if (feature.properties.zip) {
popUpContent += feature.properties.zip + " "
}
if (feature.properties.city) {
popUpContent += feature.properties.city + " "
}
if (feature.properties.cityPart) {
popUpContent += feature.properties.cityPart
}
layer.bindPopup(popUpContent);
geoJSONCoords.push(ym.latLng(feature.geometry.coordinates[1], feature.geometry.coordinates[0]));
}
});
stationLayer.addLayer(geoJson);
// If there is more than one result in the list of geocoded addresses
// the first one is used.
waypoints.push(geoJSONCoords[0]);
if (waypoints.length > 1) {
routing.calcRoute(waypoints);
}
});
ym.services.geoCoder.on('error', function(req, res, errorType) {
console.log(arguments);
});
routing.on("success", function(request, response) {
routingLayer.addData(response.body);
map.fitBounds(routingLayer.getBounds());
});
});
</script>
</body>
</html>