0

enter image description here

It looks like that when it is supposed to be a button that you press to open. I am using react-leaflet with mapzen's leaflet-geocoder.

import { MapControl } from 'react-leaflet'
import L from 'leaflet'
import 'leaflet-geocoder-mapzen'

export default class SearchBox extends MapControl {
  componentWillMount() {
    const searchBox = L.control.geocoder(<API-KEY>)
    this.leafletElement = searchBox
  }
}
Jake Hm
  • 327
  • 1
  • 2
  • 13

2 Answers2

0

I added some styling in my CSS that made the search box look somewhat better — that's my fix for now, at least.

.leaflet-touch .leaflet-bar {
  background-color: white;
}

.leaflet-pelias-control, .leaflet-pelias-input {
  width: 100%;
  max-width: 200px;
}

.leaflet-pelias-search-icon {
  display: block;
  visibility: hidden;
}

.leaflet-pelias-close {
  visibility: hidden;
}

.leaflet-pelias-close::after {
  content:'Clear search';
  visibility: visible;
  display: block;
  width: 100%;
  padding: 5px;
  top: 2px;
}

.leaflet-top, .leaflet-left {
  width: 200px;
}
pquest
  • 3,151
  • 3
  • 27
  • 40
haiba
  • 221
  • 3
  • 9
  • Thank you for your contribution. Could you explain more about your context ? Does this fix address the question directly? Or do you have different assumptions? It would also be great to get some explanation about your contribution: What does it fix exactly? What to expect ? – Eric Platon Feb 17 '17 at 00:55
0

For leaflet-control-geocoder, what worked for me, was to add the following to index.css:

@import "~leaflet-control-geocoder/dist/Control.Geocoder.css";

So for leaflet-geocoder-mapzen I'm guessing (untested):

@import "~leaflet-geocoder-mapzen/1.9.4/leaflet-geocoder-mapzen.css";

or similar

FYI

Tilde (~) used in conjunction with webpack means that a lookup is performed against node_modules to resolve the path. see stackoverflow explanation here

sam-dataharvest
  • 1