React-leaflet: Support marker divicon

[moimael]

Hi,

I seek to have a custom icon for my markers, but the divicon property is not exposed. Any plan to expose it ?

Thanks for your great work !

[PaulLeCam]

Hi,

There is no divIcon option in the Marker constructor, only icon (see the documentation), it's up to you to instantiate and pass it a divIcon if you want.

[moimael]

Yes my bad, I wrote this to quickly, I had a problem elsewhere preventing icon from working. It's working now.

[afilp]

Hello Paul,

I am not sure how this works, I also want to use a divIcon instead of a simple icon and there are issues concerning the changes of this icon's HTML, etc. Can you _please_ give an example? OR support the divIcon more inherently within "react-leaflet"? I am sure this is me not understanding something, it would be nice though to have an easy way (or example) to just use divIcons (that may change also) for rendering the marker.

See also here:
http://stackoverflow.com/questions/30751850/react-and-real-dom-cooperation-in-leafletjs

[PaulLeCam]

Hi,

If you want to use a divIcon, you just need to pass its instance to the <Marker>, ex:

import { divIcon } from 'leaflet';
import { Marker } from 'react-leaflet';

const icon = divIcon({className: 'my-div-icon'});
const marker = <Marker icon={icon} ... />;
...

There is nothing specific in this lib regarding divIcons, the properties you set in the <Marker> component are simply passed as options to Leaflet's marker() constructor.

[afilp]

Thanks, please note that I do not use the 'className' property but the 'html' one.
(http://leafletjs.com/reference.html#divicon)

I use it as such:

var myIcon = L.divIcon({
          className: '',
          iconSize: [24, 24],
          html: `<div id="s${car.id}"></div>`,
        });

Will that work?

[PaulLeCam]

I haven't used divIcons much so I don't know about their expected behavior, all I can tell is that this library does not have any behavior related to divIcons in particular, so you should refer to Leaflet's documentation.

[afilp]

Ok, thanks, it is just that the DivIcon mutates the DOM (like the "PopUp" does), so things can get pretty ugly when the HTML of the DivIcon changes (which does).

[luqmaan]

I use a DivIcon that updates a few properties here:
https://github.com/luqmaan/instabus-react/blob/b52e8290455520909b4b10b185a4a9456563b6d3/client/js/components/VehicleMarker.react.jsx#L46-L101

I wrote this before react-leaflet converted to ES6 class syntax, so instead of inheriting it uses mixins. But in general, the steps to setup a DivIcon are basically the same.

componentWillMount() {
    var {map, position, ...props} = this.props;

    props.icon = L.divIcon({
        className: 'vehicle-icon',
        html: formatVehicleIconHTML(this.props.heading, this.props.routeId, this.props.directionSymbol, this.props.updateStatus),
    });

    this._leafletElement = L.marker(position, props);
}

componentDidUpdate(prevProps) {
    if (this.props.heading !== prevProps.heading) {
        var path = this._leafletElement._icon.querySelector('#circle-shape');
        path.setAttribute('transform',  'rotate(' + this.props.heading + ' 26 26)');
    }
}

[afilp]

@luqmaan Thanks, I'll check this (note, I use ES6). I assume that the map needs to be a React component, not a window.map property (like the "normal" leaflet.js does).

[luqmaan]

I think you can just get rid of map in the componentWillMount statement