Abfahrten an einer Haltestelle

// Departures: click near a stop to see the next departures. Uses the DeparturesPopup of the mapx-gl SDK.
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: [16.3725, 48.2085], zoom: 15.5 });
new mapx.DeparturesPopup(map, { limit: 8, radius: 150 });

// Show the stops of the visible area as dots.
map.on("load", () => {
  map.addSource("stops", { type: "geojson", data: { type: "FeatureCollection", features: [] } });
  map.addLayer({ id: "stops", type: "circle", source: "stops", paint: { "circle-radius": 6, "circle-color": "#2346d8", "circle-stroke-color": "#fff", "circle-stroke-width": 2 } });
  const load = async () => {
    const b = map.getBounds();
    const list = await mapx.stops({ bbox: [b.getWest(), b.getSouth(), b.getEast(), b.getNorth()], limit: 100 });
    map.getSource("stops").setData({ type: "FeatureCollection", features: list.map((s) => ({ type: "Feature", properties: { name: s.name }, geometry: { type: "Point", coordinates: s.location } })) });
  };
  map.on("moveend", load);
  load();
});

<!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">
// Departures: click near a stop to see the next departures. Uses the DeparturesPopup of the mapx-gl SDK.
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: [16.3725, 48.2085], zoom: 15.5 });
new mapx.DeparturesPopup(map, { limit: 8, radius: 150 });

// Show the stops of the visible area as dots.
map.on("load", () => {
  map.addSource("stops", { type: "geojson", data: { type: "FeatureCollection", features: [] } });
  map.addLayer({ id: "stops", type: "circle", source: "stops", paint: { "circle-radius": 6, "circle-color": "#2346d8", "circle-stroke-color": "#fff", "circle-stroke-width": 2 } });
  const load = async () => {
    const b = map.getBounds();
    const list = await mapx.stops({ bbox: [b.getWest(), b.getSouth(), b.getEast(), b.getNorth()], limit: 100 });
    map.getSource("stops").setData({ type: "FeatureCollection", features: list.map((s) => ({ type: "Feature", properties: { name: s.name }, geometry: { type: "Point", coordinates: s.location } })) });
  };
  map.on("moveend", load);
  load();
});
</script>
</body>
</html>