Marker¶
Marker is a way to display specific points on the map, usually to mark important locations such as destinations, starting points, or special events. Markers can be customized and easily added to the map with images or icons.
Create a default marker¶
This example demonstrates how to create a default marker on the map.
Example¶
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add a default marker</title>
<meta property="og:description" content="Add a default marker to the map." />
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://unpkg.com/@vietmap/vietmap-gl-js@4.2.0/vietmap-gl.css' />
<script src='https://unpkg.com/@vietmap/vietmap-gl-js@4.2.0/vietmap-gl.js'></script>
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = new vietmapgl.Map({
container: 'map',
style:
'https://maps.vietmap.vn/mt/tm/style.json?apikey=YOUR_API_KEY_HERE',
center: [106.67597819243642,10.759145267128252],
zoom: 13
});
const marker = new vietmapgl.Marker()
.setLngLat([106.67597819243642,10.759145267128252])
.addTo(map);
</script>
</body>
</html>
Create a marker with custom PNG icon¶
Example¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Marker PNG</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<link rel='stylesheet' href='https://unpkg.com/@vietmap/vietmap-gl-js@4.2.0/vietmap-gl.css' />
<script src='https://unpkg.com/@vietmap/vietmap-gl-js@4.2.0/vietmap-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 vietmapgl.Map({
container: "map",
style:
"https://maps.vietmap.vn/mt/tm/style.json?apikey=YOUR_API_KEY_HERE",
center: [106.66817068179284, 10.803866192772915],
zoom: 14,
});
map.addControl(new vietmapgl.NavigationControl(), "top-right");
map.on("load", async function () {
const image = await map.loadImage("/docs/assets/navigator.png");
map.addImage("vietmap", image.data);
map.addSource("point", {
type: "geojson",
data: {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [106.66817068179284, 10.803866192772915],
},
},
],
},
});
map.addLayer({
id: "points",
type: "symbol",
source: "point",
layout: {
"icon-image": "vietmap",
"icon-size": 0.75,
"icon-anchor": "bottom",
"icon-offset": [0, -10],
},
});
});
</script>
</body>
</html>
Create a marker with custom SVG icon¶
Example¶
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test VM-GL</title>
<link rel='stylesheet' href='https://unpkg.com/@vietmap/vietmap-gl-js@4.2.0/vietmap-gl.css' />
<script src='https://unpkg.com/@vietmap/vietmap-gl-js@4.2.0/vietmap-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 vietmapgl.Map({
container: "map",
style:
"https://maps.vietmap.vn/mt/tm/style.json?apikey=YOUR_API_KEY_HERE",
center: [106.66817068179284, 10.803866192772915],
zoom: 14,
});
const pin = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 85" fill="#0000ff">
<path stroke-width="4" d="M 5,33.103579 C 5,17.607779 18.457,5 35,5 C 51.543,5 65,17.607779 65,33.103579 C 65,56.388679 40.4668,76.048179 36.6112,79.137779 C 36.3714,79.329879 36.2116,79.457979 36.1427,79.518879 C 35.8203,79.800879 35.4102,79.942779 35,79.942779 C 34.5899,79.942779 34.1797,79.800879 33.8575,79.518879 C 33.7886,79.457979 33.6289,79.330079 33.3893,79.138079 C 29.5346,76.049279 5,56.389379 5,33.103579 Z M 35.0001,49.386379 C 43.1917,49.386379 49.8323,42.646079 49.8323,34.331379 C 49.8323,26.016779 43.1917,19.276479 35.0001,19.276479 C 26.8085,19.276479 20.1679,26.016779 20.1679,34.331379 C 20.1679,42.646079 26.8085,49.386379 35.0001,49.386379 Z"></path>
</svg>`;
function svgStringToImageSrc(svgString) {
return (
"data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgString)
);
}
map.on("load", function () {
const svgImage = new Image(35, 42);
svgImage.onload = () => {
map.addImage("svg", svgImage);
const coordinates = [106.66817068179284, 10.803866192772915];
map.addSource("single-point", {
type: "geojson",
data: {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Point",
coordinates: coordinates,
},
properties: {},
},
],
},
});
map.addLayer({
id: "point-layer",
type: "symbol",
source: "single-point",
layout: {
"icon-image": "svg",
"icon-size": 1.0,
"icon-allow-overlap": true,
"icon-anchor": "bottom",
"icon-offset": [0, -10],
},
});
};
svgImage.src = svgStringToImageSrc(pin);
});
</script>
</body>
</html>
