Back to home

[Radzio1615]

Hi! I have a question about example 41 (Back to home button).

I retrieve data from nominatim using this code:

fetch(`https://nominatim.openstreetmap.org/search?q=${address} ${post} ${city}&format=json&addressdetails=1&limit=1`)
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    if(data.length){
      const localization = data[0];
        var osm = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token={accessToken}', {
          tileSize: 512,
          zoomOffset: -1,
        });
        var map = L.map('map', {
          center: [localization.lat, localization.lon],
          zoom: 14,
          layers: [osm],
        });

        // example code here

    } else {
      throw 'Not found';
    }
  })
.catch((err) => { console.error(err); });

I changed buttonBackToHome.addEventListener from yours example, but I don't know how to adjust the moveend event to make it work properly. Can you help me with this?

function getCenterOfMap() {
    buttonBackToHome.classList.remove("hidden");

    buttonBackToHome.addEventListener("click", () => {
        map.flyTo([localization.lat, localization.lon], 14);
    });

    map.on("moveend", () => {
        const { lat: latCenter, lng: lngCenter } = map.getCenter();

        const latC = latCenter.toFixed(3) * 1;
        const lngC = lngCenter.toFixed(3) * 1;

        const defaultCoordinate = [+lat.toFixed(3), +lng.toFixed(3)];

        const centerCoordinate = [latC, lngC];

        if (compareToArrays(centerCoordinate, defaultCoordinate)) {
        buttonBackToHome.classList.add("hidden");
        }
    });
}

[tomickigrzegorz]

First, I'll move this thread to the discussion because it's not a issue :)
And now one by one:

1. prepare a page with the problem, preferably at https://codepen.io
2. describe what you want to achieve or what doesn't work for you because I don't understand anything from what you wrote.

Then I will try to solve your problem ;)