显示“未定义”的弹出窗口的 mapbox geojson 描述

Question

I have the following code but when I click on a point to open a popup it returns 'undefined' and I cannot seem to work out why.

I'm pulling the description field from the geoJSON external source which I have control over but for some reason it just does not want to populate the description HTML in my array. I took the example for the popup from the mapbox website so I know it works there. I have checked, rechecked and triple checked but I think I cannot see the tree for the forest lol.

Could someone maybe help me please? thanks.

        <script>
        // ajax loading gif
        $(document).ready(function () {
            setTimeout(function () {
                $("#ajax-loader").removeClass("is-active");
            }, 6000);
        });

        // vars
        var initialOpacity = 0.2;
        var opacity = initialOpacity;

        // mapbox api
        mapboxgl.accessToken = "hidden_api_key";
        var map = new mapboxgl.Map({
            container: "map", // container ID
            style: "mapbox://styles/mapbox/dark-v10",
            center: [-2.582861, 53.5154517],
            zoom: 5,
            maxZoom: 16,
            minZoom: 0,
        });

        map.on("load", function () {
            // get hotspot locations
            map.addSource("hotspot_locations", {
                type: "geojson",
                data: "https://netmaker.io/dashboard/public_actions.php?a=ajax_helium_miners_location",
                cluster: false,
                clusterMaxZoom: 10, // max zoom to cluster points on
                clusterRadius: 50, // radius of each cluster when clustering points (defaults to 50)
            });

            // add 300m circle around each hotspot
            map.addLayer({
                id: "circle500",
                type: "circle",
                source: "hotspot_locations",
                paint: {
                    "circle-radius": {
                        stops: [
                            [0, 1],
                            [16, 600],
                        ],
                        base: 2,
                    },
                    "circle-color": "green",
                    "circle-opacity": 0.1,
                    "circle-stroke-width": 0,
                    "circle-stroke-color": "white",
                },
            });

            // add hotspot location
            map.addLayer({
                id: "hotspots-layer",
                type: "circle",
                source: "hotspot_locations",
                paint: {
                    "circle-radius": 2,
                    "circle-stroke-width": 2,
                    // "circle-color": "#36d293",
                    "circle-color": "white",
                    "circle-stroke-color": [
                        "match",
                        ["get", "status"],
                        "online",
                        "#36d293",
                        "offline",
                        "#d23636",
                        "orange", // other
                    ],
                    // "circle-stroke-color": '#36d293',
                },
            });
        });

        // ajax call hotspots location by name
        var customData;
        $.ajax({
            async: false,
            type: "GET",
            global: false,
            dataType: "json",
            url: "https://netmaker.io/dashboard/public_actions.php?a=ajax_helium_miners_location_customdata",
            success: function (data) {
                customData = data;
            },
        });

        // custom data using hotspot name
        function forwardGeocoder(query) {
            var matchingFeatures = [];
            for (var i = 0; i < customData.features.length; i++) {
                var feature = customData.features[i];
                if (feature.properties.title.toLowerCase().search(query.toLowerCase()) !== -1) {
                    // feature["place_name"] = '<img src="https://netmaker.io/dashboard/images/helium_logo.svg" alt="" width="15px">  ' + feature.properties.title;
                    feature["place_name"] = feature.properties.title;
                    feature["center"] = feature.geometry.coordinates;
                    feature["place_type"] = ["hotspot"];
                    matchingFeatures.push(feature);
                }
            }
            return matchingFeatures;
        }

        // add the control to the map.
        map.addControl(
            new MapboxGeocoder({
                accessToken: mapboxgl.accessToken,
                localGeocoder: forwardGeocoder,
                zoom: 14,
                placeholder: "Search: address or hotspot name",
                mapboxgl: mapboxgl,
            })
        );

        map.on("click", "hotspots-layer", function (e) {
            var coordinates = e.features[0].geometry.coordinates.slice();
            var description = e.features[0].properties.description;

            while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
            }

            new mapboxgl.Popup().setLngLat(coordinates).setHTML(description).addTo(map);
        });

        map.on("mouseenter", "hotspots-layer", function () {
            map.getCanvas().style.cursor = "pointer";
        });

        map.on("mouseleave", "hotspots-layer", function () {
            map.getCanvas().style.cursor = "";
        });
    </script>

Answer 1

You're recieving an undefined because e.features[0].properties.description doesn't exist in the "hotspots-layer" data.

 "features": [ { "type": "Feature", "properties": { "status": "online" }, "geometry": { "type": "Point", "coordinates": [ "119.73479929772", "30.240836896893", 0 ] } },

The only "description" in this case that you can return is the e.features[0].properties.status as seen here:

 map.on("click", "hotspots-layer", function (e) { var coordinates = e.features[0].geometry.coordinates.slice(); var description = e.features[0].properties.status; while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } console.log(description) new mapboxgl.Popup().setLngLat(coordinates).setHTML(description).addTo(map); });

This code snippet will allow the click event to show you the status when you interact with the hotspot location.