Eli Ribble
acaeb2129e
This includes code for geocoding, building a map, and getting the user's location.
62 lines
1.3 KiB
JavaScript
62 lines
1.3 KiB
JavaScript
var map = null;
|
|
var markers = [];
|
|
|
|
function mapAddMarker(coords) {
|
|
const mapContainer = document.getElementById("map-container");
|
|
const marker = new mapboxgl.Marker({
|
|
color: "#FF0000",
|
|
draggable: true
|
|
}).setLngLat(coords).addTo(map);
|
|
marker.on('dragend', function(e) {
|
|
const markerDraggedEvent = new CustomEvent("markerdragend", {
|
|
detail: {
|
|
marker: marker
|
|
}
|
|
});
|
|
mapContainer.dispatchEvent(markerDraggedEvent);
|
|
});
|
|
markers.push(marker);
|
|
}
|
|
|
|
function mapLoad(MAPBOX_ACCESS_TOKEN) {
|
|
return new Promise((resolve, reject) => {
|
|
console.log("Setting up the map...");
|
|
mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN;
|
|
map = new mapboxgl.Map({
|
|
container: "map",
|
|
center: {
|
|
lat: 36.2,
|
|
lng: -119.2
|
|
},
|
|
style: 'mapbox://styles/mapbox/streets-v12', // style URL
|
|
zoom: 15,
|
|
});
|
|
map.addControl(new mapboxgl.GeolocateControl({
|
|
positionOptions: {
|
|
enableHighAccuracy: true
|
|
},
|
|
trackUserLocation: true,
|
|
showUserHeading: true
|
|
}));
|
|
map.addControl(new mapboxgl.NavigationControl());
|
|
map.on("load", function() {
|
|
console.log("Map loaded.");
|
|
resolve(map);
|
|
});
|
|
});
|
|
}
|
|
|
|
function mapJumpTo(args) {
|
|
map.jumpTo(args);
|
|
}
|
|
|
|
function mapSetMarker(coords) {
|
|
console.log("Setting map marker", coords);
|
|
map.jumpTo({
|
|
center: coords,
|
|
zoom: 14,
|
|
});
|
|
markers.forEach((marker) => marker.remove());
|
|
mapAddMarker(coords);
|
|
}
|
|
|