Personalizar los íconos de los marcadores react-leaflet mediante el uso de fuentes impresionantes

Solución:

Por algunas razones, el código no se formatea. Ver código en la zona de pruebas de código

Así es como puedes usar íconos de fuentes increíbles como marcadores.

1. Agregue CDN de fuentes increíbles a su index.html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">

2. Usar divIcon junto con renderToStaticMarkup desde react-dom/server para generar el icono de marcador. Y pasa esto divIcon para Marker como un icon apuntalar.

   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="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>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);
   

3. Anule el estilo predeterminado de divIcon agregando la siguiente clase a su archivo css

   .leaflet-div-icon {
       background: transparent;
       border: none;
   }  
   

   • Aquí hay un ejemplo práctico de lo mismo:
     https://codesandbox.io/s/4ry180jl34

---

---

Utiliza Nuestro Buscador