Skip to content
Examples
SDK: route planner and layers

SDK: route planner and layers

Five controls of the SDK mapx-gl give a complete map tool. RouteControl (the arrow button) offers the six profiles, avoid tolls and motorways and truck size; LayerControl builds its switches from the style metadata.

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");

Complete HTML file

Save and open in a browser. All it needs is the mapx-gl SDK (it brings MapLibre GL JS 4.7.1 with) from a CDN, plus your public token (replace YOUR_TOKEN), no build.

<!doctype html>
<html lang="en">
<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>

APIs used

  • Directions GET api.mapx.at/v1/directions/{profile}/{coordinates}
  • Search GET api.mapx.at/v1/geocode
Your own GeoJSON on the map