Drag the point to the location of your business:
Cabo San Lucas Corridor San Jose del Cabo
mapboxgl.accessToken = 'pk.eyJ1IjoiY2Fib21hcHMiLCJhIjoiY2lld3A2eDJoMDU2OHNubTY5ZWZ4bWRlZSJ9.4Qstp-7FIBmAlnwyZqmpfg'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/cabomaps/cjigovulx012k2smns880eydb?optimize=true', center: [-109.911633,22.884548], zoom: 13}); var canvas = map.getCanvasContainer(); var geojson = { 'type': 'FeatureCollection', 'features': [ { 'type': 'Feature', 'geometry': { 'type': 'Point', 'coordinates': [-109.911633,22.884548] } } ] }; function onMove(e) { var coords = e.lngLat; canvas.style.cursor = 'grabbing'; geojson.features[0].geometry.coordinates = [coords.lng, coords.lat]; map.getSource('point').setData(geojson); } function onUp(e) { var coords = e.lngLat; document.getElementById("location").value = coords.lng + ',' + coords.lat; canvas.style.cursor = ''; map.off('mousemove', onMove); map.off('touchmove', onMove); } map.on('load', function() { map.addSource('point', { 'type': 'geojson', 'data': geojson }); map.addLayer({'id': 'point', 'type': 'circle', 'source': 'point', 'paint': { 'circle-radius': 15, 'circle-color': '#3887be' } }); map.on('mouseenter', 'point', function() { map.setPaintProperty('point', 'circle-color', '#3bb2d0'); canvas.style.cursor = 'move'; }); map.on('mouseleave', 'point', function() { map.setPaintProperty('point', 'circle-color', '#3887be'); canvas.style.cursor = ''; }); map.on('mousedown', 'point', function(e) { e.preventDefault(); canvas.style.cursor = 'grab'; map.on('mousemove', onMove); map.once('mouseup', onUp); }); map.on('touchstart', 'point', function(e) { if (e.points.length !== 1) return; e.preventDefault(); map.on('touchmove', onMove); map.once('touchend', onUp); }); }); map.addControl(new mapboxgl.NavigationControl()); map.addControl(new mapboxgl.AttributionControl({compact:true})); map.addControl(new mapboxgl.GeolocateControl({positionOptions: { enableHighAccuracy: true }, trackUserLocation: true })); document.getElementById('fly-csl').addEventListener('click', function() { map.flyTo({ center: [-109.911633,22.884548], essential: true }); geojson.features[0].geometry.coordinates = [-109.911633,22.884548]; map.getSource('point').setData(geojson); document.getElementById("location").value = '-109.911633,22.884548'; }); document.getElementById('fly-cor').addEventListener('click', function() { map.flyTo({ center: [-109.800651,22.963130], essential: true }); geojson.features[0].geometry.coordinates = [-109.800651,22.963130]; map.getSource('point').setData(geojson); document.getElementById("location").value = '-109.800651,22.963130'; }); document.getElementById('fly-sjc').addEventListener('click', function() { map.flyTo({ center: [-109.703583,23.052629], essential: true }); geojson.features[0].geometry.coordinates = [-109.703583,23.052629]; map.getSource('point').setData(geojson); document.getElementById("location").value = '-109.703583,23.052629'; });