jgimbel / react-leaflet-div-icon Goto Github PK

As far as I can see, DivIcon currently does not nesting react-leaflet Popup as a child, like e.g.

<Marker
 ...
>
 <Popup>
</Popup>
</Marker>

Will this be supported for DivIcon, or is it possible today? Is there a workaround to include or add popup to DivIcon?

I have a issue with the markers. The issue is that the position of the markers are not fixed and changes its position on different zoom levels.

This link http://stackoverflow.com/questions/17875438/leafletjs-markers-move-on-zoom suggests some answer. But, it implies for leaflet icon but not for leaflet divicon.

Do we have same solution like in the above link for this plugin?

Whenever the host <Map> is being re-rendered, the JSX contents of the DivIcon are being re-rendered on the actual DOM from scratch. This is unnecessary and most probably bad (slow).

To reproduce you can run:

import React from "react";
import ReactDOM from "react-dom";
import { Map, TileLayer, Marker } from "react-leaflet";
import L from "leaflet";
import "../node_modules/leaflet/dist/leaflet.css";
import DivIcon from "react-leaflet-div-icon";

const imageIcon = new L.Icon({
  iconUrl: "https://placekitten.com/60/35",
  iconSize: new L.Point(60, 35)
});

const divIcon = new L.DivIcon({
  html: "<p>L.DivIcon</p>",
  iconSize: new L.Point(60, 35)
});

class X extends React.Component {
  onClick = () => {
    console.log("click");
    this.setState({ foo: "bar" });
  };

  render() {
    console.log("render");
    return (
      <div>
        <Map zoom={7} center={[6, 6]} style={{ width: "500px", height: "300px", border: "2px solid red" }}>
          <TileLayer url="https://{s}.tile.osm.org/{z}/{x}/{y}.png" />
          <Marker position={[6, 5]} icon={imageIcon} onClick={this.onClick} />
          <Marker position={[6, 6]} icon={divIcon} onClick={this.onClick} />
          <DivIcon position={[6, 7]} iconSize={new L.Point(60, 35)} onClick={this.onClick}><span>div-icon</span></DivIcon>
        </Map>
      </div>
    );
  }
}

ReactDOM.render(<X />, document.getElementById("root"));

There are 3 icons shown on the map. An L.Icon, an L.DivIcon and a DivIcon from this library. Clicking on any of the 3 icons, causes a setState which re-renders the <Map>. By inspecting with chrome you'll see that in all cases, the contents of the DivIcon are being re-calculated and repainted.

Installed an hour ago (reported as v1.0.1), still getting Uncaught Error: createLeafletElement() must be implemented error.

This is a feature request.

Current behavior:

Actually react-leaflet-div-icon component just accept DOM standard elements, as svg, html, etc, and a special case, react-leaflet popup component.

Example code:

const marker = [
    {lat: 49.8397, lng: 24.0297}
];
<DivIcon position={marker}>
  <svg>
    <circle cx="60" cy="60" r="50"/>
  </svg>
</DivIcon>

Expected behavior:

Thinking in component development and react architecture, I'd support to insert react components as content.

Example code:

const marker = [
    {lat: 49.8397, lng: 24.0297}
];
<DivIcon position={marker}>
  <SpecialIcon icon={icon} />
</DivIcon>

Currently, I'm working in this feature, at first sight, I got a possible solution getting DivIcon reference, searching native browser DOM element and setting html content into leaflet icon via own setter function.

I hope to create a PR with a tested development in these weeks.
Thank you for your consideration.

My JSX looks like this:

<DivIcon
	position={[lat, lon]}
	className={expanded?"xxx":"yyy"}
>
	<p>whatever</p>
</DivIcon>

Only the initial className is rendered (e.g "xxx" if expanded===true) but then updating this property to false does not refresh the DOM.

This package crashes with React Leaflet 2.0:

Uncaught TypeError: Cannot read property 'call' of undefined
    at Divicon.componentWillMount (index.js:141)

Thank you a lot for your component!
But in current version of "react-leaflet" you must to implement createLeafletElement method. You can use this code:

export default class Divicon extends MapLayer
  createLeafletElement (){
    const { map: _map, layerContainer: _lc, position, ...props } = this.props;
    this.icon = new DivIcon(props);
    return marker(position, { icon: this.icon,  ...props });
  }

  componentWillMount() {
    super.componentWillMount();
  }

 // other code without changes...

}

Hello i'm making a custom marker using but i also like to bind a popup to it like i would to a Marker, shoudn't i be able to append a DivIcon to a Marker as an icon? and bind a popup to that marker.
Now i'm using DivIcon alone, just to make the custom marker, and the popup separated, but i would like to use it all as a marker.

var myIcon = L.divIcon({className: 'my-div-icon'});

L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

would be great to do something like

let myIcon = (
  <DivIcon>
    <div className='my-div-icon'>MyIcon</div>
  < DivIcon/>
)
<Marker
  position={position}
  icon={myIcon}>
  <Popup>
    <div>Simple popup</div>
  </Popup>
</Marker>

I keep getting this annoying npm warning even though I installed required packages:

$ npm install leaflet
[email protected] /Users/oxxo/dget
└── [email protected]

$ npm install react-leaflet
[email protected] /Users/oxxo/dget
└── [email protected]

$ npm install react-leaflet-div-icon
[email protected] /Users/oxxo/dget
├── UNMET PEER DEPENDENCY [email protected]
├── UNMET PEER DEPENDENCY [email protected]
└── [email protected]

npm WARN [email protected] requires a peer of leaflet@^0.7.0 but none was installed.
npm WARN [email protected] requires a peer of react-leaflet@^0.11.5 but none was installed.

Why are those peerDependencies? Why not just regular dependencies? Any chance to update those?

Hello,

You plugin works like a charm bu I having trouble to attach a Popup.

Can you give me a exemple of this feature ?

Yoann