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

Routing


Country

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>