Jonny Barnes
dc6b8c53ec
commit f00503ad21200f49b360b64297e6969768721ff6
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date: Fri Nov 25 15:58:53 2016 +0000
Update changelog
commit dc0e92b0b9085609525ec937d21625ddca5350d7
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date: Fri Nov 25 15:58:17 2016 +0000
gulp derived assets
commit 78501ee5ffe39ca0c96539d5406fcdc4170176c4
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date: Fri Nov 25 15:57:47 2016 +0000
Add navigation controls, fixes #37
50 lines
2.3 KiB
JavaScript
50 lines
2.3 KiB
JavaScript
/* global mapboxgl */
|
|
//This code runs on page load and looks for <div class="map">, then adds map
|
|
var mapDivs = document.querySelectorAll('.map');
|
|
mapboxgl.accessToken = 'pk.eyJ1Ijoiam9ubnliYXJuZXMiLCJhIjoiY2l2cDhjYW04MDAwcjJ0cG1uZnhqcm82ayJ9.qA2zeVA-nsoMh9IFrd5KQw';
|
|
for (var i = 0; i < mapDivs.length; i++) {
|
|
var mapDiv = mapDivs[i];
|
|
var latitude = mapDiv.dataset.latitude;
|
|
var longitude = mapDiv.dataset.longitude;
|
|
var el = document.createElement('div');
|
|
el.classList.add('marker');
|
|
var mapMenu = document.createElement('div');
|
|
mapMenu.classList.add('map-menu');
|
|
var streetsInput = document.createElement('input');
|
|
streetsInput.setAttribute('id', 'streets');
|
|
streetsInput.setAttribute('type', 'radio');
|
|
streetsInput.setAttribute('name', 'toggle');
|
|
streetsInput.setAttribute('value', 'streets');
|
|
streetsInput.setAttribute('checked', 'checked');
|
|
streetsInput.addEventListener('click', function () {
|
|
map.setStyle('mapbox://styles/mapbox/streets-v9');
|
|
});
|
|
var streetsLabel = document.createElement('label');
|
|
streetsLabel.setAttribute('for', 'streets');
|
|
streetsLabel.appendChild(document.createTextNode('Streets'));
|
|
var satelliteInput = document.createElement('input');
|
|
satelliteInput.setAttribute('id', 'satellite');
|
|
satelliteInput.setAttribute('type', 'radio');
|
|
satelliteInput.setAttribute('name', 'toggle');
|
|
satelliteInput.setAttribute('value', 'streets');
|
|
satelliteInput.addEventListener('click', function () {
|
|
map.setStyle('mapbox://styles/mapbox/satellite-v9');
|
|
});
|
|
var satelliteLabel = document.createElement('label');
|
|
satelliteLabel.setAttribute('for', 'satellite');
|
|
satelliteLabel.appendChild(document.createTextNode('Satellite'));
|
|
mapMenu.appendChild(streetsInput);
|
|
mapMenu.appendChild(streetsLabel);
|
|
mapMenu.appendChild(satelliteInput);
|
|
mapMenu.appendChild(satelliteLabel);
|
|
var map = new mapboxgl.Map({
|
|
container: mapDiv,
|
|
style: 'mapbox://styles/mapbox/streets-v9',
|
|
center: [longitude, latitude],
|
|
zoom: 15,
|
|
scrollZoom: false
|
|
});
|
|
map.addControl(new mapboxgl.NavigationControl());
|
|
new mapboxgl.Marker(el, {offset: [-10, -20]}).setLngLat([longitude, latitude]).addTo(map);
|
|
mapDiv.appendChild(mapMenu);
|
|
}
|