> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt) # Create a draggable point In this example, a user can drag a point to a new location on the map, and a map overlay displays the new point coordinates. The example stores the point coordinates in a variable with a GeoJSON value, then uses [`MapTouchEvent`s](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent) to prevent the default map drag behavior and get the updated coordinates. Then it uses [`setData`](https://docs.mapbox.com/mapbox-gl-js/api/sources/#geojsonsource#setdata) to enable changes to the variable and [`addSource`](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addsource) to use the variable as the value for the `data` property. > Example code: **JavaScript** ```html Create a draggable point 






```

**React**

```jsx
import React, { useEffect, useRef, useState } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';

import 'mapbox-gl/dist/mapbox-gl.css';

const MapboxExample = () => {
  const mapContainerRef = useRef();
  const mapRef = useRef();

  const [coordinates, setCoordinates] = useState();

  useEffect(() => {
    mapRef.current = new mapboxgl.Map({
      // TO MAKE THE MAP APPEAR YOU MUST
      // ADD YOUR ACCESS TOKEN FROM
      // https://account.mapbox.com
      accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
      container: mapContainerRef.current,
      style: 'mapbox://styles/mapbox/standard',
      center: [0, 0],
      zoom: 2
    });

    const canvas = mapRef.current.getCanvasContainer();

    const geojson = {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [0, 0]
          }
        }
      ]
    };

    function onMove(e) {
      const coords = e.lngLat;

      canvas.style.cursor = 'grabbing';

      geojson.features[0].geometry.coordinates = [coords.lng, coords.lat];
      mapRef.current.getSource('point').setData(geojson);
    }

    function toFourDecimalPlaces(num) {
      return parseFloat(num.toFixed(4));
    }

    function onUp(e) {
      const coords = e.lngLat;

      setCoordinates([
        `Longitude: ${toFourDecimalPlaces(coords.lng)}`,
        `Latitude: ${toFourDecimalPlaces(coords.lat)}`
      ]);
      canvas.style.cursor = '';
      mapRef.current.off('mousemove', onMove);
      mapRef.current.off('touchmove', onMove);
    }

    mapRef.current.on('load', () => {
      mapRef.current.addSource('point', {
        type: 'geojson',
        data: geojson
      });

      mapRef.current.addLayer({
        id: 'point',
        type: 'circle',
        source: 'point',
        paint: {
          'circle-radius': 10,
          'circle-color': '#F84C4C'
        }
      });

      mapRef.current.on('mouseenter', 'point', () => {
        mapRef.current.setPaintProperty('point', 'circle-color', '#3bb2d0');
        canvas.style.cursor = 'move';
      });

      mapRef.current.on('mouseleave', 'point', () => {
        mapRef.current.setPaintProperty('point', 'circle-color', '#3887be');
        canvas.style.cursor = '';
      });

      mapRef.current.on('mousedown', 'point', (e) => {
        e.preventDefault();
        canvas.style.cursor = 'grab';
        mapRef.current.on('mousemove', onMove);
        mapRef.current.once('mouseup', onUp);
      });

      mapRef.current.on('touchstart', 'point', (e) => {
        if (e.points.length !== 1) return;
        e.preventDefault();
        mapRef.current.on('touchmove', onMove);
        mapRef.current.once('touchend', onUp);
      });
    });
  }, []);

  return (
    <>
      

      

        {coordinates &&
          coordinates.map((coord) => 
{coord}
)}
      

    
  );
};

export default MapboxExample;
```