Routenberechnung mit Geokodierung
Zur Basisfunktionalität der SmartMaps-API gehört auch die Möglichkeit beliebige Routen zu berechnen.
Um eine Route berechnen zu können, wird mindestens der Start- und Endpunkt der Wegstrecke benötig. Die Koordinaten dieser Punkte können aus Adressangaben ermittelt werden, wie dieses Beispiel demonstriert.
Das Beispiel ist vollständig; Sie können es lokal in einer Datei abspeichern und im Browser aufrufen. Sie müssen lediglich den Wert für den apiKey ersetzen.
SmartMaps-Karte
Codebeispiel: Routenberechnung mit Geokodierung
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Routenberechnung</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">
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(48.991897, 8.435568),
zoom: 6
});
// 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>