React: Leaflet Icon

(Last Updated On: )

In this tutorial I will demonstrate how to add an icon to the map. Refer to the documentation for more information.

Before We Begin:

• Refer to how to Build a React/Python Site to get your basic site up and running.
• Refer to Basic Leaflet Map to get your basic leaflet control up and running.

Create Folders/Files:

• app
  • folder: leaflet
    • folder: images
      • file: yourimage.png

Import Image(s):

import yourimage from "../images/yourimage.png";

Create Icon:

var myIcon = L.icon({
     iconUrl: plusimg,
     iconSize:     [75, 75], // size of the icon
     iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
});

Add to Map:

[51.5, -0.09] refers to the position on the map you want to add it to. Refer to the marker tutorial for further information on markers.

L.marker([51.5, -0.09], {icon: myIcon}).addTo(this.map);

Series Navigation

<< React: Leaflet ControlReact: Leaflet Markers >>