News

  • News
  • Create a Self-Hosted Map Editor with Draggable Markers Using Docker and MapLibre
Share
Create a Self-Hosted Map Editor with Draggable Markers Using Docker and MapLibre

Create a Self-Hosted Map Editor with Draggable Markers Using Docker and MapLibre

April 09, 2025
MapLibre Docker Map Editor Draggable Markers JavaScript Web Development
This article provides a step-by-step guide to creating a self-hosted map editor with draggable markers using Docker and the MapLibre GL JS library, enabling full control over map data and customization.

Create a Self-Hosted Map Editor with Draggable Markers Using Docker and MapLibre

Create a draggable Marker - MapLibre GL JS

To create a self-hosted map editor with draggable markers using Docker, you can leverage the MapLibre ecosystem, which includes both Android and JavaScript SDKs. Here’s a step-by-step guide: 1. **Set Up MapLibre GL JS**: MapLibre GL JS is a JavaScript library for rendering interactive maps. You can use it to create a web-based map editor. Dockerize your application by creating a `Dockerfile` that installs Node.js, copies your project files, and runs a web server. ```Dockerfile FROM node:14 WORKDIR /app COPY package*.json ./ RUN npm install COPY . . EXPOSE 3000 CMD ["npm", "start"] ``` 2. **Implement Draggable Markers**: Use MapLibre GL JS to add draggable markers to your map. The `addLayer` and `addSource` methods can be used to add markers, and you can handle drag events using the `on('dragstart')`, `on('drag')`, and `on('dragend')` events. ```javascript map.on('load', function() { map.addSource('markers', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } }); map.addLayer({ id: 'markers', type: 'circle', source: 'markers', paint: { 'circle-radius': 10, 'circle-color': '#FF0000' } }); map.on('click', function(e) { var features = map.queryRenderedFeatures(e.point, { layers: ['markers'] }); if (features.length === 0) { var newMarker = { type: 'Feature', geometry: { type: 'Point', coordinates: [e.lngLat.lng, e.lngLat.lat] } }; map.getSource('markers').addData(newMarker); } }); map.on('mouseenter', 'markers', function() { map.getCanvas().style.cursor = 'pointer'; }); map.on('mouseleave', 'markers', function() { map.getCanvas().style.cursor = ''; }); }); ``` 3. **Docker Compose**: If your setup involves multiple services (e.g., a backend API), use Docker Compose to manage them. Create a `docker-compose.yml` file: ```yaml version: '3' services: web: build: . ports: - "3000:3000" api: image: your-api-image ports: - "5000:5000" ``` 4. **Deploy**: Build and run your Docker containers using the following commands: ```bash docker-compose build docker-compose up ``` By following these steps, you can create a self-hosted map editor with draggable markers using Docker and MapLibre GL JS. This setup allows you to have full control over your map data and customization.

Sources

Show HN: Self-Hosted Maps Stack | Hacker News Over the past week I built a project to let people self-host an entire maps stack so they don't have to send data to the big G. Right now it ...
Create a draggable marker | JavaScript maps SDK | MapLibre GL JS Create a draggable marker. Drag the Marker to a new location on a map and populate its coordinates in a display.
Draggable Marker - MapLibre Android Examples A handler for when a user long taps on a marker. This then starts dragging that marker. It does this by temporarily suspending all other gestures.
2025© BestAI