This project is taking data from the Local Heroes Leipzig project and tries to find geo location info for each entry. The resulting data is displayed in a customizable map that can be embedded on a website.
This repository consists of 2 parts:
- A python script that parses data from the website and adds location data to it.
- A JavaScript class that renders an HTML map that displays the data
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/LocalHeroesLeipzig@master/docs/map.js" onload="new LocalHeroesMap('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/LocalHeroesLeipzig@master/docs/map.js"></script>
<script>
var localsMap = new LocalHeroesMap('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 |
useCustomMarkers |
boolean |
Either to use marker images from geoJson data or one dafault image far all markers | false |
isFullScreen |
boolean |
Setting this to true enables 1 finger dragging on mobile browsers. Also zooming with mouse wheel will be enabled. |
false |
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://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 LocalHeroesMap('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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent