Routing APIs

Blitzschnelles Routing

Weltweite Deckung

Die Maptoolkit Routing-APIs bieten robuste Funktionen, einschließlich A-zu-B-Routing, Map Matching und Isochronenberechnungen für verschiedene Verkehrsmittel (Auto, Fahrrad und Fuß), mit anpassbaren Gewichtungsoptionen.

Auto Routing API

Ermitteln Sie der kürzesten und effizientesten Wege für Autos weltweit.

Fahrrad Routing API

Wählen Sie aus Profilen für Fahrradinfrastruktur, kürzeste oder schnellste Routen. Erzielen Sie erstklassige Routing-Ergebnisse mit integrierten Höhen- und Routenpopularitäts-Metriken.

Gehen und Wandern

Entdecken Sie die optimalen Wege, die von den Einheimischen bevorzugt werden.

Unsere Routing-APIs sind über eine Anfragenbasierte Preisgestaltung auf dem RapidAPI-Marktplatz verfügbar, ebenso wie als Teil von Maptoolkit Enterprise. Details siehe Maptoolkit Preise.

Sie könnten auch interessiert sein an:

Route Enhancement API
Isochronen-API

Beispiel

Routing with MapLibreGL map

<html>
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="https://static.maptoolkit.net/css/maplibre-gl.css" />
  <style>
    body { width: 100%; height: 100%; padding: 0; margin: 0; font-family: Arial, sans-serif; }
    #map { width: 100%; height: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-polyline/1.1.1/polyline.min.js"></script>
  <script>
    // Initialize MapLibreGL map
    let map = new maplibregl.Map({
      container: "map",
      style: "https://static.maptoolkit.net/styles/toursprung/terrain.json?api_key=your_api_key",
      center: [11.413507, 47.270537],
      zoom: 13,
    });
    map.on("load", () => {
      // Get route from Routing API
      let start = [11.393712, 47.259938],
        end = [11.430896, 47.28187];
      let url = new URL("https://routing.maptoolkit.net/route");
      url.searchParams.append("point", `${start[1]},${start[0]}`);
      url.searchParams.append("point", `${end[1]},${end[0]}`);
      url.searchParams.append("routeType", "car");
      url.searchParams.append("api_key", "your_api_key");
      fetch(url)
        .then((r) => r.json())
        .then((route) => {
          let path = route.paths[0];
          // Add route polyline to map
          let coordinates = polyline.decode(path.points).map(c => c.reverse());
          console.log(coordinates);
          map.addLayer({
            id: "route",
            type: "line",
            source: {
              type: "geojson",
              data: {
                type: "Feature",
                geometry: {
                  type: "LineString",
                  coordinates: coordinates,
                },
              },
            },
            layout: {
              "line-join": "round",
              "line-cap": "round",
            },
            paint: {
              "line-color": "#2a3561",
              "line-width": 5,
            },
          });
          // Add instruction markers with popup to map
          path.instructions.forEach((instruction) => {
            let $img = document.createElement("img");
            $img.src = "https://static.maptoolkit.net/sprites/toursprung/route-via.svg";
            $img.width = 12;
            $img.height = 12;
            $img.style["cursor"] = "pointer";
            new maplibregl.Marker({
              element: $img,
              anchor: "center",
            })
              .setLngLat(instruction.coordinate.reverse())
              .addTo(map)
              .setPopup(new maplibregl.Popup().setHTML(`<p>${instruction.text}</p>`));
          });
          // Add route end marker
          let $img = document.createElement("img");
          $img.src = "https://static.maptoolkit.net/sprites/toursprung/marker.svg";
          $img.width = 29;
          $img.height = 30;
          let marker = new maplibregl.Marker({
            element: $img,
            anchor: "bottom",
          })
            .setLngLat(coordinates[coordinates.length - 1])
            .addTo(map);
        });
    });
  </script>
</body>
</html>