I'm using the leaflet plugin photon to request adresses like here : https://adresse.data.gouv.fr/map/

It works fine and the geocoder was added to my map. Now I would like to put the geocoder outside of my map in a searchbox. Is there a way to do it ?

API_URL = '//api-adresse.data.gouv.fr';

var searchPoints = L.geoJson(null, {
    onEachFeature: function (feature, layer) {

function showSearchPoints (geojson) {

var photonControlOptions = {
resultsHandler: showSearchPoints,
placeholder:' Ex : Rue Diderot Paris',
position: 'topright',
url: API_URL + '/search/?',
noResultLabel: 'Aucun résultat',

var map = new L.Map("map", {
center: new L.LatLng(49.047, 1.605),
layers: [layerstreets],
zoom: 13,
zoomControl: false,
photonControl: true,
photonControlOptions: photonControlOptions


A "simple" hack would be to create the photonControl outside the map instantiation, so that you can keep a reference to it. Similarly, instead of adding it directly to the map, call its onAdd method to retrieve the DOM container and place it wherever you need instead of within a map corner.

var map = L.map("map", {
    center: [49.047, 1.605],
    zoom: 13,
    zoomControl: false

var photonControl = new L.Control.Photon(photonControlOptions);
var photonContainer = photonControl.onAdd(map);

Demo: http://plnkr.co/edit/jv2qTfX4iXCccMtiL2LG?p=preview


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.