0

I am having trouble understanding why some of the popups are not displaying on the map. I checked everything, and the reason seems to be the coordinates or the way the map is centred on the Pacific instead of the Atlantic. I wonder if its a bug.

The popups that are not displaying are those located in Indonesia at coordinates: [117.298827, -3.988473] and [106.84513, -6.21462]. When I change the coordinates the popup renders fine. How should I change the coordinates?

This is the code:

    <!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<style>
.map-overlay {
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    position: absolute;
    width: 25%;
    top: 0;
    left: 0;
    padding: 10px;
}

.map-overlay .map-overlay-inner {
    background-color: #fff;
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.20);
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 10px;
}

.map-overlay h2 {
    line-height: 24px;
    display: block;
    margin: 0 0 10px;
}

.map-overlay input {
    background-color: transparent;
    display: inline-block;
    width: 100%;
    position: relative;
    margin: 0;
    cursor: ew-resize;
}
</style>

<div id='map'></div>

<div class='map-overlay top'>
    <div class='map-overlay-inner'>
        <h2>Deployment Map</h2>
    </div>
</div>

<script src="https://d3js.org/d3.v4.js"></script>

<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoia3Z5YiIsImEiOiJjaXUwMHEwcmgwMDAxMnlvM3NzMm0xbGozIn0.JL_eeNZL_lDoJxijNqFPoA';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v9',
    center: [-171.351550, 22.458428],
    zoom: 2
});

map.on('load', function() {
        map.addSource('locations', {
            'type': 'geojson',
            'data': {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-119.417931, 36.778259]
                },
                "properties": {
                    "title": "California",
                    "marker-symbol": "fire-station-15",
                    "Year": 2003,
                    "Network": "3G Roll Out"
                }
            }, {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [106.84513, -6.21462]
                },
                "properties": {
                    "title": "Jakarta",
                    "marker-symbol": "fire-station-15",
                    "Year": 2004,
                    "Network": "WiMax Network"
                }
            }, {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [117.298827, -3.988473]
                },
                "properties": {
                    "title": "Indonesia",
                    "marker-symbol": "fire-station-15",
                    "Year": 2008,
                    "Network": "LTE 4G National Roll Out"
                }
            }, {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-116.973635, 41.678383]
                },
                "properties": {
                    "title": "USA Western States",
                    "marker-symbol": "fire-station-15",
                    "Year": 2013,
                    "Network": "LTE 4G National Roll Out"
                }
            }, {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-84.970223, 34.769802]
                },
                "properties": {
                    "title": "Dalton, Georgia",
                    "marker-symbol": "fire-station-15",
                    "Year": 2015,
                    "Network": "City Wi-Fi"
                }
            }, {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-83.953125, 33.672545]
                },
                "properties": {
                    "title": "North-West Georgia, USA",
                    "marker-symbol": "fire-station-15",
                    "Year": 2017,
                    "Network": "11 City Hybrid Wireless Solution"
                }
            }]
        }
    });


        map.addLayer({
            'id': 'location-markers',
            'type': 'symbol',
            'source': 'locations',
            "layout": {
        "icon-image": "{marker-symbol}",
        'icon-size': 2,
        'icon-allow-overlap': true
    }
});

        // Create a popup, but don't add it to the map yet.
        var popup = new mapboxgl.Popup({
            closeButton: false,
            closeOnClick: false
});

map.on('mousemove', function(e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['location-markers'] });
    // Change the cursor style as a UI indicator.
    map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';

    if (!features.length) {
        popup.remove();
        return;
    }

    var feature = features[0];

    // Populate the popup and set its coordinates
    // based on the feature found.
    popup.setLngLat(feature.geometry.coordinates)
        .setHTML('<b><font color="red"> Location Information</font></b>'+'<br><b><font color="red">Location: </font></b>'+feature.properties.title+'<br><b><font color="red">Year: </font></b>'+feature.properties.Year+'<br><b><font color="red">Network: </font></b>'+feature.properties.Network)
        .addTo(map);
});
});
</script>

</body>
</html>

1 Answer 1

0

I don't know why exactly, but yes, the longitude is the problem. If you pan the map to the right, the popups in Indonesia do work.

Looks like a bug in Mapbox-GL-JS: https://github.com/mapbox/mapbox-gl-js/issues/3902

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.