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 open 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="São Paulo" placeholder="RouteStart">
<input type="text" name="RouteEnd" id="RouteEnd" value="Rio de Janeiro" placeholder="RouteEnd">
Country <select type="text" name="RouteEnd" id="RouteCountry" value="BRA" placeholder="RouteEnd"></select>
<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 countrys = {
"AF": "Afghanistan",
"AX": "Aland Islands",
"AL": "Albania",
"DZ": "Algeria",
"AS": "American Samoa",
"AD": "Andorra",
"AO": "Angola",
"AI": "Anguilla",
"AQ": "Antarctica",
"AG": "Antigua And Barbuda",
"AR": "Argentina",
"AM": "Armenia",
"AW": "Aruba",
"AU": "Australia",
"AT": "Austria",
"AZ": "Azerbaijan",
"BS": "Bahamas",
"BH": "Bahrain",
"BD": "Bangladesh",
"BB": "Barbados",
"BY": "Belarus",
"BE": "Belgium",
"BZ": "Belize",
"BJ": "Benin",
"BM": "Bermuda",
"BT": "Bhutan",
"BO": "Bolivia",
"BA": "Bosnia And Herzegovina",
"BW": "Botswana",
"BV": "Bouvet Island",
"BR": "Brazil",
"IO": "British Indian Ocean Territory",
"BN": "Brunei Darussalam",
"BG": "Bulgaria",
"BF": "Burkina Faso",
"BI": "Burundi",
"KH": "Cambodia",
"CM": "Cameroon",
"CA": "Canada",
"CV": "Cape Verde",
"KY": "Cayman Islands",
"CF": "Central African Republic",
"TD": "Chad",
"CL": "Chile",
"CN": "China",
"CX": "Christmas Island",
"CC": "Cocos (Keeling) Islands",
"CO": "Colombia",
"KM": "Comoros",
"CG": "Congo",
"CD": "Congo, Democratic Republic",
"CK": "Cook Islands",
"CR": "Costa Rica",
"CI": "Cote D\"Ivoire",
"HR": "Croatia",
"CU": "Cuba",
"CY": "Cyprus",
"CZ": "Czech Republic",
"DK": "Denmark",
"DJ": "Djibouti",
"DM": "Dominica",
"DO": "Dominican Republic",
"EC": "Ecuador",
"EG": "Egypt",
"SV": "El Salvador",
"GQ": "Equatorial Guinea",
"ER": "Eritrea",
"EE": "Estonia",
"ET": "Ethiopia",
"FK": "Falkland Islands (Malvinas)",
"FO": "Faroe Islands",
"FJ": "Fiji",
"FI": "Finland",
"FR": "France",
"GF": "French Guiana",
"PF": "French Polynesia",
"TF": "French Southern Territories",
"GA": "Gabon",
"GM": "Gambia",
"GE": "Georgia",
"DE": "Germany",
"GH": "Ghana",
"GI": "Gibraltar",
"GR": "Greece",
"GL": "Greenland",
"GD": "Grenada",
"GP": "Guadeloupe",
"GU": "Guam",
"GT": "Guatemala",
"GG": "Guernsey",
"GN": "Guinea",
"GW": "Guinea-Bissau",
"GY": "Guyana",
"HT": "Haiti",
"HM": "Heard Island & Mcdonald Islands",
"VA": "Holy See (Vatican City State)",
"HN": "Honduras",
"HK": "Hong Kong",
"HU": "Hungary",
"IS": "Iceland",
"IN": "India",
"ID": "Indonesia",
"IR": "Iran, Islamic Republic Of",
"IQ": "Iraq",
"IE": "Ireland",
"IM": "Isle Of Man",
"IL": "Israel",
"IT": "Italy",
"JM": "Jamaica",
"JP": "Japan",
"JE": "Jersey",
"JO": "Jordan",
"KZ": "Kazakhstan",
"KE": "Kenya",
"KI": "Kiribati",
"KR": "Korea",
"KP": "North Korea",
"KW": "Kuwait",
"KG": "Kyrgyzstan",
"LA": "Lao People\"s Democratic Republic",
"LV": "Latvia",
"LB": "Lebanon",
"LS": "Lesotho",
"LR": "Liberia",
"LY": "Libyan Arab Jamahiriya",
"LI": "Liechtenstein",
"LT": "Lithuania",
"LU": "Luxembourg",
"MO": "Macao",
"MK": "Macedonia",
"MG": "Madagascar",
"MW": "Malawi",
"MY": "Malaysia",
"MV": "Maldives",
"ML": "Mali",
"MT": "Malta",
"MH": "Marshall Islands",
"MQ": "Martinique",
"MR": "Mauritania",
"MU": "Mauritius",
"YT": "Mayotte",
"MX": "Mexico",
"FM": "Micronesia, Federated States Of",
"MD": "Moldova",
"MC": "Monaco",
"MN": "Mongolia",
"ME": "Montenegro",
"MS": "Montserrat",
"MA": "Morocco",
"MZ": "Mozambique",
"MM": "Myanmar",
"NA": "Namibia",
"NR": "Nauru",
"NP": "Nepal",
"NL": "Netherlands",
"AN": "Netherlands Antilles",
"NC": "New Caledonia",
"NZ": "New Zealand",
"NI": "Nicaragua",
"NE": "Niger",
"NG": "Nigeria",
"NU": "Niue",
"NF": "Norfolk Island",
"MP": "Northern Mariana Islands",
"NO": "Norway",
"OM": "Oman",
"PK": "Pakistan",
"PW": "Palau",
"PS": "Palestinian Territory, Occupied",
"PA": "Panama",
"PG": "Papua New Guinea",
"PY": "Paraguay",
"PE": "Peru",
"PH": "Philippines",
"PN": "Pitcairn",
"PL": "Poland",
"PT": "Portugal",
"PR": "Puerto Rico",
"QA": "Qatar",
"RE": "Reunion",
"RO": "Romania",
"RU": "Russian Federation",
"RW": "Rwanda",
"BL": "Saint Barthelemy",
"SH": "Saint Helena",
"KN": "Saint Kitts And Nevis",
"LC": "Saint Lucia",
"MF": "Saint Martin",
"PM": "Saint Pierre And Miquelon",
"VC": "Saint Vincent And Grenadines",
"WS": "Samoa",
"SM": "San Marino",
"ST": "Sao Tome And Principe",
"SA": "Saudi Arabia",
"SN": "Senegal",
"RS": "Serbia",
"SC": "Seychelles",
"SL": "Sierra Leone",
"SG": "Singapore",
"SK": "Slovakia",
"SI": "Slovenia",
"SB": "Solomon Islands",
"SO": "Somalia",
"ZA": "South Africa",
"GS": "South Georgia And Sandwich Isl.",
"ES": "Spain",
"LK": "Sri Lanka",
"SD": "Sudan",
"SR": "Suriname",
"SJ": "Svalbard And Jan Mayen",
"SZ": "Swaziland",
"SE": "Sweden",
"CH": "Switzerland",
"SY": "Syrian Arab Republic",
"TW": "Taiwan",
"TJ": "Tajikistan",
"TZ": "Tanzania",
"TH": "Thailand",
"TL": "Timor-Leste",
"TG": "Togo",
"TK": "Tokelau",
"TO": "Tonga",
"TT": "Trinidad And Tobago",
"TN": "Tunisia",
"TR": "Turkey",
"TM": "Turkmenistan",
"TC": "Turks And Caicos Islands",
"TV": "Tuvalu",
"UG": "Uganda",
"UA": "Ukraine",
"AE": "United Arab Emirates",
"GB": "United Kingdom",
"US": "United States",
"UM": "United States Outlying Islands",
"UY": "Uruguay",
"UZ": "Uzbekistan",
"VU": "Vanuatu",
"VE": "Venezuela",
"VN": "Vietnam",
"VG": "Virgin Islands, British",
"VI": "Virgin Islands, U.S.",
"WF": "Wallis And Futuna",
"EH": "Western Sahara",
"YE": "Yemen",
"ZM": "Zambia",
"ZW": "Zimbabwe"
}
select = document.getElementById('RouteCountry');
for (let country in countrys){
var opt = document.createElement('option');
opt.value = country;
opt.innerHTML = countrys[country];
select.appendChild(opt);
}
document.getElementById('RouteCountry').value = "BR";
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(-15, -47),
zoom: 3
});
// 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.geocode({
singleSlot: document.getElementById('RouteStart').value,
country: document.getElementById('RouteCountry').value
});
modules.geocode({
singleSlot: document.getElementById('RouteEnd').value,
country: document.getElementById('RouteCountry').value
});
};
ym.services.geoCoder.on('success', function(req, res) {
let firstelement = true;
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]));
},
filter: function(feature, layer) {
if (firstelement == true) {
firstelement = false;
return true;
} else {
return false;
}
}
});
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>