Customizing react-leaflet marker icons by using font awesome
For some reasons code is not getting formatted. See code on code sandbox
Here is how you can use font-awesome icons as markers.
- Add font-awesome CDN to your
index.html
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
Use
divIcon
along withrenderToStaticMarkup
fromreact-dom/server
to generate icon for marker. And pass thisdivIcon
toMarker
as aicon
prop.import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { renderToStaticMarkup } from 'react-dom/server'; import { divIcon } from 'leaflet'; import { Map, TileLayer, Marker, Popup } from 'react-leaflet'; import './styles.css'; class App extends Component { state = { lat: 51.505, lng: -0.091, zoom: 13, }; render() { const position = [this.state.lat, this.state.lng]; const iconMarkup = renderToStaticMarkup(<i className=" fa fa-map-marker-alt fa-3x" />); const customMarkerIcon = divIcon({ html: iconMarkup, }); return ( <Map center={position} zoom={this.state.zoom}> <TileLayer attribution="&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors" url="https://{s}.tile.osm.org/{z}/{x}/{y}.png" /> <Marker position={position} icon={customMarkerIcon}> <Popup> A pretty CSS3 popup. <br /> Easily customizable. </Popup> </Marker> </Map> ); } } const rootElement = document.getElementById('root'); ReactDOM.render(<App />, rootElement);
Override divIcon default style by adding the following class to your css file
.leaflet-div-icon { background: transparent; border: none; }
- Here is a working example of the same:
https://codesandbox.io/s/4ry180jl34
- Here is a working example of the same:
For those who already use the React components of Fontawesome (FontAwesomeIcon), there is a solution that does not require importing via CDN again. It uses the same principles of Murli's answers, but instead of adding <i className=" fa fa-map-marker-alt fa-3x" />
, you can convert the FontAwesomeIcon component to html and pass that into the html attribute of the divIcon. It would look like this (adapted the example of the accepted answer):
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import Leaflet from 'leaflet'
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import './styles.css';
// FontAwesome requirements
import { faUserAstronaut } from '@fortawesome/free-solid-svg-icons'
library.add(faUserAstronaut)
class App extends Component {
state = {
lat: 51.505,
lng: -0.091,
zoom: 13,
};
render() {
const position = [this.state.lat, this.state.lng];
const iconHTML = ReactDOMServer.renderToString(<FontAwesomeIcon icon='user-astronaut' />)
const customMarkerIcon = new Leaflet.DivIcon({
html: iconHTML,
});
return (
<Map center={position} zoom={this.state.zoom}>
<TileLayer
attribution="&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors"
url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
/>
<Marker position={position} icon={customMarkerIcon}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</Map>
);
}
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);