Is there a way to append a div to already existing div generated automatically by leaflet in React JS?

Question

Please, read the question two times, this is not a duplicate.

Is it possible to append a div generated by me in JSX to a div automatically generated by leaflet library in React?

<div class="leaflet-top leaflet-left">

Leaflet library automatically creates es div where it stores layers, etc ... I have created my own layer selector and I would like to append it to the div in order to have it with correct alignment. I want to add it to the div beacuse I have mixed layers one is created by leaflet and the other is created by me.

Now I am just positioning my custom layer near the leaflet div, but with different screen ratio/sizes it tends to be not aligned.

Here's is the problem, it is not properly aligned sometimes:

Is there something like :

DOM.writeByClassApend("leaflet-top leaflet-left", MyCustomLayer()}

Or is there a way to achieve this?

Answer 1

Is it possible to add a custom div to an already existing div generated by leaflet in React?

Yes, it is possible by using this library react-leaflet-control

Solution

Inside your map include this component Control specifying your the position you want, and inside this component specify your custom Component

import Control from 'react-leaflet-control';

    <Map
      center={this.state.center}
      zoom={10}
    >
      <Control position="topleft" >
        <div>
           My custom div
        </div>
      </Control>

      <TileLayer
        url='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
        attribution='© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        maxZoom={18}
      />
      



    </Map>