malwoodsantoro · December 26, 2022 09:05 · ToHold · Dec 26, 2022
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <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/v0.45.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
 </head>
 <body>
 <style>
 .coordinates {
    background: rgba(0,0,0,0.5);
    color: #fff;
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding:5px 10px;
    margin: 0;
    font-size: 11px;
    line-height: 18px;
    border-radius: 3px;
    display: none;
 }
 </style>

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

 <script>
 mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
 var coordinates = document.getElementById('coordinates');
 var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    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];
    map.getSource('point').setData(geojson);
 }

 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() {

    map.addSource('point', {
        "type": "geojson",
        "data": geojson
    });

    map.addLayer({
        "id": "point",
        "type": "symbol",
        "source": "point",
        "layout": {
            "icon-image": 'airport-11',
            "icon-size": 3,
            "icon-allow-overlap": true,
            "icon-ignore-placement": true
        }
    });


    map.on('mousedown', 'point', function(e) {
        // Prevent the default map drag behavior.
        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;

        // Prevent the default map drag behavior.
        e.preventDefault();

        map.on('touchmove', onMove);
        map.once('touchend', onUp);
    });
 });
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<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/v0.45.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>
	<style>
	.coordinates {
	background: rgba(0,0,0,0.5);
	color: #fff;
	position: absolute;
	bottom: 10px;
	left: 10px;
	padding:5px 10px;
	margin: 0;
	font-size: 11px;
	line-height: 18px;
	border-radius: 3px;
	display: none;
	}
	</style>

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

	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
	var coordinates = document.getElementById('coordinates');
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/streets-v9',
	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];
	map.getSource('point').setData(geojson);
	}

	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() {

	map.addSource('point', {
	"type": "geojson",
	"data": geojson
	});

	map.addLayer({
	"id": "point",
	"type": "symbol",
	"source": "point",
	"layout": {
	"icon-image": 'airport-11',
	"icon-size": 3,
	"icon-allow-overlap": true,
	"icon-ignore-placement": true
	}
	});


	map.on('mousedown', 'point', function(e) {
	// Prevent the default map drag behavior.
	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;

	// Prevent the default map drag behavior.
	e.preventDefault();

	map.on('touchmove', onMove);
	map.once('touchend', onUp);
	});
	});
	</script>

	</body>
	</html>