Map Get Coordinates

by Matheus Stein

HTML

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />

<div id='map'></div>
<div id='coordinates' class='coordinates'></div>

<p>
Get a free Token in https://www.mapbox.com
</p>

CSS

#map { width:100%; height:320px;}

JavaScript

mapboxgl.accessToken = window.prompt("MapBoxAPI Token", "opk.eyJ1IjoidGVkaXRvZGluaG8iLCJhIjoiY2ptMTd5NTA4MGpjZDNxcG5veGpmdncwOSJ9.Px0w4BMYvhyKhVSrSmWmmQ");

var coordinates = document.getElementById('coordinates');

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-50.555772513929725, -27.26120263382174],
    zoom: 4
});

var marker = new mapboxgl.Marker({
    draggable: true
})
    .setLngLat([-50.555772513929725, -27.26120263382174])
    .addTo(map);

function onDragEnd() {
    var lngLat = marker.getLngLat();
    coordinates.innerHTML = 'Longitude: ' + lngLat.lng + '<br />Latitude: ' + lngLat.lat;
}

marker.on('dragend', onDragEnd);