Maps SDK for Web - Custom markers
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=Edge'/>
<meta charset='UTF-8'>
<title>Maps SDK for Web - Custom markers</title>
<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'/>
<link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.16.0/maps/maps.css'>
<style>
#map {
width: 100%;
height: 100%;
}
.marker-icon {
background-position: center;
background-size: 22px 22px;
border-radius: 50%;
height: 22px;
left: 4px;
position: absolute;
text-align: center;
top: 3px;
transform: rotate(45deg);
width: 22px;
}
.marker {
height: 30px;
width: 30px;
}
.marker-content {
background: #c30b82;
border-radius: 50% 50% 50% 0;
height: 30px;
left: 50%;
margin: -15px 0 0 -15px;
position: absolute;
top: 50%;
transform: rotate(-45deg);
width: 30px;
}
.marker-content::before {
background: #ffffff;
border-radius: 50%;
content: "";
height: 24px;
margin: 3px 0 0 3px;
position: absolute;
width: 24px;
}
.box {
width: 100%;
height: 1000px;
}
.map-pin {
position: absolute;
top: 0;
height: 100%;
width: 50vw;
}
.red {
background-color: red;
}
.pink {
background-color: pink;
}
.purple {
background-color: purple;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
<div class="box red"></div>
<div id='map' class='map'></div>
<div class="box pink"></div>
<div class="box purple"></div>
<script src='https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.16.0/maps/maps-web.min.js'></script>
<script>
// Define your product name and version.
// tt.setProductInfo('<your-product-name>', '<your-product-version>');
var map = tt.map({
key: '6ke6EsXc6ThDoi1hleAqWiZGfTveXm2p',
container: 'map',
center: [-99.98580752275456, 33.43211082128627],
zoom: 3,
style: {
'version': 8,
'sources': {
'raster-tiles': {
'type': 'raster',
'tiles': ['https://a.api.tomtom.com/map/1/tile/sat/main/{z}/{x}/{y}.jpg?key=7CfcFBqJj4A5msOpa8Z86hHAUanFkaKA'],
'tileSize': 256
}
},
'layers': [
{
'id': 'raster-tiles-layer',
'type': 'raster',
'source': 'raster-tiles'
}
]
}
});
map.scrollZoom.disable();
// map.addControl(new tt.FullscreenControl());
// map.addControl(new tt.NavigationControl());
function createMarker(icon, position, color, popupText) {
var markerElement = document.createElement('div');
markerElement.className = 'marker';
var markerContentElement = document.createElement('div');
markerContentElement.className = 'marker-content';
markerContentElement.style.backgroundColor = color;
markerElement.appendChild(markerContentElement);
var iconElement = document.createElement('div');
iconElement.className = 'marker-icon';
iconElement.style.backgroundImage = 'url(https://api.tomtom.com/maps-sdk-for-web/cdn/static/' + icon + ')';
markerContentElement.appendChild(iconElement);
var popup = new tt.Popup({offset: 30}).setText(popupText);
// add marker to map
return new tt.Marker({element: markerElement, anchor: 'bottom'})
.setLngLat(position)
.setPopup(popup)
.addTo(map);
}
const markers = [
createMarker('accident.colors-white.svg', [-120.72217631449985, 42.73919549715691], '#5327c3', 'SVG icon'),
createMarker('accident.colors-white.png', [-99.98580752275456, 33.43211082128627], '#c30b82', 'PNG icon'),
createMarker('accident.colors-white.jpg', [-78.17043537427266, 36.31817544230164], '#c31a26', 'JPG icon')
]
const latLongs = [
[-120.72217631449985, 42.73919549715691],
[-99.98580752275456, 33.43211082128627],
[-78.17043537427266, 36.31817544230164]];
gsap.registerPlugin(ScrollTrigger);
const timeline = gsap.timeline({
// yes, we can add it to an entire timeline!
scrollTrigger: {
trigger: "#map",
pin: true,
markers: true,
end: "3000px", // end after scrolling 500px beyond the start
onUpdate: e => {
console.log(e);
if (e.progress <= 0.3) {
map.flyTo({center: latLongs[0], zoom: 9});
} else if (e.progress > 0.3 && e.progress <= 0.6) {
map.flyTo({center: latLongs[1], zoom: 9});
} else if (e.progress > 0.6) {
map.flyTo({center: latLongs[2], zoom: 9});
}
markers.forEach((m, i) => {
m.setLngLat([latLongs[i][0] * e.progress, latLongs[i][1] * e.progress]);
});
}
}});
</script>
</body>