Add markers to a web map with a symbol layer
This example visualizes point features on a map using a symbol layer.
Upon loading, the map uses loadImage to load an image into the map's style, addSource to add a GeoJSON collection of points as a data source, and then addLayer to draw the image and label on the map at each point location.
Supported File Types
Only .png, .jpg and .webp formats are supported when loading images into a style at runtime using map.loadImage(). Other file types like .svg are not supported.
Managing symbol layers with Mapbox Studio
Managing symbol layers in runtime code can become complex. Consider building a custom style in Mapbox Studio instead — you can upload your data and marker images directly, style them visually, and then load the finished style in GL JS with a single style URL. Mapbox Studio also supports uploading SVG (vector) images, which are not supported by loadImage at runtime.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add markers to a web map with a symbol layer</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.28.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.28.1/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = 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: 'map',
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/standard',
bounds: [
[-128.99107, 22.62724],
[-63.35107, 50.26125]
]
});
map.on('load', () => {
// Add an image to use as a custom marker
map.loadImage(
'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png',
(error, image) => {
if (error) throw error;
map.addImage('custom-marker', image);
// Add a GeoJSON source with 2 points
map.addSource('points', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
// feature for Mapbox DC
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [
-77.03238901390978, 38.913188059745586
]
},
'properties': {
'title': 'Mapbox DC'
}
},
{
// feature for Mapbox SF
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [-122.414, 37.776]
},
'properties': {
'title': 'Mapbox SF'
}
}
]
}
});
// Add a symbol layer
map.addLayer({
'id': 'points',
'type': 'symbol',
'source': 'points',
'layout': {
'icon-image': 'custom-marker',
// get the title name from the source's "title" property
'text-field': ['get', 'title'],
'text-font': [
'Open Sans Semibold',
'Arial Unicode MS Bold'
],
'text-offset': [0, 1.25],
'text-anchor': 'top'
}
});
}
);
});
</script>
</body>
</html>
このコードスニペットは、
YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。import React, { useEffect, useRef } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
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',
bounds: [
[-128.99107, 22.62724],
[-63.35107, 50.26125]
]
});
mapRef.current.on('load', () => {
mapRef.current.loadImage(
'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png',
(error, image) => {
if (error) throw error;
mapRef.current.addImage('custom-marker', image);
mapRef.current.addSource('points', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-77.03238901390978, 38.913188059745586]
},
properties: {
title: 'Mapbox DC'
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-122.414, 37.776]
},
properties: {
title: 'Mapbox SF'
}
}
]
}
});
mapRef.current.addLayer({
id: 'points',
type: 'symbol',
source: 'points',
layout: {
'icon-image': 'custom-marker',
'text-field': ['get', 'title'],
'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
'text-offset': [0, 1.25],
'text-anchor': 'top'
}
});
}
);
});
}, []);
return <div id="map" style={{ height: '100%' }} ref={mapContainerRef}></div>;
};
export default MapboxExample;
このコードスニペットは、
YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。EXAMPLE
Alternative Marker Technique
See Add a default marker to a web map for a less complex approach to visualizing point features using the Marker class.
このexampleは役に立ちましたか？