{data.city}
My Marker
`;
const marker = new mapboxgl.Marker({
element: el
})
.setLngLat([-74.0060, 40.7128])
.addTo(map);
```
### Styling markers with CSS
Since markers are HTML elements, you can style them using CSS loaded from an external stylesheet. For example, you might add a class to your marker element and define styles for that class in a CSS file:
```javascript
const el = document.createElement('div');
el.className = 'custom-marker';
const marker = new mapboxgl.Marker({
element: el
})
.setLngLat([-74.0060, 40.7128])
.addTo(map);
```
```css
.custom-marker {
position: relative;
width: 32px;
height: 32px;
cursor: pointer;
}
```
You can also use CSS to add animations, transitions, and other effects to your markers.
> **Related content (example): [Animate a custom marker on appearance](https://docs.mapbox.com/mapbox-gl-js/example/animate-marker-on-appearance/)**
>
> See an interactive example showing how to animate a custom marker with CSS when it is added to the map.
## Offset and anchor options
When creating a marker, you specify `offset` and `anchor` options to fine-tune the marker's position relative to its geographical coordinates.
By default, the marker uses a `center` anchor, meaning the marker element is centered vertically and horizontally on the specified coordinates. You can change the anchor to `top`, `bottom`, `left`, `right`, or combinations like `top-left` to adjust where the marker points.
For example, a typical "pin" marker often uses a `bottom` anchor so that the tip of the pin points to the exact location on the map.
For a full list of options, see the [`Marker` reference documentation](https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker).
## Adding multiple markers
Use a loop to add multiple markers from a data array:
```javascript
const locations = [
{
coordinates: [-74.0060, 40.7128],
name: 'New York City'
},
{
coordinates: [-118.2437, 34.0522],
name: 'Los Angeles'
},
// ... more locations
];
locations.forEach(location => {
// create a marker for each location
new mapboxgl.Marker()
.setLngLat(location.coordinates)
.addTo(map);
});
```
## Marker Interactivity
The most common interactions with markers include adding popups, making them draggable, and handling click events.
### Adding popups
Mapbox GL JS provides a [`Popup`](https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup) class that can display HTML content in a dismissable callout-style UI. These are often used in conjunction with markers to show additional information about a point location when the marker is clicked.
To attach a popup to a marker, create a `Popup` instance and set its HTML content using `setHTML()`. Then, associate the popup with the marker using `setPopup()`.
```javascript
const marker = new mapboxgl.Marker()
.setLngLat([-74.0060, 40.7128])
.addTo(map);
const popup = new mapboxgl.Popup()
.setHTML('The most populous city in the United States.
'); marker.setPopup(popup); ``` > **Related content (example): [Attach a popup to a marker instance](https://docs.mapbox.com/mapbox-gl-js/example/set-popup/)** > > See an interactive example showing how to attach a popup to a marker. Popups are not limited to use with markers; they can be used independently and added or removed programmatically. See the [`Popup` reference documentation](https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup) for more details. ### Drag and drop Enable marker dragging by setting the `draggable` option to `true` when creating the marker. You can listen for drag events to get the updated position of the marker. ```javascript const marker = new mapboxgl.Marker({ draggable: true }) .setLngLat([-74.0060, 40.7128]) .addTo(map); // listen for drag events marker.on('drag', () => { const lngLat = marker.getLngLat(); console.log(`Marker position: ${lngLat.lng}, ${lngLat.lat}`); }); marker.on('dragend', () => { const lngLat = marker.getLngLat(); console.log(`Marker dropped at: ${lngLat.lng}, ${lngLat.lat}`); }); ``` > **Related content (example): [Drag a marker](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-marker/)** > > See an interactive example showing how to drag a marker and access its new coordinates. ### Click events Since markers are DOM elements, you can add normal DOM event listeners to them for interactivity using `addEventListener`. ```javascript // create a custom marker element const el = document.createElement('div'); el.className = 'custom-marker'; el.style.backgroundImage = 'url(path/to/marker.png)'; el.style.width = '32px'; el.style.height = '32px'; el.style.cursor = 'pointer'; // add click event el.addEventListener('click', () => { console.log('Marker clicked!'); // respond to the click event here }); const marker = new mapboxgl.Marker(el) .setLngLat([-74.0060, 40.7128]) .addTo(map); ``` ## Removing markers Call `Marker.remove()` to remove a marker from the map. ```javascript // create a Marker instance and add it to the map const marker = new mapboxgl.Marker() .setLngLat([-74.0060, 40.7128]) .addTo(map); ... // remove the marker from the map marker.remove(); ``` If you are managing multiple markers, keep track of each instance by storing them in an array so you can remove them as needed. ```javascript // use an array of objects to hold data for each marker const markerData = [ { city: 'New York City', coordinates: [-74.0060, 40.7128] }, { city: 'Los Angeles', coordinates: [-118.2437, 34.0522] }, // ... more marker data ] // map the array of objects to an array of Marker instances const markers = markerData.map(data => { const marker = new mapboxgl.Marker() .setLngLat(data.coordinates) .addTo(map); return marker; }); // iterate over the array to remove all markers markers.forEach(marker => marker.remove()); ``` ## Performance considerations Markers create DOM elements, so performance may degrade with large numbers of markers. For scenarios with 100+ markers, consider: - Using [Style Layers](https://docs.mapbox.com/mapbox-gl-js/guides/add-your-data/style-layers/) for better performance with large datasets - Implementing custom clustering solutions - Loading markers progressively based on map bounds ## Using Markers in a React app A common pattern when using Mapbox GL JS in a React application is to create a custom `Marker` component that encapsulates the marker logic within the React component lifecycle. ```jsx import React, { useEffect, useRef } from 'react'; import { createPortal } from 'react-dom'; import mapboxgl from 'mapbox-gl'; const Marker = ({ map, coordinates, data }) => { const markerRef = useRef(); const markerElementRef = useRef(document.createElement('div')); // initialize the marker when the component mounts useEffect(() => { markerRef.current = new mapboxgl.Marker({ element: markerElementRef.current }) .setLngLat(coordinates) .addTo(map); // remove the marker when the component unmounts return () => { if (markerRef.current) { markerRef.current.remove(); } }; }, []); // use createPortal to render JSX content into the marker element return ( <> {createPortal(
{data.city}