SDK: Routenplaner und Ebenen

Fünf Controls des SDK mapx-gl ergeben ein vollständiges Kartenwerkzeug. RouteControl (Pfeil-Schaltfläche) bietet die sechs Profile, Maut und Autobahn meiden und Lkw-Maße; LayerControl baut seine Schalter aus den Style-Metadaten.

Code

// mapx-gl SDK: route planner (car, truck, bike, tolls, truck size), layer switcher from the style, search in a few lines.
import mapx from "https://map.mapx.at/sdk/v1/mapx-gl.bundle.js";

const TOKEN = 'YOUR_TOKEN'; // your public token (mx_pk_…) from https://account.mapx.at

const map = mapx.map({ accessToken: TOKEN, container: "map", style: "streets", center: [15.33, 48.23], zoom: 11 });
map.addControl(new mapx.SearchControl(), "top-left");
map.addControl(new mapx.RouteControl({ profile: "driving-truck" }), "top-right");
map.addControl(new mapx.LayerControl({ groups: ["buildings", "parcels", "relief", "bike_routes"] }), "top-right");
map.addControl(new mapx.StyleSwitcherControl(), "top-right");

Vollständige HTML-Datei

Speichern und im Browser öffnen. Es braucht nur das SDK mapx-gl (bringt MapLibre GL JS 4.7.1 mit) per CDN, dazu den öffentlichen Token (YOUR_TOKEN ersetzen), keinen Build.

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>mapx Beispiel</title>
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css">
<link rel="stylesheet" href="https://map.mapx.at/sdk/v1/mapx-gl.css">
<style>html,body{margin:0;font:14px system-ui,sans-serif}#map{height:70vh}</style>
</head>
<body>
<div id="map"></div>
<script type="module">
// mapx-gl SDK: route planner (car, truck, bike, tolls, truck size), layer switcher from the style, search in a few lines.
import mapx from "https://map.mapx.at/sdk/v1/mapx-gl.bundle.js";

const TOKEN = 'YOUR_TOKEN'; // your public token (mx_pk_…) from https://account.mapx.at

const map = mapx.map({ accessToken: TOKEN, container: "map", style: "streets", center: [15.33, 48.23], zoom: 11 });
map.addControl(new mapx.SearchControl(), "top-left");
map.addControl(new mapx.RouteControl({ profile: "driving-truck" }), "top-right");
map.addControl(new mapx.LayerControl({ groups: ["buildings", "parcels", "relief", "bike_routes"] }), "top-right");
map.addControl(new mapx.StyleSwitcherControl(), "top-right");
</script>
</body>
</html>

Verwendete APIs

Directions GET api.mapx.at/v1/directions/{profile}/{coordinates}
Geocoding GET api.mapx.at/v1/geocode

Eigenes GeoJSON auf der Karte