stadtnavi widget

Demo: https://tiles.stadtnavi.eu/widget/

Usage

• Add latest CSS file to HTML page: https://tiles.stadtnavi.eu/widget/${version}/stadtnavi-widget.css
• Add latest JS: https://tiles.stadtnavi.eu/widget/${version}/stadtnavi-widget.js

There are two widgets available:

StadtnaviAddressBox

Displays a map preview of an arbitrary address in Baden-Württemberg and a link to the pre-filled stadtnavi application so that a route search can be started easily.

To use it create a <div>, give it an ID and at least 200px height and execute the following JS:

new StadtnaviAddressBox(divId, title, address, options);

or, if the coordinates are known and no on-the-fly geocoding is required:

new StadtnaviAddressBox(divId, title, address, options, lat, lon);

Arguments

• divId: ID of the <div> element into which the interactive map is placed.
• title: Name of the place for which the address box is for. This can be choosen freely and is used only for display purposes.
• address: A full address with street name, house number, postal code and city. This is used for geolocating the place on the map so precise information is required, in case lat/lon are unknown.
• lat: Optional latitude value (-90 <=lat <= 90) for locating the place.
• lon: Optional longitude value (-180 <=lat <= 180) for locating the place.

Options

The widget works without any configuration but if you want override some values, you can pass options as a JSON object with the following possible keys:

• tileUrl: Leaflet-compatible URL for the background map. Ignored if wms (see below) is configured instead. Default: https://tiles.stadtnavi.eu/streets/{z}/{x}/{y}{r}.png
  Note: If you want to use the stadtnavi tiles, your domain needs to be whitelisted. Please get in touch with mitmachen@herrenberg.stadtnavi.de to have this done.
• tileSize: What size the tiles have in pixels.
  Default: 256
• attribution: The information text at the bottom right corner of the map.
  Default: Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors
• pinPrimaryColor: Fill color of the map marker.
  Default: #f8dd14
• pinSecondaryColor: Border color of the map marker
  Default: #000000
• maxZoom: Maximum zoom level allowed.
  Default: 18
• stadtnaviLinkText: Link text shown for routing link Default: Route auf stadtnavi suchen
• stadtnaviBaseUrl: Base URL of stadtnavi instance used for routing link Default: https://herrenberg.stadtnavi.de/
• logoUrl: URL of the logo to display at the top right hand corner Default: null
• wms.url: The URL of a WMS service to fetch map tiles from. Default: null
• wms.layers: Comma-separated list of layers for the map tiles Default: null
• wms.format: Image format to use Default: image/png

StadtnaviLocationSelector

Displays a map where users can select a location either by text search, clicking into the map or by using the location API of their browser.

To use it create a <div>, give it an ID and at least 100px height and execute the following JS:

new StadtnaviLocationSelector(divId, options);

Arguments

• divId: ID of the <div> element into which the interactive map is placed.

Options

• tileUrl: Leaflet-compatible URL for the background map. Ignored if wms (see below) is configured instead. Default: https://tiles.stadtnavi.eu/streets/{z}/{x}/{y}{r}.png
  Note: If you want to use the stadtnavi tiles, your domain needs to be whitelisted. Please get in touch with mitmachen@herrenberg.stadtnavi.de to have this done.
• tileSize: What size the tiles have in pixels.
  Default: 256
• center: Initial center point of the map.
  Default: { lat: 48.7840, lng: 9.1829 }
• attribution: The information text at the bottom right corner of the map.
  Default: Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors
• maxZoom: Maximum zoom level allowed.
  Default: 18
• pinPrimaryColor: Fill color of the map marker.
  Default: #f8dd14
• pinSecondaryColor: Border color of the map marker
  Default: #000000
• onLocationSelected: Function that takes a single argument with the location selected by the user.
  Default: (location) => {}
• reverseGeocode: Function that takes two arguments lat and lng and returns a Promise of a formatted address.
  Default: An implementation that uses the stadtnavi reverse geocoder.
• wms.url: The URL of a WMS service to fetch map tiles from. Default: null
• wms.layers: Comma-separated list of layers for the map tiles Default: null
• wms.format: Image format to use Default: image/png

Tiny widget

If you don't have the space for a full-size widget, there is alsow the tiny one available.

Demo: https://tiles.stadtnavi.eu/widget/tiny.html

Usage

• Add latest CSS file to HTML page: https://tiles.stadtnavi.eu/widget/${version}/tiny-widget.css
• Add latest JS: https://tiles.stadtnavi.eu/widget/${version}/tiny-widget.js

TinyRouteSelector

Displays a very small widget to select a start, destination and time.

To use it create a <div>, give it an ID and execute the following JS:

new TinyRouteSelector(divId, options);

Arguments

• divId: ID of the <div> element into which the widget is placed.

Options

• baseUrl: The base URL of your Digitransit instance. Default: https://herzberg-elster.bbnavi.de
• logoUrl: The URL of the logo image to display in the header. Default: https://bbnavi.de/wp-content/uploads/2021/09/bbnavi-logo-weiss-transparent.png
• focus: A JSON object containing the properties lat and lng. This sets the focus point of the search and decides if, for example, a search for "anger" should return "Angermünde" or "Am Anger, Herzberg (Elster)" in first place. Default: { lat: 51.6927, lng: 13.2354 } (Herzberg (Elster))
• destination: A JSON object containing the properties label, latandlng. This pre-selects the destination of the widget. Default: { }`

Development

To develop this widget, you should install the required packages via

npm install

To generate the dist and test locally, run

grunt

When pushing to the main branch, a new version is published via github actions at https://tiles.stadtnavi.eu/widget/.

If you push a git tag a new release with a stable release is automatically created.