44 lines
1.5 KiB
JavaScript
44 lines
1.5 KiB
JavaScript
/* global L */
|
|
var button = document.querySelector('#locate');
|
|
|
|
if (button.addEventListener) {
|
|
button.addEventListener('click', getLocation);
|
|
} else {
|
|
button.attachEvent('onclick', getLocation);
|
|
}
|
|
|
|
function getLocation() {
|
|
if ('geolocation' in navigator) {
|
|
navigator.geolocation.getCurrentPosition(function(position) {
|
|
updateForm(position.coords.latitude, position.coords.longitude);
|
|
addMap(position.coords.latitude, position.coords.longitude);
|
|
});
|
|
}
|
|
}
|
|
|
|
function updateForm(latitude, longitude) {
|
|
var inputLatitude = document.querySelector('#latitude');
|
|
var inputLongitude = document.querySelector('#longitude');
|
|
inputLatitude.value = latitude;
|
|
inputLongitude.value = longitude;
|
|
}
|
|
|
|
function addMap(latitude, longitude) {
|
|
var form = document.querySelector('form');
|
|
var div = document.createElement('div');
|
|
div.setAttribute('id', 'map');
|
|
form.appendChild(div);
|
|
L.mapbox.accessToken = 'pk.eyJ1Ijoiam9ubnliYXJuZXMiLCJhIjoiVlpndW1EYyJ9.aP9fxAqLKh7lj0LpFh5k1w';
|
|
var map = L.mapbox.map('map', 'jonnybarnes.gnoihnim')
|
|
.setView([latitude, longitude], 15)
|
|
.addLayer(L.mapbox.tileLayer('jonnybarnes.gnoihnim', {
|
|
detectRetina: true
|
|
}));
|
|
var marker = L.marker([latitude, longitude], {
|
|
draggable: true
|
|
}).addTo(map);
|
|
marker.on('dragend', function () {
|
|
var markerLocation = marker.getLatLng();
|
|
updateForm(markerLocation.lat, markerLocation.lng);
|
|
});
|
|
}
|