global_drink_water.js

/**
 * Custom method for custom view in MapX
 * Parameters for onInit and onClose function ;
 * @param {Object} o Options
 * @param {Object} o.view Map-x view object
 * @param {Object} o.map mapbox-gl map object
 * @param {String} o.idView If of the view
 * @param {String} o.idSource Id of the source
 * @param {Element} o.elLegend Element containing the legend
 *
 */
return {
    onClose: function(o) {
        /**
         * Clean
         */
        o.clean();
    },
    onInit: function(o) {
        var map = o.map;
        var h = mx.helpers;
        var idSrc = o.idView + '-SRC'
        var idLayer = o.idView;

        initGJSON();

        o.map.on('click', update)

        mx.helpers.setClickHandler({
            type: 'cc',
            enable: true
        });

        o.clean = function() {
            o.map.off('click', update)
            h.setClickHandler({
                type: 'cc',
                enable: false
            });
            removeGJSON();
        }

        function update(e) {
            var lat = e.lngLat.lat;
            var lng = e.lngLat.lng;
            var latTxt = Math.round(lat * 10) / 10
            var lngTxt = Math.round(lng * 10) / 10



            findWater(10000, e.lngLat.lat, e.lngLat.lng)
                .then(gj => {
                    map.getSource(idSrc).setData(gj);

                    var content = gj.features.map(f => {
                        return {
                            pos: JSON.stringify(f.geometry.coordinates)
                        }
                    })


                    var elTable = h.elAuto('array_table', content, {
                        tableTitle: `Lat:${latTxt}, Lng:${lngTxt}`
                    });

                    var elTableMain = elTable.querySelector('tbody');
                    
                    elTableMain.style.maxHeight = "100px";
                    elTableMain.style.overflowY = "auto";
                    elTableMain.style.display = "block";


                    var p = new mx.mapboxgl.Popup();
                    p.setLngLat(e.lngLat)
                        .setDOMContent(elTable)
                        .addTo(o.map);
                })


        }

        function initGJSON() {
            map.addSource(idSrc, {
                'type': 'geojson',
                'data': null
            });

            map.addLayer({
                'id': idLayer,
                'source': idSrc,
                'type': 'circle',
                'paint': {
                    'circle-radius': 10,
                    'circle-color': 'rgba(174,39,208,0.4)',
                }
            });
        }

        function removeGJSON() {

            var layer = map.getLayer(idLayer);

            if (layer) {
                map.removeLayer(idLayer);

            }
            var src = map.getSource(idSrc);

            if (src) {
                map.removeSource(idSrc);

            }

        }



        function findWater(radius, lat, lng) {
            radius = radius || 10000;
            var req = `node(around:${radius},${lat},${lng})["amenity"="drinking_water"];out;`;


            return fetch("http://overpass-api.de/api/interpreter", {
                "headers": {
                    "accept": "*/*",
                    "cache-control": "no-cache",
                    "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
                    "pragma": "no-cache"
                },
                "body": `data=${encodeURIComponent(req)}`,
                "method": "POST",
                "mode": "cors",
                "credentials": "omit"
            }).then(r => {
                if (!r.ok) {
                    throw new Error('failed');
                }

                return r.text();

            }).then(d => {
                var xd = h.parseXml(d);
                var points = [];
                xd.querySelectorAll('node').forEach(n => {
                    points.push({
                        "type": "Feature",
                        "properties": {},
                        "geometry": {
                            "type": "Point",
                            "coordinates": [
                                n.getAttribute('lon') * 1,
                                n.getAttribute('lat') * 1
                            ]
                        }
                    })

                })

                return {
                    "type": "FeatureCollection",
                    "features": points

                };
            });
        }



    }
};