React-leaflet: How to set the AttributionControl's prefix?

[mojodna]

In raw Leaflet, this would look like:

this.map.attributionControl.setPrefix("");

(It hides the "Leaflet |" prefix when displaying attribution.)

[PaulLeCam]

https://github.com/PaulLeCam/react-leaflet#components

[mojodna]

For straight-up attribution changes, passing options as props works great. However, for the attribution prefix, it's not enough to set options.attributionControl.prefix: "" (which would need to be passed as <Map ... {...{"attributionControl.prefix": ""}} />, if I'm understanding things right). (attributionControl is a boolean and is a bit too much of a hammer.)

[PaulLeCam]

No you can't set nested options like this in the properties, but as stated in the documentation, you can access Leaflet's map instance using getLeafletElement() on the Map component.

[derwaldgeist]

How exactly does this work? The context on the top level element is empty, so how could I access the map instance on Map level?

[MattSidor]

I'm struggling with this. My <TileLayer> element has an attribution value, but I want to hide the default "Leaflet" prefix. I can create an <AttributionControl> element with prefix={false}, but that just creates a duplicate attribution.

Example:

render() {
  const position = [this.state.lat, this.state.lng];
  return (
    <ReactLeafletMap
      center={position}
      zoom={this.state.zoom}
      zoomControl={false}
    >
      <TileLayer
        attribution="[attribution text]"
        url="[tile url]"
      />
      <AttributionControl position="bottomright" prefix={false} />
    </ReactLeafletMap>
  );
}

Screenshot (two attributions, one without the "Leaflet" prefix):

@mojodna, I am curious, were you able to find a good solution for removing the prefix via these React components?

[mojodna]

@MattSidor no, i end up embedding Leaflet directly in my own components instead since I'm not doing anything complicated (or if I am, it's a weird fit with this plugin).

[MattSidor]

I figured it out!

Declare attributionControl={false} in the parent <ReactLeafletMap> component to disable to default attribution, then create a new <AttributionControl> component with prefix={false}, like so:

render() {
  const position = [this.state.lat, this.state.lng];
  return (
    <ReactLeafletMap
      center={position}
      zoom={this.state.zoom}
      zoomControl={false}
      attributionControl={false}
    >
      <TileLayer
        attribution="[attribution text]"
        url="[tile url]"
      />
      <AttributionControl position="bottomright" prefix={false} />
    </ReactLeafletMap>
  );
}

The actual attribution text, minus the prefix, is still declared in the attribution property of the <TileLayer> component.

[StephanGeorg]

Should be

<AttributionControl position="bottomright" prefix=""} />

otherwise

Failed prop type: Invalid prop prefix of type boolean supplied to AttributionControl, expected string.