Show all Stations on a Map (Mapbox)
The Mobilitybox provides you a Vector Tile Layer which is able to provide you with all stations. The API is returning you the Stations in Tiles so it automatically loads only the stations the users need to load for its current view. Note: You need a valid Mapbox Access Token, which requires an account on www.mapbox.com
Demo
Code excerpt
mapboxgl.accessToken = 'pk.eyJ1IjoidmVzcHV0aSIsImEiOiJja21kZTd2amgyazlpMm5udzFmYTE4MXVzIn0.bLiLrYNkqWfToUYz8Jz72A'; // please use your own Mapbox Access Token.
var map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/dark-v10', // style URL
center: [11.967, 51.480], // starting position [lng, lat]
zoom: 11.5 // starting zoom
});
jQuery(function($){
const mobilitybox_access_token = '---LOGIN_OR_REGISTER_FOR_FREE_TO_INSERT_API_KEY_HERE---';
const mobilitybox = new Mobilitybox(mobilitybox_access_token);
mobilitybox.get_attributions().then((attributions)=>{
$(".attributions").html(attributions.html);
})
map.on('load', function () {
map.addSource('mobilitybox-stations', mobilitybox.vector_tile_source());
addStationsMapLayer('mobilitybox-stations', 'stations')
});
});
function addStationsMapLayer(station_source_id, station_source_layer){
map.addLayer({
'id': 'stations_label',
'source': station_source_id,
'source-layer': station_source_layer,
'type': 'symbol',
'layout': {
'text-anchor': 'top',
'text-size': 12,
'text-offset': [0, 0.5],
'text-field': ['get', 'name']
},
'paint': {
'text-color': 'white',
'text-halo-color': 'black',
'text-halo-width': 1,
}
});
map.addLayer({
'id': 'stations_icon',
'source': station_source_id,
'source-layer': station_source_layer,
'type': 'circle',
'paint': {
'circle-radius': 4,
'circle-color': ['case',
['==', ['get', 'status'], 'future'], 'green',
['==', ['get', 'status'], 'current'], 'yellow',
['==', ['get', 'status'], 'past'], 'red',
'gray'
]
}
}, 'stations_label');
map.addLayer({
'id': 'stations_icon_background',
'source': station_source_id,
'source-layer': station_source_layer,
'type': 'circle',
'paint': {
'circle-radius': 7,
'circle-color': 'black',
'circle-blur': 1
}
}, 'stations_icon');
}
Full HTML-Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Show all Stations on a Map (Mapbox)</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://unpkg.com/mobilitybox/dist/mobilitybox.min.js"></script>
<!-- Mapbox GL JS -->
<script src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
<style>
body {
background-color: silver;
padding-bottom: 30px;
}
.attributions {
border-radius: 0 3px 0 0;
background-color: white;
border-left: 0;
border-bottom: 0;
padding: 5px;
font-size: 10px;
}
</style>
</head>
<body>
<div class="map" id="map" style="width: 100%; height: 800px;"></div>
<span class="fixed-bottom">
<span class="attributions border text-muted font-weight-light"></span>
</span>
<script type="text/javascript">
mapboxgl.accessToken = 'pk.eyJ1IjoidmVzcHV0aSIsImEiOiJja21kZTd2amgyazlpMm5udzFmYTE4MXVzIn0.bLiLrYNkqWfToUYz8Jz72A'; // please use your own Mapbox Access Token.
var map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/dark-v10', // style URL
center: [11.967, 51.480], // starting position [lng, lat]
zoom: 11.5 // starting zoom
});
jQuery(function($){
const mobilitybox_access_token = '---LOGIN_OR_REGISTER_FOR_FREE_TO_INSERT_API_KEY_HERE---';
const mobilitybox = new Mobilitybox(mobilitybox_access_token);
mobilitybox.get_attributions().then((attributions)=>{
$(".attributions").html(attributions.html);
})
map.on('load', function () {
map.addSource('mobilitybox-stations', mobilitybox.vector_tile_source());
addStationsMapLayer('mobilitybox-stations', 'stations')
});
});
function addStationsMapLayer(station_source_id, station_source_layer){
map.addLayer({
'id': 'stations_label',
'source': station_source_id,
'source-layer': station_source_layer,
'type': 'symbol',
'layout': {
'text-anchor': 'top',
'text-size': 12,
'text-offset': [0, 0.5],
'text-field': ['get', 'name']
},
'paint': {
'text-color': 'white',
'text-halo-color': 'black',
'text-halo-width': 1,
}
});
map.addLayer({
'id': 'stations_icon',
'source': station_source_id,
'source-layer': station_source_layer,
'type': 'circle',
'paint': {
'circle-radius': 4,
'circle-color': ['case',
['==', ['get', 'status'], 'future'], 'green',
['==', ['get', 'status'], 'current'], 'yellow',
['==', ['get', 'status'], 'past'], 'red',
'gray'
]
}
}, 'stations_label');
map.addLayer({
'id': 'stations_icon_background',
'source': station_source_id,
'source-layer': station_source_layer,
'type': 'circle',
'paint': {
'circle-radius': 7,
'circle-color': 'black',
'circle-blur': 1
}
}, 'stations_icon');
}
</script>
</body>
</html>