MapMetrics Atlas API Docs

Appearance

Adding Markers to Your Map ​

The red marker is dragable ​

This guide demonstrates how to add markers to your MapMetrics map. Follow these steps to get started.

Prerequisites ​

Before you begin, ensure you have:

Adding a Marker ​

To add a marker to your map, you can use the Marker class provided by MapMetrics-gl. Here's how to do it:

Example: Adding a Marker ​

javascript
const marker = new mapmetricsgl.Marker()
  .setLngLat([2.349902, 48.852966]) // Set the marker's position
  .addTo(map); // Add the marker to the map

Customizing Markers ​

You can customize the appearance of markers by setting properties such as color, size, and icon. For example:

javascript
const marker = new mapmetricsgl.Marker({
  color: "#FF0000", // Red color
  scale: 1.5, // Increase the size
})
  .setLngLat([2.349902, 48.852966])
  .addTo(map);

Creating a Draggable Marker with Custom Color ​

You can create a marker with a custom color and make it draggable by specifying the color and draggable options in the marker constructor:

javascript
const marker = new mapmetricsgl.Marker({
  color: "#FFFFFF",    // White marker
  draggable: true      // Make the marker draggable
})
  .setLngLat([30.5, 50.5])
  .addTo(map);

You can also listen for drag events to get the marker's new position:

javascript
marker.on('dragend', function() {
  const lngLat = marker.getLngLat();
  console.log('Marker dropped at', lngLat);
});

Complete Example ​

Here's a complete example of how to add a marker to your map:

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.mapmetrics-atlas.net/versions/latest/mapmetrics-gl.css"
      rel="stylesheet"
    />
    <script src="https://cdn.mapmetrics-atlas.net/versions/latest/mapmetrics-gl.js"></script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
      }
      #map {
        min-height: 500px;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      // Don't forget to replace <YOUR_ACCESS_TOKEN> with your own access style/accesstoken
      const accessToken = "<YOUR_ACCESS_TOKEN>";
      const map = new mapmetricsgl.Map({
        container: "map",
        style: `${accessToken}`,
        zoom: 11,
        center: [2.349902, 48.852966],
      }).addControl(new mapmetricsgl.NavigationControl(), "top-right");

      // Add a marker with the default icon
      new mapmetricsgl.Marker().setLngLat([2.349902, 48.852966]).addTo(map);
    </script>
  </body>
</html>
jsx
import React, { useEffect, useRef } from 'react';
import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';

const AddMarker = () => {
  const mapContainerRef = useRef(null);
  const mapRef = useRef(null);

  useEffect(() => {
    if (!mapContainerRef.current || mapRef.current) return;

    const accessToken = "<YOUR_ACCESS_TOKEN>";

    const map = new mapmetricsgl.Map({
      container: mapContainerRef.current,
      style: `${accessToken}`,
      zoom: 11,
      center: [2.349902, 48.852966],
    });

    mapRef.current = map;

    map.addControl(new mapmetricsgl.NavigationControl(), 'top-right');

    // Add a marker with custom icon
    new mapmetricsgl.Marker({
      icon: "https://cdn.mapmetrics-atlas.net/Images/car.png"
    })
      .setLngLat([2.349902, 48.852966])
      .addTo(map);

    // Add a red draggable marker
    new mapmetricsgl.Marker({
      color: "#FF0000",
      draggable: true
    })
      .setLngLat([2.349902, 48.841066])
      .addTo(map);

    return () => {
      map.remove();
      mapRef.current = null;
    };
  }, []);

  return (
    <div
      id="map"
      ref={mapContainerRef}
      style={{
        minHeight: '500px',
        height: '500px',
        width: '100%'
      }}
    />
  );
};

export default AddMarker;

For more information, visit the MapMetrics GitHub repository.