web-dev-qa-db-fra.com

icône de marqueur personnalisé avec react-leaflet

J'ai essayé tout ce que j'ai trouvé sur le Web, Stackoverflow et Github, et je ne peux toujours pas y arriver.

Je veux créer un marqueur personnalisé avec une icône personnalisée, mais avec le code ci-dessous, j'ai toujours une erreur: 'TypeError: options.icon.createIcon n'est pas une fonction'

Voici mon code (pas d'erreur sur les chemins des dossiers, tout est dans src/js ou src/img)

Icon.js 

import L from 'leaflet';

const iconPerson = L.Icon.extend({
  options: {
    iconUrl: require('../img/marker-pin-person.svg'),
    iconRetinaUrl: require('../img/marker-pin-person.svg'),
    iconAnchor: null,
    popupAnchor: null,
    shadowUrl: null,
    shadowSize: null,
    shadowAnchor: null,
    iconSize: new L.Point(60, 75),
    className: 'leaflet-div-icon'
  }
});

export { iconPerson };

MarkerPinPerson 

import React from 'react';
import { Marker } from 'react-leaflet';
import {  iconPerson  } from './Icons';


export default class MarkerPinPerson extends React.Component {

  render() {

    return (
      <Marker
        position={this.props.markerPosition}
        icon={ iconPerson }
        >
      </Marker>
      );
  }
}

Je cherche vraiment votre aide!

iconsmapsleafletmarkerreact-leaflet
5
arnaudambro

J'ai finalement trouvé le code correct pour le fichier Icon.js :

import L from 'leaflet';

const iconPerson = new L.Icon({
    iconUrl: require('../img/marker-pin-person.svg'),
    iconRetinaUrl: require('../img/marker-pin-person.svg'),
    iconAnchor: null,
    popupAnchor: null,
    shadowUrl: null,
    shadowSize: null,
    shadowAnchor: null,
    iconSize: new L.Point(60, 75),
    className: 'leaflet-div-icon'
});

export { iconPerson };
11
arnaudambro

On m'a amené ici en essayant de trouver comment rendre un côté d'icônes serveur personnalisé (en utilisant react-leaflet-universal). Je pensais poster ceci au cas où quelqu'un à l'avenir se retrouve ici pour la même raison. Tout comme dans le cas de react-leaflet-markercluster, j'ai pu résoudre ce problème en exigeant un dépliant dans la fonction de retour, comme par exemple:

<Map center={this.props.center}
             zoom={zoom}
             className={leafletMapContainerClassName}
             scrollWheelZoom={false}
             maxZoom={18}
             preferCanvas={false}
        >
            {() => {
                const MarkerClusterGroup = require('react-leaflet-markercluster').default;
                const L = require('leaflet');

                const myIcon = L.icon({
                    iconUrl: require('../assets/marker.svg'),
                    iconSize: [64,64],
                    iconAnchor: [32, 64],
                    popupAnchor: null,
                    shadowUrl: null,
                    shadowSize: null,
                    shadowAnchor: null
                });

                return (
                    <React.Fragment>
                        <TileLayer
                            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                            attribution=''
                            setParams={true}
                        />
                        <MarkerClusterGroup>
                            {coordArray.map(item => {
                                return (
                                    <Marker icon={myIcon} key={item.toString()} position={[item.lat, item.lng]}>
                                        {item.title && <Popup>
                                            <span>{item.title}</span>
                                        </Popup>}
                                    </Marker>
                                )
                            })}
                        </MarkerClusterGroup>
                    </React.Fragment>
                );
            }}
        </Map>
0
David