Full width at topright blocks zoom controls

[timwis]

Hey folks, great plugin! I'd like to leave the search box open by default as "finding my address" is my primary use case. Setting it to expanded: true works great, but takes up a bit too much real estate on mobile since it's beneath the zoom controls.

When I move it to topright it would be great, but then the full width blocks the zoom controls.

Any suggestions?

[louh]

Hi @timwis,

You'll find your answer here: https://github.com/mapzen/leaflet-geocoder/tree/master/examples#put-the-geocoder-control-above-the-zoom-control

This is a summary (to save you a click). This is an effect of the zoom controls being added by default by Leaflet, so when you add a search bar to the map, it comes "after" the zoom controls.

What you want to do is initialize your map without the zoom controls. Then, add the geocoder, and finally, create a new zoom control and add it afterwards. The code will look like this:

// Initialize a map with zoom control disabled by default
var map = L.map('map', { zoomControl: false });

// Add your geocoder control
L.control.geocoder('<your-api-key>').addTo(map);

// Add zoom control back
L.control.zoom().addTo(map);