This project is taking data about local businesses from the Berlin Open Data project and displays it in a customizable map that can be embedded on a website.
You can embed the map on your own website by adding the following code:
<div id="mapid" style="height: 200px;"></div>
<script src="https://cdn.jsdelivr.net/gh/r-dent/BerlinLocals@master/map.js" onload="new LocalBusinessMap('mapid')"></script>
If you want to customize the map, you can pass some options to the initializer.
<div id="mapid" style="height: 200px;"></div>
<script src="https://cdn.jsdelivr.net/gh/r-dent/BerlinLocals@master/map.js"></script>
<script>
var localsMap = new LocalBusinessMap('mapid', {
mapBoxKey: 'your_mapbox_key',
mapBoxStyle: 'username/your_style_id',
clusterBelowZoom: 15,
showLocateButton: true,
showCategorySelection: true
})
</script>
Option | Type | Description | Default |
---|---|---|---|
showLocateButton |
boolean |
If you want to show a button that let´s the user zoom to his/her own location. | false |
showCategorySelection |
boolean |
Show a category selection dropdown in the top right corner of the map. | true |
clusterBelowZoom |
number |
You can use clustering to group multiple markers into one for a better overview. To do that just provide a zoom level below which items will get clustered. | undefined |
onDataReady |
function |
A Handler that will be called after loading is done and the map is ready. The resutling categories will be passed as data. | undefined |
mapBoxStyle |
string |
If you have customized your own map style with Mapbox, you can use it for rendering by providing this parameter together with your Mapbox API key. If your Mapbox Style URL is something like mapbox:https://styles/username/your_style_id , use username/your_style_id for this parameter. If you don´t have a Mapbox account, OpenStreetMap will be used as fallback. |
undefined |
mapBoxKey |
string |
Your API key from Mapbox. | undefined |
Here´s an example how to create custom controls for the category selection.
<div id="mapid" style="height: 200px"></div>
<div id="button-container"></div>
<script src="map.js"></script>
<script>
var map = new LocalBusinessMap('mapid', {
showCategorySelection: false,
onDataReady: function(categories) {
var buttonsHTML = ''
for (index in categories) {
category = categories[index]
buttonsHTML += '<button onclick="map.selectCategory(\''+ category +'\')">'+ category +'</button>\n'
}
document.getElementById('button-container').innerHTML = buttonsHTML
}
})
</script>
Please file an issue or contact me if you have feedback.