Add other controls in v1 TODO

[jonboiser]

Filling out some of the missing controls in #87.

I've done some basic testing on Attribution and Scale. The Layers control gets placed on the map, but I'm not sure how to correctly pass a base layer reference from a, say, TileLayer component into the Layers control.

[jonboiser]

Here is one solution I've been working on for the LayersControl. In your Map, you can include multiple layers as children.

<Map bounds={this.state.bounds}>
  <TileLayer
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    layerName='OpenStreetMap'
    url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
  />
  <TileLayer
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    layerName='OpenStreetMap2'
    url='http://otile4.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png'
  />
  <LayersControl baseLayers={['OpenStreetMap', 'OpenStreetMap2']}/>
</Map>

The difference is that you pass layerName props into the layers, and pass an array matching those names as a prop into LayersControl.

I'm not sure we can look at all the layers synchronously, so in the LayersControl componentWillMount stage, we listen for these layers being added to the map asynchronously. When the layer is added, we also add it to the control. When we are sure the last layer is added, we remove the event listener.

[PaulLeCam]

Hey, thanks for the PR!

I'll try to have a look at Leaflet's doc this week for these controls, see if there any specific cases to consider.
Other than that I think it will mostly be about handling dynamic properties and adding some doc, but your current code looks good.

[PaulLeCam]

Thanks!

[chriswiggins]

Sorry to dig this up - I'm having issues with understanding how to use the layers control? It seems to "work" when I pass actual leaflet objects in as you would normally to L.control.layers, but how do you set a default?

Much appreciated - happy to submit a PR with updated Readme instructions and even an example once I get it working :-)

[PaulLeCam]

What do you mean by default? The default options are Leaflet's ones, this library simply passes the props to the relevant Leaflet constructor.

[chriswiggins]

Hi, What do you mean by default? The default options are Leaflet's ones, this library simply passes the props to the relevant Leaflet constructor. OK right I see. I was wondering if it was possible to pass in a <TileLayer> through to LayersControl but it looks like as you say it's just a shim around the leaflet options. In the leaflet options for the L.control.layers you need to pass an object where the key is the title shown on the control and the value is a L.TileLayer class. I was hoping instead I could pass a <TileLayer> from here :-) Thanks for the help

[TobyEalden]

Hi - I'm having a similar issue - I have a <GeoJson> overlay as a child of <Map> - how do I configure the <LayersControl> overlays property to reference the <GeoJson> element? Do I need to write some code in componentDidMount to discover the Leaflet element corresponding to the GeoJson layer and manually set the overlays property?

[jonboiser]

@chriswiggins Could you give a code example of this?

I was wondering if it was possible to pass in a <TileLayer> through to LayersControl

I think I had a similar idea when I first wrote these wrappers (see my earlier comment), but I think it would involve writing some more logic into the guts of LayersControl to pull it off.

[chriswiggins]

@jonboiser I was thinking of something like this:

<LayersControl ...layersOpts>
    <TileLayer type='base' title='Street View' selected='true' ...otherOpts/>
    <TileLayer type='base' title='Satellite View' ...otherOpts />
    <ImageOverlay type='Overlay' title='Overlay' ...otherOpts />
</LayersControl>

Come to think of it, that could actually be fairly straightforward if the LayersControl element "rendered" its children and then added to the layers control. I'll have a play today and get back to you all on whether or not this works!

[chriswiggins]

So I've given this a go and no immediate luck - mainly because the TileLayers are expecting a map prop to be passed to them however in this implementation thats not what we want to do. I might have to end up modifying lots of components to get this to work.

Any other ideas around how we could do this?

[jonboiser]

So you would wrap the LayersControl-composed-with-TileLayers in a Map like this? I think this would be a nice way to work with Leaflet.

<Map>
<LayersControl ...layersOpts>
    <TileLayer type='base' title='Street View' selected='true' ...otherOpts/>
    <TileLayer type='base' title='Satellite View' ...otherOpts />
    <ImageOverlay type='Overlay' title='Overlay' ...otherOpts />
</LayersControl>
</Map>