stadtnavi widget demos

Integrate stadtnavi into your own website.

To read the official documentation visit the project's Github page. Alternatively, look at the source code of this page to get an idea how to use the widgets.

Location selector

Location selector with default map style.

JavaScript code

new StadtnaviLocationSelector('widget-1', {
  onLocationSelected: (location) => {
  var str = JSON.stringify(location, null, 2);
  document.getElementById("result-1").textContent = str;
}});

Click on the map, use the search or the "Locate Me" button to select a location.

Callback result

Address box

JavaScript code

new StadtnaviAddressBox('widget-2', "Volkshochschule Außenstelle Ehningen", "Gartenstraße 11, 71139 Ehningen", {});

JavaScript code

new StadtnaviAddressBox('widget-3', "Rathaus Bietigheim-Bissingen", "Marktplatz 8, 74321 Bietigheim-Bissingen", {});

Address box with custom map tiles, logo and pin color

JavaScript code

new StadtnaviAddressBox('widget-4', "Bahnhof Angermünde", "Bahnhofsplatz, 16278 Angermünde", {
  tileUrl: "https://sgx.geodatenzentrum.de/wmts_topplus_open/tile/1.0.0/web/default/WEBMERCATOR/{z}/{y}/{x}.png",
  attribution: "Kartendaten:© Bundesamt für Kartographie und Geodäsie (2022)",
  pinPrimaryColor: "#DA1B1B",
  pinSecondaryColor: "#FFFFFF",
  stadtnaviLinkText: "Route in bbnavi suchen",
  stadtnaviBaseUrl: "https://angermuende.bbnavi.de/"
});

Address box with WMS tiles and custom color

JavaScript code

new StadtnaviAddressBox('widget-5', "Bahnhof Angermünde", "Bahnhofsplatz, 16278 Angermünde", {
  wms: {
    url: "https://isk.geobasis-bb.de/mapproxy/webatlasde_topplus/service/wms",
    layers: "webatlastopplusopen_farbe",
    format: "image/png"
  },
  attribution: "© GeoBasis-DE/LGB, dl-de/by-2-0, © Geoportal Berlin, dl-de/by-2-0, © BKG",
  pinPrimaryColor: "#DA1B1B",
  pinSecondaryColor: "#FFFFFF",
  stadtnaviLinkText: "Route in bbnavi suchen",
  stadtnaviBaseUrl: "https://angermuende.bbnavi.de/",
  logoUrl : "https://tiles.stadtnavi.eu/widget/latest/images/bbnavi-logo.svg"
});