Infowindow on hover¶
Infowindow on hover is a component that displays information about a specific location on a map when the mouse hovers over a marker.
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>VIETMAP SDK</title>
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<script src='https://unpkg.com/@vietmap/vietmap-gl-js@4.2.0/vietmap-gl.js'></script>
<link rel='stylesheet' href='https://unpkg.com/@vietmap/vietmap-gl-js@4.2.0/vietmap-gl.css' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.vietmapgl-popup {
max-width: 400px;
font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
}
</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.70102529179026, 10.776468457818373],
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", async function () {
const svgImage = new Image(35, 42);
svgImage.onload = () => {
map.addImage("svg", svgImage);
map.addSource("places", {
type: "geojson",
data: {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [106.69528536460997, 10.776974359319002],
},
properties: {
description:
"<strong>Dinh Độc Lập </strong><p>Di tích lịch sử về chiến tranh Việt Nam cho phép tham quan văn phòng chính phủ, phòng chỉ huy và hiện vật.Di tích lịch sử về chiến tranh Việt Nam cho phép tham quan văn phòng chính phủ, phòng chỉ huy và hiện vật.</p>",
},
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [106.69899754181442, 10.779809499910119],
},
properties: {
description:
"<strong>Nhà thờ Đức Bà Sài Gòn</strong><p>Nhà thờ Công giáo được xây dựng bằng gạch Pháp vào những năm 1880 và có các tháp chuông Rô-măng cao 58m.</p>",
},
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [106.70102529179026, 10.776468457818373],
},
properties: {
description:
"<strong>Ủy ban Nhân dân Thành phố Hồ Chí Minh</strong><p>Tòa thị chính kiểu Pháp xây vào đầu những năm 1900 hiện là trụ sở của Ủy ban Nhân dân.</p>",
},
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [106.70307295270392, 10.776511071073857],
},
properties: {
description:
"<strong>Nhà hát Thành phố Hồ Chí Minh</strong><p>Nhà hát opera tinh xảo từ thời Pháp thuộc vào thế kỷ 19, nay là nơi biểu diễn ba lê và nhạc giao hưởng của thành phố.</p>",
},
},
],
},
});
map.addLayer({
id: "places",
type: "symbol",
source: "places",
layout: {
"icon-image": "svg",
"icon-overlap": "always",
},
});
const popup = new vietmapgl.Popup({
closeButton: false,
closeOnClick: false,
});
map.on("mouseenter", "places", function (e) {
map.getCanvas().style.cursor = "pointer";
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].properties.description;
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
popup.setLngLat(coordinates).setHTML(description).addTo(map);
});
map.on("mouseleave", "places", function () {
map.getCanvas().style.cursor = "";
popup.remove();
});
};
svgImage.src = svgStringToImageSrc(pin);
});
</script>
</body>
</html>
