Example for tile proxy plus Nominatim Proxy with lazy loading #6

New issue

Closed

opened 2024-04-11 23:20:52 +02:00 by ste101 · 2 comments

ste101 commented

2024-04-11 23:20:52 +02:00

(Migrated from github.com)

If someone has a better solution or optimizations, please leave a comment.

<div id="map" style="width: 100%; height: 400px;"></div>
<f:asset.css identifier="leafletCSSFile" rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
<f:asset.script identifier="leafletJSextern" defer="true" src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" />
<f:asset.script identifier="leafletJS">

    fetch('/geo-proxy/?provider=osm&apitype=search&format=jsonv2&addressdetails=1&q=<f:format.raw>{company.street}, {company.zip} {company.city}</f:format.raw>')
            .then((response) => response.json())
            .then((json) => {
                //console.log(json[0]['lon']);
                lon = json[0]['lon'];
                lat = json[0]['lat'];

                if("IntersectionObserver" in window){
                    var loaded = false;
                    const observer = new IntersectionObserver(entries => {
                        entries.forEach(entry => {
                            const intersecting = entry.isIntersecting;
                            //console.log('intersecting = ' + intersecting);
                            if(intersecting && !loaded) {
                                    loadMap();
                                    loaded = true;
                            }
                        })
                    }, { rootMargin: "150px" });

                    observer.observe(document.getElementById("map"));
                } else {
                    loadMap();
                }
            });

    function loadMap() {
        let markerLocation = [lat, lon];

        const map = L.map('map').setView(markerLocation, 13);
        const tiles = L.tileLayer('/tile-proxy/?provider=osm&z={z}&x={x}&y={y}&s={s}', {
            minZoom: 13,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(map);

        const marker = L.marker(markerLocation).addTo(map)
            //.bindPopup('<b>Hello world!</b><br />I am a popup.').openPopup();
    }
</f:asset.script>

If someone has a better solution or optimizations, please leave a comment. ``` <div id="map" style="width: 100%; height: 400px;"></div> <f:asset.css identifier="leafletCSSFile" rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" /> <f:asset.script identifier="leafletJSextern" defer="true" src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" /> <f:asset.script identifier="leafletJS"> fetch('/geo-proxy/?provider=osm&apitype=search&format=jsonv2&addressdetails=1&q=<f:format.raw>{company.street}, {company.zip} {company.city}</f:format.raw>') .then((response) => response.json()) .then((json) => { //console.log(json[0]['lon']); lon = json[0]['lon']; lat = json[0]['lat']; if("IntersectionObserver" in window){ var loaded = false; const observer = new IntersectionObserver(entries => { entries.forEach(entry => { const intersecting = entry.isIntersecting; //console.log('intersecting = ' + intersecting); if(intersecting && !loaded) { loadMap(); loaded = true; } }) }, { rootMargin: "150px" }); observer.observe(document.getElementById("map")); } else { loadMap(); } }); function loadMap() { let markerLocation = [lat, lon]; const map = L.map('map').setView(markerLocation, 13); const tiles = L.tileLayer('/tile-proxy/?provider=osm&z={z}&x={x}&y={y}&s={s}', { minZoom: 13, attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' }).addTo(map); const marker = L.marker(markerLocation).addTo(map) //.bindPopup('<b>Hello world!</b><br />I am a popup.').openPopup(); } </f:asset.script> ```

trokohl commented

2024-04-12 12:38:48 +02:00

(Migrated from github.com)

I'm not sure which problem you want to solve.

First: You can user the integrated nominatim proxy. Create a page from type "Nominatim Proxy Endpoint [602]" and use the url for this page.

for example: your page slug is nominatim-proxy then:
... fetch('/nominatim-proxy/?format=jsonv2&addressdetails=1&q=<f:format.raw>{company.street}, {company.zip} {company.city}</f:format.raw>') ...
Why do you want to search the coordinates each time in frontend? Isn't it better to store the coordinates once in the backend at tt_address, for example?
(tt_address integrates a backend leaflet popup for selecting the location for example)

You can try this with tile_maps, which uses tile_proxy and tt_address.

I'm not sure which problem you want to solve. First: You can user the integrated nominatim proxy. Create a page from type "Nominatim Proxy Endpoint [602]" and use the url for this page. for example: your page slug is nominatim-proxy then: ` ... fetch('/nominatim-proxy/?format=jsonv2&addressdetails=1&q=<f:format.raw>{company.street}, {company.zip} {company.city}</f:format.raw>') ... ` Why do you want to search the coordinates each time in frontend? Isn't it better to store the coordinates once in the backend at tt_address, for example? (tt_address integrates a backend leaflet popup for selecting the location for example) You can try this with tile_maps, which uses tile_proxy and tt_address.

ste101 commented

2024-04-27 16:10:29 +02:00

(Migrated from github.com)

It is only an example I what to share.

You are right, I changed the nominatim fetch

It is only an example I what to share. You are right, I changed the nominatim fetch

👍 1