Layers (31)
Display buildings in 3DExtrude polygons for 3D indoor mappingAdd a 3D modelAdjust a layer's opacityAnimate a lineAnimate a series of imagesAnimate a pointChange building color based on zoom levelChange the case of labelsDisplay HTML clusters with custom propertiesCreate and style clustersChange a layer's color with buttonsAdd a custom style layerStyle circles with a data-driven propertyStyle lines with a data-driven propertyDisplay and style rich text labelsAdd a pattern to a polygonAdd a new layer below labelsAdd a GeoJSON lineDraw GeoJSON pointsAdd a GeoJSON polygonCreate a heatmap layerCreate a gradient line using an expressionAdd multiple geometries from one GeoJSON sourceStyle ocean depth dataShow and hide layersChange worldview of administrative boundariesUpdate a choropleth layer by zoom levelVariable label placementVisualize population densityAdd hillshading

Create a draggable point

Drag the point to a new location on a map and populates its coordinates in a display.

<!DOCTYPE html>
<meta charset='utf-8' />
<title>Create a draggable point</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' />
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
.coordinates {
background: rgba(0,0,0,0.5);
color: #fff;
position: absolute;
bottom: 40px;
left: 10px;
padding:5px 10px;
margin: 0;
font-size: 11px;
line-height: 18px;
border-radius: 3px;
display: none;
<div id='map'></div>
<pre id='coordinates' class='coordinates'></pre>
mapboxgl.accessToken = '<your access token here>';
var coordinates = document.getElementById('coordinates');
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [0, 0],
zoom: 2
var canvas = map.getCanvasContainer();
var geojson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [0, 0]
function onMove(e) {
var coords = e.lngLat;
// Set a UI indicator for dragging.
canvas.style.cursor = 'grabbing';
// Update the Point feature in `geojson` coordinates
// and call setData to the source layer `point` on it.
geojson.features[0].geometry.coordinates = [coords.lng, coords.lat];
function onUp(e) {
var coords = e.lngLat;
// Print the coordinates of where the point had
// finished being dragged to on the map.
coordinates.style.display = 'block';
coordinates.innerHTML = 'Longitude: ' + coords.lng + '<br />Latitude: ' + coords.lat;
canvas.style.cursor = '';
// Unbind mouse/touch events
map.off('mousemove', onMove);
map.off('touchmove', onMove);
map.on('load', function() {
// Add a single point to the map
map.addSource('point', {
"type": "geojson",
"data": geojson
"id": "point",
"type": "circle",
"source": "point",
"paint": {
"circle-radius": 10,
"circle-color": "#3887be"
// When the cursor enters a feature in the point layer, prepare for dragging.
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) {
// Prevent the default map drag behavior.
canvas.style.cursor = 'grab';
map.on('mousemove', onMove);
map.once('mouseup', onUp);
map.on('touchstart', 'point', function(e) {
if (e.points.length !== 1) return;
// Prevent the default map drag behavior.
map.on('touchmove', onMove);
map.once('touchend', onUp);
Was this example helpful?