The <b:openStreetMap />
tag allows you to embed an OpenStreetMap into your page.
Inspired by JSF2Leaf
Using the BootsFaces <b:openStreetMap /> widget is straight forward. All you have to know is the GPS coordinate of the center of the map, and, optionally, the GPS coordinates of a marker. The latter can even bear a simple popup message:
OpenStreetMap can be used to display many different maps: maps targeting bikers, sea maps, hiking maps, and so on. Basically, OpenStreetMap displays maps consisting of pre-rendered tiles. For instance, such a map can be composed of tiles which are 256 pixels wide and high.
There are many servers providing pre-rendered tiles. For instance, http://toolserver.org/~cmarqu/hill/{z}/{x}/{y}.png
is a tile provider focusing the public transport, while http://c.tiles.wmflabs.org/hillshading/{z}/{x}/{y}.png
shows the hill shades of the country.
Caveat: If you're using too much bandwidth of the tile provider, you're blocked. Usually, more bandwidth costs money.
Caveat:Usually, the URL of the tile provider is specified with a "//". The BootsFaces widget takes the same syntax, but without the "$".
Attribute | Default value | Description |
---|---|---|
attribution | (none) | Copyright notice, indicating the template provider (aka tile server). |
center | (none) | GPS coordinates of the center of the map |
dragging | false | dragging |
height | (none) | Height of the map. Every CSS unit can be use (e.g. 500px or 50vh). |
marker | (none) | Where to put the marker. Leave this attribute empty if you don't need a marker. |
maxZoom | 20 | Maximal zoom level the user can configure. |
minZoom | 1 | Minimal zoom level the user can configure. |
miniMap | false | Setting this to true activates a miniature map. |
miniMapHeight | 0 | Height of the miniature map (in pixels). |
miniMapPosition | (none) | Position of the miniature map (in pixels). |
miniMapWidth | 0 | Width of the miniature map (in pixels). |
popupMsg | (none) | Tooltip shown when the marker is clicked. |
urlTemplate | (none) | URL of the template provider (aka tile server) delivering the maps. See https://wiki.openstreetmap.org/wiki/Tile_servers for full details. |
width | (none) | Width of the map. Every CSS unit can be use (e.g. 500px or 50vh). |
zoom | 1 | Zoom level. Ranges from 1 (world view) to 20 (detailed view). |
zoomControl | false | Setting this to false hides the zoom control widget. |
zoomGlobal | false | zoomGlobal |