mapbox / mapbox/mapbox-gl-geocoder

Reverse Geocoding Event

Open
#452 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged needs information
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 });
});

});
```

![image](https://user-images.githubusercontent.com/44763288/153548000-117373e4-9c97-4822-8122-e6d6b66f5403.png)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.