Leaflet – Setting Search Box Text Inside Map in Leaflet

leafletsearch window

I want to know how I can show that write on my search box and appear in a rectangle inside map (sync up two elements, search box and the Text area).

Like this:

[link]
(https://design.ateljekartan.com/?lat=40.4167754&lng=-3.7037902&zoom=15&text=Madrid&orientation=landscape&styleName=fullscreen-adriatic)

Best Answer

The main key here is to observe changes in your input box and then set new value on another element, i.e.:

$(document).on('change', 'input', function() {
  console.log('changed');
  var newVal = $('input').val();
  $('#divOnMap').val(newVal);
});

Here is a working example on Leaflet and jQuery, with a container created as an extension on map.

https://codepen.io/dagmara223/pen/wXdZjL

Related Question