Help dragging and address

[Litalino]

Help me

dragging the marker or entering the address will give you the coordinates.

<div class="container">
  <div class="row">
  
  <b>Coordinates</b>
		<form>
			<input type="text" name="lat" id="lat" size=12 value="">
			<input type="text" name="lon" id="lon" size=12 value="">
		</form>
		
    <h4>AUTOCOMPLETE + GEOCODING</h4>
    <div class="auto-search-wrapper loupe">
      <input
        type="text"
        autocomplete="off"
        id="search"
        class="full-width"
        placeholder="enter the city name"
      />
    </div>
  </div>
</div>

<!-- map -->
<div id="map"></div>

[Litalino]

file script.js

onSubmit: ({ object }) => {

// remove all layers from the map
map.eachLayer(function (layer) {
  if (!!layer.toGeoJSON) {
    map.removeLayer(layer);
  }
});

const { display_name } = object.properties;
const [lng, lat] = object.geometry.coordinates;
// custom id for marker

const marker = L.marker([lat, lng], {
    title: display_name,
   draggable: true,
    autoPan: true,
});

marker.addTo(map).bindPopup(display_name).openPopup();

 // dragging the marker
marker.on("dragend", function (e) {
    const markerPlace = document.querySelector(".marker-position");
    const markerPlace_lat = document.getElementById("lat");
    const markerPlace_lon = document.getElementById("lon");
    markerPlace.textContent = `${marker.getLatLng().lat}, ${marker.getLatLng().lng}`;
	
    const latt = `${marker.getLatLng().lat}`;
    const lonn = `${marker.getLatLng().lon}`;
    //console.log( latt );
    markerPlace_lat.value = `${marker.getLatLng().lat}`;
    markerPlace_lon.value = `${marker.getLatLng().lng}`;
	
	    marker.addTo(map).bindPopup(display_name).openPopup();

});

map.setView([lat, lng], 8);

},

[Litalino]

Missing does not show the new address title on the newly pulled point

[tomickigrzegorz]

@Litalino Prepare a working code demonstration somewhere, e.g. on codepen.
And describe again what exactly you mean. Because, unfortunately, I do not understand too much.

[Litalino]

Yes

Demo: https://moigioi.org/map/ (Source https://tomik23.github.io/leaflet-examples)

I want to add mouse drag or click.

The new address of the new coordinates will
Enter the address box id = "search" to change the new address, such as coordinates

Please help me

DEMO ADD Reverse geocode (Source https://developers.arcgis.com/esri-leaflet/geocode-and-search/reverse-geocode/#set-the-api-key)

https://moigioi.org/map/indexapi.html

B1: The first page loads ok and there is an error that the mouse cannot be dragged

B2: I search using the search box for results.

Drag the mouse to the new address unchanged on the window and in the search box.

and click on the current map see the address search box has changed to the new address, but the window is not visible

OR

I want to add Reverse geocode

Please guide

[tomickigrzegorz]

Hi,
From what I can see, it probably works as you described.
The only thing you can try is nominatim reverse
But as you know, nominatim has limitations and doesn't always work unless you use your own server.