CODEWITHSUNDEEP
javascriptmapbox
justin
justin

Reputation: 17

Edit marker size and popup box size

I managed to get the marker and the popup box to appear in the Mapbox API
However, I don't seem to be able to edit their size and popup size.

for (let i = 0; i < locations.length; i++) {
  let location = locations[i];

  let marker = new mapboxgl.Marker({ color: '#FF8C00' });

  marker.setLngLat(location.coordinates);

  let popup = new mapboxgl.Popup({ offset: 40 });
  popup.setHTML(location.description);

  marker.setPopup(popup);

  // Display the marker.
  marker.addTo(map);

  // Display the popup.
  popup.addTo(map);
}

Upvotes: 1

Views: 475

Answers (1)

Moritz
Moritz

Reputation: 1790

Mapbox ususally recommends to use the Annotation Plugin to create markers and interact with these.

However, if you would like to stick to the example you have presented, you could follow this Mapbox example in which custom icons are used for the marker symbol. The size of these icons can be adjusted with the iconSize property:

<script>
	mapboxgl.accessToken = 'access_token';
var geojson = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'properties': {
'message': 'Foo',
'iconSize': [60, 60]
},
'geometry': {
'type': 'Point',
'coordinates': [-66.324462890625, -16.024695711685304]
}
},
{
'type': 'Feature',
'properties': {
'message': 'Bar',
'iconSize': [50, 50]
},
'geometry': {
'type': 'Point',
'coordinates': [-61.2158203125, -15.97189158092897]
}
},
{
'type': 'Feature',
'properties': {
'message': 'Baz',
'iconSize': [40, 40]
},
'geometry': {
'type': 'Point',
'coordinates': [-63.29223632812499, -18.28151823530889]
}
}
]
};
 
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-65.017, -16.457],
zoom: 5
});
 
// add markers to map
geojson.features.forEach(function(marker) {
// create a DOM element for the marker
var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage =
'url(https://placekitten.com/g/' +
marker.properties.iconSize.join('/') +
'/)';
el.style.width = marker.properties.iconSize[0] + 'px';
el.style.height = marker.properties.iconSize[1] + 'px';
 
el.addEventListener('click', function() {
window.alert(marker.properties.message);
});
 
// add marker to map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(map);
});
</script>

Upvotes: 1

Related Questions