Extra
Exploration:¶
If you’d rather use icons then a circular color, then try to see if you can implement this code, be sure to have a custom icon ready!
Customizing Icons¶
function createCustomIcon (feature, latlng) {
// Create a DOM element for the marker
const el = document.createElement('div');
el.style.backgroundImage = 'url(my-icon.png)';
el.style.width = '25px'; // iconSize width
el.style.height = '25px'; // iconSize height
el.style.backgroundSize = '100%';
el.style.display = 'block';
el.style.borderRadius = '50%'; // Optional: makes the icon circular
el.style.boxShadow = '0px 0px 20px rgba(0, 0, 0, 0.5)'; // Optional: adds shadow effect
return new maplibregl.Marker(el)
.setLngLat([latlng.lng, latlng.lat]); // Ensure the order is longitude, latitude
}
The following code will add a geojson called ca_counties.geojson
with a field TOTAL_POP
onto your map:
// Step 1: Load GeoJSON Data
map.on('load', function() {
// Step 2: Add a GeoJSON Source
map.addSource('ca_counties', {
type: 'geojson',
data: 'js/lab1.geojson' // Path to your GeoJSON file
});
// Step 3: Add a Layer for the GeoJSON Data
map.addLayer({
id: 'counties',
type: 'fill',
source: 'ca_counties',
layout: {},
paint: {
'fill-color': [
'step',
['get', 'TOTAL_POP'],
'#FFEDA0', 10000,
'#FED976', 200000,
'#FEB24C', 500000,
'#BD0026', 1000000,
'#800026'
],
'fill-opacity': 0.7
}
});
// Optional: Add a popup on click
map.on('click', 'counties', function(e) {
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(e.features[0].properties.name)
.addTo(map);
});
// Change the cursor to a pointer when over the layer.
map.on('mouseenter', 'counties', function() {
map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a default cursor when it leaves.
map.on('mouseleave', 'counties', function() {
map.getCanvas().style.cursor = '';
});
});