I trying to add markers to the mapbox-gl-js. Every marker needs to have its own icon.
The code:
// General params
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [28.834527783897784, 45.340983787852906],
zoom: 16,
pitch: 60,
bearing: 7,
antialias: true
});
// Language
mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js');
map.addControl(new MapboxLanguage({
defaultLanguage: 'ru'
}));
// On load
map.on('load', () => {
// Insert the layer beneath any symbol layer.
const layers = map.getStyle().layers;
const labelLayerId = layers.find(
(layer) => layer.type === 'symbol' && layer.layout['text-field']
).id;
// Places JSON
const geojson = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'properties': {
'iconSize': [40, 40],
'icon': 'house',
'url': '1',
'description':
`
<div class="text ff--open-sans">
<h5 class="mb-1 fw--700">Продажа квартиры</h5>
<img src="/design/map_1/images/flat.jpg" class="img--responsive border-radius">
<p class="mb-2 mt-1">
Продается с мебелью и техникой,заходи и живи.
</p>
<span class="fs--14 color--dark">Характеристики</span>
<div class="d-flex color--gray gutter-y-5 fs--13 flex-column">
<div class="d-flex mb-0">
<span>Агенство</span>
<span class="mx-2">—</span>
<span class="color--dark">Капитал</span>
</div>
<div class="d-flex mb-0">
<span>Комнаты</span>
<span class="mx-2">—</span>
<span class="color--dark"> 2 </span>
</div>
<div class="d-flex mb-0">
<span>Этаж</span>
<span class="mx-2">—</span>
<span class="color--dark"> 3 </span>
</div>
<div class="d-flex mb-0">
<span>Ремонт</span>
<span class="mx-2">—</span>
<span class="color--dark"> Евро </span>
</div>
</div>
</div>
`
},
'geometry': {
'type': 'Point',
'coordinates': [28.83342580788326, 45.3389572391001]
},
},
{
'type': 'Feature',
'properties': {
'icon': 'flat',
'description':
`
<div class="text ff--open-sans">
<h5 class="mb-1 fw--700">Продажа квартиры</h5>
<img src="/design/map_1/images/flat.jpg" class="img--responsive border-radius">
<p class="mb-2 mt-1">
Продается с мебелью и техникой,заходи и живи.
</p>
<span class="fs--14 color--dark">Характеристики</span>
<div class="d-flex color--gray gutter-y-5 fs--13 flex-column">
<div class="d-flex mb-0">
<span>Агенство</span>
<span class="mx-2">—</span>
<span class="color--dark">Капитал</span>
</div>
<div class="d-flex mb-0">
<span>Комнаты</span>
<span class="mx-2">—</span>
<span class="color--dark"> 2 </span>
</div>
<div class="d-flex mb-0">
<span>Этаж</span>
<span class="mx-2">—</span>
<span class="color--dark"> 3 </span>
</div>
<div class="d-flex mb-0">
<span>Ремонт</span>
<span class="mx-2">—</span>
<span class="color--dark"> Евро </span>
</div>
</div>
</div>
`
},
'geometry': {
'type': 'Point',
'coordinates': [28.820403408543825, 45.35615240244837]
}
},
]
};
// Add places on map
map.addSource('places', {
'type': 'geojson',
'data': geojson
});
// Add 3D 'building' layer
map.addLayer(
{
'id': 'add-3d-buildings',
'source': 'composite',
'source-layer': 'building',
'filter': ['==', 'extrude', 'true'],
'type': 'fill-extrusion',
'minzoom': 15,
'paint': {
'fill-extrusion-color': '#aaa',
// Use an 'interpolate' expression to
// add a smooth transition effect to
// the buildings as the user zooms in.
'fill-extrusion-height': [
'interpolate',
['linear'],
['zoom'],
15,
0,
15.05,
['get', 'height']
],
'fill-extrusion-base': [
'interpolate',
['linear'],
['zoom'],
15,
0,
15.05,
['get', 'min_height']
],
'fill-extrusion-opacity': 0.6
}
},
labelLayerId
);
// Set building number labels color
map.setPaintProperty('building-number-label', 'text-color', 'black');
// Set building number labels size
map.setLayoutProperty('building-number-label', 'text-size', 16);
// Custom html for places on the map.
for (const marker of geojson.features) {
// Create a DOM element for each marker.
const el = document.createElement('div');
const ico = marker.properties.icon;
// console.log(marker.geometry.coordinates)
// var circle = mapboxgl.circleMarker(marker.geometry.coordinates, {radius: 100}).addTo(map);
el.className = `map-marker marker-icon-${ico}`;
el.style.width = `30px`;
el.style.height = `30px`;
// Add markers to the map.
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(map);
// Custom html marker
$(el).each(function(){
$(this).html('<div class="js-show-property marker-content" data-url="'+marker.properties.url+'"><div class="pin bounce"><div class="icon"></div></div><div class="pulse"></div></div>');
});
// Add active marker
el.addEventListener('click', () =>{
$(el).toggleClass("active");
});
}
});
But it`s all on CSS. And when I zoom map the circle of the marker doesn't have a true size. I try to make it on Mapbox js options.
The problem is to add to each marker radius circle by click with pulsing animation and icon inside the marker.
Help, please!
