liveby/react-leaflet-control

Dumb React component for creating Controls

react-leaflet-control's Issues

[RFE] Allow click handlers

Hi,

I'm using a copy of your work with a modification: i need to handle the click event. So what do you think about adding two properties: onClick and onDblClick?

If a property is not provided, the default handler could call the Leaflet stopPropagation function.

Regards

Clean unmounting

Hi,

the created control container isn't removed entirely with unmountComponentAtNode. You should call this.leafletElement.remove()

Material UI Select Option not Working

anyone using Material UI here? I have a problem with Select Option from Material UI. the pop-up menu is not showing when I tried using the default Select Option then trying to click it. except for native options. (https://material-ui.com/components/selects/#native-select)

https://imgur.com/m8w2YBb

Fails with latest version of leaflet and react-leaflet

I updated these:

-    "leaflet": "1.3.1",
+    "leaflet": "1.3.3",
-    "react-leaflet": "1.9.1",
+    "react-leaflet": "2.0.0",

and it now fails with:

Uncaught Error: createLeafletElement() must be implemented

Crash on startup: `withLeaflet()` is not a function

Importing this library fails with error:
control.js?17b8:48 Uncaught TypeError: (0 , _reactLeaflet.withLeaflet) is not a function

This is similar to the issue in react-leaflet-draw where the react-leaflet uses React's context which deprecates the decorator withLeaflet().

React-Leaflet v3 compatibility

The component doesn't work with the latest version of React-Leaflet. v3 of React-Leaflet is a complete rewrite that contains breaking changes.

Creating a custom zoom

Hello Joel!

Sorry for post it here but... Do you have an example how to create a zoom button (either doing zoom in or out) using the library?
I've tried to follow the example shown but without success.

PD. In the example if I rename "bounds" var for "center" in onClick event, It works.

ZoomControl import missing in example

To get the example in README to work one requires to import also:

import ZoomControl from "react-leaflet";

... which brings up actually two zoom control (on top left and right)

onMouseDown events

Hello,
I'm trying use this component but without success when I need use onMouseDown event. Is there any possible workaround? I`m not sure if there is problem in Leaflet itself or the problem is in this compoennt.

Thank you.

When resizing the map and calling invalidateSize() the position of the control changes

I am resizing the map by setting another height. I then call

this.refs.map.leafletElement.invalidateSize(true)

and then the position of the control changes but it should stay at the same position. What kind of solution do you recommend?

Control Rendering underneath Map Tile layer on iOS only

I've got a Map coming up on a Modal that renders fullscreen, and so I have a control that renders top right to close the Modal. On PC and Android, this renders correctly, but on iOS the control is not visible there - however when I drag the map down and left I can see the Control there, under the tile that I've just moved out the way. Strangely, when I press on the location where the control should be (even though it is under the tile) the onClick action still executes.

undefined is not an object (evaluating 'map._controlCorners')

Hello.

I want to use the Control component but I got this error undefined is not an object (evaluating 'map._controlCorners').

This is the code

      <Map
          className="Map"
          center={[lng, lat]}
          zoom={zoom}
          zoomControl={false}
          ref={this.mainMap}
        >
          <ZoomControl position="bottomright" />
          <TileLayer
            attribution="Tiles &amp;copy; Esri &amp;mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
            url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
          />
          <Control position="topleft">
            <button 
              onClick={ () =>  {console.log("works")}}
            >
              Reset View
            </button>
          </Control>
      </Map>

and those are the dependencies:

    "leaflet": "^1.4.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-leaflet": "^2.2.0",
    "react-leaflet-control": "^2.0.0",
    "react-scripts": "2.1.3"

I'm new using Leaflet and I don't know how to solve this error :( .

Could not find declaration file in module 'react-leaflet-contorl'

Hi, thanks for working on the package. I am trying to implement a simple drop down for one of my maps. I can't get the module to work. Below is my configuration. I get a prompt on the VS code telling me it couldn't find declaration file for the module. I am not sure if those are related. I tried to copy paste the readme example and couldn't get it to display. Even after changing a few things to solve some render errors.

    "leaflet": "^1.4.0",
    "react": "^16.7.0",
    "react-delay": "^0.1.0",
    "react-dom": "^16.7.0",
    "react-firebaseui": "^3.1.2",
    "react-leaflet": "^2.2.0",
    "react-leaflet-control": "^2.1.0",

Could not find "store" in either the context or props error while rendering a connected component

DataList - a connected component

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

import * as actions from '../actions';

class DataList extends Component {
  componentDidMount() {
    this.props.getData();
  }

  renderList() {
    return this.props.data.map((d) => {
      return (
        <li key={d}>{d}</li>
      );
    });
  }

  render() {
    return (
      <div>
        <ul>
          {this.renderList()}
        </ul>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return { data: state.data };
}

DataList.propTypes = {
  getData: PropTypes.func,
  data: PropTypes.array
}

export default connect(mapStateToProps, actions)(DataList);

MapControl - Map component with control inside whice DataList (the connected component) is rendered

import React, { Component } from 'react'
import {Map, TileLayer} from 'react-leaflet';
import Control from 'react-leaflet-control';
import 'leaflet/dist/leaflet.css';

import DataList from '../components/DataList';


class MapControl extends Component {
  constructor(props) {
    super(props);
    this.state = {
      lat: 17.3850,
      lng: 78.4867,
      zoom: 17,
    };
  }


  render() {
    console.log(this.state); // eslint-disable-line no-console
    const position = [this.state.lat, this.state.lng]
    return (
      <div style={{backgroundColor: '#ffffff', margin:'30px', padding: '50px 30px 50px 30px'}}>
        <Map center={position} zoom={this.state.zoom} style={{height: 500, width: 1165, marginTop: '20px'}}>
          <TileLayer
            attribution="Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012"
            url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}"
          />;
          <Control position="bottomright">
            <DataList />
          </Control>
        </Map>
      </div>
    )
  }
}

export default MapControl;

Gives me the following error
Uncaught Error: Could not find "store" in either the context or props of "Connect(DataList)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(DataList)".

why not block event propagation through control to map?

react-leaflet-control does not prevent event propagation. This does not seem to be the expected behaviour in many (all?) cases.

For instance in my app, users can localize a population. They activate localization which means: next click on map sets coordinates.

If a user clicks on a control before clicking on the map, the control does not react. Instead the population is localized :-(

There are a number of other issues that seem to stem from this problem:

• #16
• #12
• #2

There is even a proposal for how to prevent event propagation by the author himself: #2 (comment)

My question is now: Why not implement this proposal in react-leaflet-control itself? Is there a specific reason not to do this? I can't think of one but then who knows...

Return null always

I've tested with the latest version of react-leaflet examples and react-leaflet-control always returns null at render();

    render() {
      if (!this.leafletElement || !this.leafletElement.getContainer()) {
        return null
      }
      return ReactDOM.createPortal(
        this.props.children,
        this.leafletElement.getContainer(),
      )
    }

FYI, I copy & pasted current control source codes to react-leaflet examples.

• Versions
  leaflet: 1.4.0
  react-leaflet: 2.2.0
  react-leaflet-control: 2.0.0

IE10 Support

Hi,

Your code works great. If you add the following lines, it will work with IE10:

export default class CustomControl extends MapControl {
  // for IE9 & IE10 support
  static contextTypes = MapControl.contextTypes;
  static childContextTypes = MapControl.childContextTypes;

I found this workaround here:
PaulLeCam/react-leaflet#235

Regards

Inheritance issue

Hi,

Control inherits MapControl but does not respect all super method calls.

I think Control#componentWillMount should be replaced to override MapControl#createLeafletElement:

  /**
   * @override
   */
  createLeafletElement (props) {
    this.leafletElement = new Dumb(props)
    return this.leafletElement
  }

and Control#componentWillUnmount should call super to really remove the the leaflet element:

componentWillUnmount() {
    unmountComponentAtNode(this.leafletElement.getContainer());
    super.componentWillUnmount()
}

Mark as deprecated

@jgimbel if this isn't getting regular updates any more then can I suggest marking deprecated and linking to https://github.com/chris-m92/react-leaflet-custom-control in readme? 🙏

Legacy API

It seems that componentDidMount is deprecated and may be removed in React 17.
Any plan on changing this?
I suppose maybe with a layer like redux it might not be required?

Using 1.4, still getting 'PropTypes' error.

Hola!

I updated to version 1.4 but I'm still getting the following error:
Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

I know pull request #13 was supposed to address this issue. I have isolated the issue to this library. Am I doing something incorrectly?

Thanks!

compatibility with react v16

I recently updated to react v16.0.0.

react-leaflet-control works like a charm.

When running npm i I get this message though:

npm WARN [email protected] requires a peer of react@^0.14.7 || ^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@^0.14.7 || ^15.0.0 but none is installed. You must install peer dependencies yourself.

As far as I understand, this here is the cause: https://github.com/LiveBy/react-leaflet-control/blob/master/package.json#L22-L23

Do you require specific tests or would you accept a pull request updating those two lines?

When page is rendering the control does not render....

I have insert a new control in the element like this ...
`

` When I start the page for the first time the control does not render. When I do a small change in the code the control appears when the page is refreshing. Why is that?

disable panning when mouse is over react-leaflet-control

Thanks for this great extension ! I'm trying to scroll the content within the react-leaflet-control on mobile devices but instead the events seems to be passed to and consumed by the map. Is there a way to block passing those scroll and click events to the map ?

I crawled already through the whole react-leaflet github issues and stackoverflow but couldn't find an example that would work for me.

Help is very much appreciated

The contents of <Control> do not get rendered on initial <Map> display.

When using this code:

<Control position="bottomleft" className="xxx">
  <button className="yyy">Foo</button>
</Control>

The initial <Map> render results in the following HTML which doesn't really contain the contents of the custom control, just its wrapper:

<div class="xxx leaflet-control"></div>

As soon as the next <Map> render takes place, the custom control HTMLs is finalized to:

<div class="xxx leaflet-control"><button class="yyy">Foo</button></div>

Live example: https://codesandbox.io/s/n4y9opn000

Dragging does not work inside control

I've discovered that due to

DomEvent.disableClickPropagation(_controlDiv);

anything inside the control using mouse dragging such as sliders and ranges inside the control do not fire.
However, I've managed to find a workaround by replacing

onAdd(/* map */) {
  var _controlDiv = DomUtil.create("div", this.options.className);
  DomEvent.disableClickPropagation(_controlDiv);
  return _controlDiv;
},

with

onAdd(map) {
  var _controlDiv = DomUtil.create("div", this.options.className);
  DomEvent.on(_controlDiv, "mouseover touchstart", () => {
    map.dragging.disable();
  });
  DomEvent.on(_controlDiv, "mouseout touchend", () => {
    map.dragging.enable();
  });

  return _controlDiv;
},

Since we only care about the map not being moved when we're changing stuff inside the control, we can simply disable the map being dragged. This will not stop any events from propagating inside the control, so the aforementioned leaflet events should work both on mouse and touch devices.

Let me know what you think and if this is PR-worthy.

Can we put up a demo for this?

please link to this repo from npm

When I search for the github page of a dependency I have made it a habit to go over the npm page of the dependency. This way you are guaranteed not to land an a clone or otherwise same named project.

The npm site of react-leaflet-control does not have this link though.

I'm sure it would help a lot of people to add it.

Unmet peer dependency

Hello,

The version ^0.11.5 peerDependency for of react-leaflet does not satisfy the newer 0.12.3 version, but apparently it works correctly with it.

└── UNMET PEER DEPENDENCY [email protected]

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

I would update the semver and take into consideration that version 1.0.0 is in rc1 and it may still be supported as well, however I haven't tested.

Removing a Control breaks Leaflet zooming and panning

Running Leaflet 1.0.0 rc3 and React-Leaflet 1.0.0 beta 3, occurs in both Microsoft Edge and Chrome.

Description
If I add, then remove a Control component from a Map component, the Map no longer responds to zoom or panning, and features on top of the map render extremely weirdly. No errors are logged to console.

Cause:
I narrowed this down to the onRemove function in Control.Dumb.js. I think onRemove doesn't remove events for the Control component properly, so it breaks all events on the Map component.

Workaround:
Removing onRemove entirely fixes the bug (i.e. I can add and remove as many Controls as I want without problems).

Could this be a result of a change in Leaflet 1.0 that isn't changed in onRemove?

Setting state in the render method?

Should you be setting state in your render method in your example?
Also, where is bounds passed as a property?

  render(){
    <Map
      center={this.state.center}
      zoom={10}
    >
      <ZoomControl position="topright" />
      <TileLayer
        url='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
        attribution='© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        maxZoom={18}
      />

      <Control position="topleft" >
        <button 
          onClick={ () => this.setState({bounds: [51.3, 0.7]}) }
        >
          Reset View
        </button>
      </Control>
    </Map>