Demo: https://tiles.stadtnavi.eu/widget/
- 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:
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);
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.
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 ifwms
(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 © <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: 18stadtnaviLinkText
: 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
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);
divId
: ID of the<div>
element into which the interactive map is placed.
tileUrl
: Leaflet-compatible URL for the background map. Ignored ifwms
(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 © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors
maxZoom
: Maximum zoom level allowed.
Default: 18pinPrimaryColor
: 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 argumentslat
andlng
and returns aPromise
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
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
- 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
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);
divId
: ID of the<div>
element into which the widget is placed.
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 propertieslat
andlng
. 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 propertieslabel
, latand
lng. This pre-selects the destination of the widget. Default:
{ }`
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.