leafletjs marker color

To change the color of a marker in LeafletJS, you can use the icon property. The icon property can be set to a Leaflet icon object, which can be created using the L.icon() function.

To create a Leaflet icon object, you can pass the following parameters to the L.icon() function:

  • iconUrl: The URL of the image to use as the marker icon.
  • iconAnchor: An array containing the x and y coordinates of the anchor point of the marker icon. The anchor point is the point on the marker icon that is aligned with the marker position.
  • iconSize: An array containing the width and height of the marker icon.

For example, the following code creates a red marker icon:

1
2
3
4
5
var redMarkerIcon = L.icon({
iconUrl: 'https://example.com/marker-red.png',
iconAnchor: [12, 41],
iconSize: [25, 41]
});

Once you have created a Leaflet icon object, you can set it as the marker icon using the icon property. For example, the following code creates a red marker:

1
2
3
var marker = L.marker([51.505, -0.09], {
icon: redMarkerIcon
});

You can also change the color of a marker by setting the fillColor and color properties. The fillColor property sets the fill color of the marker, and the color property sets the color of the marker outline.

For example, the following code creates a blue marker with a white outline:

1
2
3
4
var marker = L.marker([51.505, -0.09], {
fillColor: '#0000FF',
color: '#FFFFFF'
});

You can learn more about changing the color of markers in LeafletJS from the LeafletJS documentation.