Building an Interactive OpenLayers Map with a Draggable Point and Updating Coordinates

This article shows how to build an interactive OpenLayers map with a draggable point. The point's coordinates update when it is dragged. Clicking the map also moves the point to the clicked location and updates its coordinates.

First, include the required OpenLayers files in the HTML page:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>интерактивная карта OpenLayers</title>
    <script src="ol.js"></script>
    <link rel="stylesheet" href="ol.css">
    <style>
        #map {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="map" class="map"></div>
    <p id="coordinates"></p>
</body>
</html>

Or load them online:

<script src="https://cdn.jsdelivr.net/npm/ol@v10.2.0/dist/ol.js"></script> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.2.0/ol.css">

Create the point and a vector layer:

const marker = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([37.6173, 55.7558])) // Москва
});

const vectorSource = new ol.source.Vector({
    features: [marker]
});

const vectorLayer = new ol.layer.Vector({
    source: vectorSource
});

Create the map and add the vector layer:

const map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        vectorLayer
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([37.6173, 55.7558]),
        zoom: 10
    })
});

Add a function to update the point's coordinates:

const updateCoordinates = () => {
    const coordinates = ol.proj.toLonLat(marker.getGeometry().getCoordinates());
    document.getElementById('coordinates').innerText = `Координаты: ${coordinates[0].toFixed(5)}, ${coordinates[1].toFixed(5)}`;
};

Style the point to look like a standard Google Maps marker:

const iconStyle = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 1],
        anchorXUnits: 'fraction',
        anchorYUnits: 'fraction',
        src: 'https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi.png'
    })
});

marker.setStyle(iconStyle);

Add an interaction to drag the point:

const dragInteraction = new ol.interaction.Translate({
    features: vectorSource.getFeaturesCollection()
});
dragInteraction.on('translateend', updateCoordinates);
map.addInteraction(dragInteraction);

Finally, add the ability to move the point by clicking the map:

map.on('singleclick', function(event) {
    const clickedCoordinates = event.coordinate;
    marker.getGeometry().setCoordinates(clickedCoordinates);
    updateCoordinates();
});

We now have an interactive map with a draggable point and updating coordinates. When you drag the point, its coordinates update when the left mouse button is released. Clicking the map moves the point to that location and updates the coordinates accordingly.

Here is the complete HTML page with the script:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>интерактивная карта OpenLayers</title>
    <script src="ol.js"></script>
    <link rel="stylesheet" href="ol.css">
    <style>
        #map {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="map" class="map"></div>
    <p id="coordinates"></p>

	<script>
        const marker = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([37.6173, 55.7558])) // Москва
        });

        const vectorSource = new ol.source.Vector({
            features: [marker]
        });

        const vectorLayer = new ol.layer.Vector({
            source: vectorSource
        });

        const map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                vectorLayer
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([37.6173, 55.7558]),
                zoom: 10
            })
        });

        const updateCoordinates = () => {
            const coordinates = ol.proj.toLonLat(marker.getGeometry().getCoordinates());
            document.getElementById('coordinates').innerText = `Координаты: ${coordinates[0].toFixed(5)}, ${coordinates[1].toFixed(5)}`;
        };

        const iconStyle = new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [0.5, 1],
                anchorXUnits: 'fraction',
                anchorYUnits: 'fraction',
                src: 'https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi.png'
            })
        });

        marker.setStyle(iconStyle);

        const dragInteraction = new ol.interaction.Translate({
            features: vectorSource.getFeaturesCollection()
        });
        dragInteraction.on('translateend', updateCoordinates);
        map.addInteraction(dragInteraction);

        map.on('singleclick', function (event) {
            const clickedCoordinates = event.coordinate;
            marker.getGeometry().setCoordinates(clickedCoordinates);
            updateCoordinates();
        });

        updateCoordinates();
    </script>
    
</body>
</html>