mapbox / mapbox/mapbox-gl-geocoder
Reverse Geocoding Event
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 388
- Forks
- 181
- PR merge metrics
- No merged PRs in 30d
Description
Is there a way in reverse geocoding that every click on marker that will result the reverse geocoding ?
example code
```
const map = useRef(null);
const marker = useRef(null);
const mapGeocoder = useRef(null);
const mapContainer = useRef(null);
const [latLng, setLatLng] = useState(value || {});
const className = `map-container ${inputClassName}`;
useEffect(() => {
// Initializes the map only once
if (map.current) return;
map.current = new MapboxGL.Map({
zoom: 9,
minzoom: 3,
maxzoom: 9,
dragRotate: false,
container: mapContainer.current,
center: [120.984222, 14.599512],
maxBounds: [
[115, 4],
[128, 21],
],
style: "mapbox://styles/mapbox/outdoors-v11?optimize=true",
});
// Integrates Geocoder
mapGeocoder.current = new MapboxGeocoder({
marker: false,
countries: "ph",
mapboxgl: MapboxGL,
accessToken: MapboxGL.accessToken,
types: "country, region ,postcode, district, place, locality ,neighborhood ,address",
reverseGeocode: true,
draggable: true,
color: "#FDBE2C",
});
map.current.addControl(mapGeocoder.current);
// Creates Marker
marker.current = new MapboxGL.Marker({
draggable: true,
color: "#FDBE2C",
});
// Input Persistence
if (Object.keys(latLng).length) {
const { lng, lat } = latLng;
marker.current.setLngLat([lng, lat]).addTo(map.current);
}
// mapbox revergeocoding result
mapGeocoder.current.on("result", (e) => {
console.log(e);
// const { lng, lat } = e.result.center;
var lng = e.result.center[0];
var lat = e.result.center[1];
setLatLng({ lng, lat });
marker.current.setLngLat([lng, lat]).addTo(map.current);
setFieldValue(fieldName, { lng: lng, lat: lat });
});
// Creates click listener. // when click that will also return the expected sample values is in the image
map.current.on("click", (e) => {
// map.current.addControl(mapGeocoder.current);
console.log("e", e);
// const { lng, lat } = e.lngLat;
// console.log({ lng, lat })
// setLatLng({ lng, lat });
// marker.current.setLngLat([lng, lat]).addTo(map.current);
// setFieldValue(fieldName, { lng: lng, lat: lat });
});
});
```

Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the MapboxGeocoder setup, its reverseGeocode option and result event, then compare them with the map click listener shown in the report. Determine the intended click-to-reverse-geocode behavior and define coverage for the completed interaction; done means marker clicks produce the expected reverse-geocoding result.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100