React-leaflet: Add New Control

Created on 24 Mar 2016 · 11Comments · Source: PaulLeCam/react-leaflet

Hi everybody,

I would like to create a new control with a button for recenter the map in marker.
I don't see how do..

Example :
capture d ecran 2016-03-24 a 11 28 55

Source

LucasAlumni

Most helpful comment

Hey Lucas,

You want to do something like this:

import React from 'react';
import ReactDOM from 'react-dom';
import L from 'leaflet';
import { MapControl } from 'react-leaflet';

export default class CenterControl extends MapControl {  // note we're extending MapControl from react-leaflet, not Component from react

  componentWillMount() {
    const centerControl = L.control({position: 'bottomright'});  // see http://leafletjs.com/reference.html#control-positions for other positions
    const jsx = (
      // PUT YOUR JSX FOR THE COMPONENT HERE:
      <div {...this.props}>
        // add your JSX 
      </div>
    );

    centerControl.onAdd = function (map) {
      let div = L.DomUtil.create('div', '');
      ReactDOM.render(jsx, div);
      return div;
    };

    this.leafletElement = centerControl;
  }
}

Then use it like this:

<Map center={center} zoom={13}>
    <CenterControl/>
</Map>

That'll cause your component to be attached to the map and managed by leaflet. So leaflet will handle positioning correctly in the right corner, even if there's already other controls in the right corner.

You can read more about controls here: http://leafletjs.com/reference.html#control.

bigsassy on 24 Mar 2016

👍16

All 11 comments

Hey Lucas,

You want to do something like this:

import React from 'react';
import ReactDOM from 'react-dom';
import L from 'leaflet';
import { MapControl } from 'react-leaflet';

export default class CenterControl extends MapControl {  // note we're extending MapControl from react-leaflet, not Component from react

  componentWillMount() {
    const centerControl = L.control({position: 'bottomright'});  // see http://leafletjs.com/reference.html#control-positions for other positions
    const jsx = (
      // PUT YOUR JSX FOR THE COMPONENT HERE:
      <div {...this.props}>
        // add your JSX 
      </div>
    );

    centerControl.onAdd = function (map) {
      let div = L.DomUtil.create('div', '');
      ReactDOM.render(jsx, div);
      return div;
    };

    this.leafletElement = centerControl;
  }
}

Then use it like this:

<Map center={center} zoom={13}>
    <CenterControl/>
</Map>

You can read more about controls here: http://leafletjs.com/reference.html#control.

bigsassy on 24 Mar 2016

👍16

Thanks bigsassy !

Just a little question, what's the legend for you ? : legend.onAdd = function (map).

Best regards,

LucasAlumni on 24 Mar 2016

Oh, sorry! It should be centerControl.onAdd = function (map) {. I updated the code above.

The legend is from my code, which I copied and modified for the example. I had forgotten to change it to centerControl in the code above.. If you're curious, here's that custom control from my current project:

import React from 'react';
import ReactDOM from 'react-dom';
import L from 'leaflet';
import { MapControl } from 'react-leaflet';

export default class LegendControl extends MapControl {

  componentWillMount() {
    const legend = L.control({position: 'bottomright'});
    const jsx = (
      <div {...this.props}>
        {this.props.children}
      </div>
    );

    legend.onAdd = function (map) {
      let div = L.DomUtil.create('div', '');
      ReactDOM.render(jsx, div);
      return div;
    };

    this.leafletElement = legend;
  }
}

And I used it something like this:

<Map className="map" center={center} zoom={13} style={{height: "300px"}}>
  <TileLayer
    url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />
  <GeoJson data={this.props.data} pointToLayer={this.pointToLayer}/>
  <LegendControl className="supportLegend">
    <ul className="legend">
      <li className="legendItem1">Strong Support</li>
      <li className="legendItem2">Weak Support</li>
      <li className="legendItem3">Weak Oppose</li>
      <li className="legendItem4">Strong Oppose</li>
    </ul>
  </LegendControl>
</Map>

bigsassy on 24 Mar 2016

Thank you very much bigsassy !

LucasAlumni on 24 Mar 2016

Hello ! @bigsassy Thanks for the excellent example. Everything works so far except that I don't seem to be able to refresh my custom control when changing its properties. My custom control displays different information according to the selected marker on the map.

Problem is that the content in the custom control does not update when selecting a marker. This mus t be because of the fact the react render function is not implemented / is able to rerender the component on prop change.

Did anyone come across this problem before ?

Thanks for help

alexanderfrey on 12 Jul 2016

👍4

This component only renders it's children on mount, not on render or update. If you would like a custom control component that updates, I created react-leaflet-control. If your not a fan of installing more external components, you can always copy the ~45 lines of source.

jgimbel on 12 Jul 2016

👍6 ❤3 🎉1

@jgimbel Thanks so much ! I will go and check it out.

alexanderfrey on 12 Jul 2016

Looks good. I will go and use that one for my custom control. Do you have a suggestion to block panning the map when the mouse is over your react-leaflet-control container ? This is the reason why I was trying to create a custom leaflet control in the first place...

alexanderfrey on 12 Jul 2016

You can use the component https://github.com/alex1kirch/react-leaflet-portal. The component allows to use the leaflet control panel like a normal React child. Features like context are availble because the component child still exists in the React tree.
Demo: https://react-leaflet-portal.herokuapp.com/#portal