Search bar and results rendering behind map tile

[dirodriguezm]

Hi

I'm having trouble with the GeoSearchControl style. If I leave it default or "button" it looks like this:

If I set it to "bar" it renders but behind the map tile.

I am using react with react-leaflet. This is my MapControl class:

export default class SearchBar extends MapControl{
  constructor(props){
    super(props);
  }

  createLeafletElement() {
    return GeoSearchControl({
      provider: new OpenStreetMapProvider(),
      style:'bar',
      autoComplete: true,
      autoClose:true,
    });
  }
}

And the

<Map
  center={position}
  zoom={this.state.zoom}
  style={style}
  onClick={this.mapClicked}
  onLocationFound={this.handleLocationFound}
  ref="map"
  >
  <TileLayer
    attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
  {this.state.markers.map((position) =>
    <Marker position={position}>
      <Popup>
        <span>
          A pretty CSS3 popup. <br /> Easily customizable.
        </span>
      </Popup>
    </Marker>
   )}
  <SearchBar/>
</Map>

Any help would be appreciated

[smeijer]

Looks like you're missing the style sheet. Did you include it?

[dirodriguezm]

@smeijer I installed it with npm and the leaflet.css file is located in node_modules/leaflet-geosearch/assets/css/

Do I need to include it in some way ?

Edit: Yes, I added https://unpkg.com/leaflet-geosearch@2.6.0/assets/css/leaflet.css in the html page and now it works. Thanks. Just have one issue with the search bar, whenever I click on it, a map onClick function is called so I can't add markers onClick. Is there a workaround for this ?

[TitanFighter]

whenever I click on it, a map onClick function is called so I can't add markers onClick. Is there a workaround for this

autoClose: true,
keepResult: true  

autoClose closes the result list if a result is selected by click/enter. keepResult is used to keep the selected result in the search field. This prevents markers to disappear while using the autoClose feature.