CODEWITHSUNDEEP
javascriptmapboxmapbox-gl-js
MatejMecka
MatejMecka

Reputation: 1486

Mapbox: It renders the last point instead of all

I'm trying to render multiple points using Mapbox but it only displays the last one. I've added the feature parameter but nothing. This should render the two markers but i don't know why it doesn't. I'm not getting any errors in the console.

I'm stuck and can't find a way to solve it. Help?

This is the code responsible for the points.:

map.on('load', function() {
    map.loadImage('images/celltower.png', function(error, image) {
        if (error) throw error;
        map.addImage('tower', image);
        map.addLayer({
            "id": "points",
            "type": "symbol",
            "source": {
                "type": "geojson",
                "data": {
                    "type": "FeatureCollection",
                    "features": [{
                        "type": "Feature",
                        "geometry": {
                            "type": "Point",
                            "coordinates": [21.42559803007430, 42.00038270989050]
                        },
                        "geometry": {
                            "type": "Point",
                            "coordinates": [21.38529272846381, 42.0080397578202]
                        }
                    }]
                }
            },
            "layout": {
                "icon-image": "tower",
                "icon-size": 0.25
            }
        });
    });
});

Thanks :)

Upvotes: 0

Views: 157

Answers (1)

Aurel Bílý
Aurel Bílý

Reputation: 7963

You have a duplicate geometry key. Judging by the fact that features is an array, I would guess this is the proper way to do it:

map.on('load', function() {
    map.loadImage('images/celltower.png', function(error, image) {
        if (error) throw error;
        map.addImage('tower', image);
        map.addLayer({
            "id": "points",
            "type": "symbol",
            "source": {
                "type": "geojson",
                "data": {
                    "type": "FeatureCollection",
                    "features": [{
                        "type": "Feature",
                        "geometry": {
                            "type": "Point",
                            "coordinates": [21.42559803007430, 42.00038270989050]
                        }
                    }, {
                        "type": "Feature",
                        "geometry": {
                            "type": "Point",
                            "coordinates": [21.38529272846381, 42.0080397578202]
                        }
                    }]
                }
            },
            "layout": {
                "icon-image": "tower",
                "icon-size": 0.25
            }
        });
    });
});

According to the GeoJSON specification, there should be a way to specify multiple points. E.g.:

"features": [{
    "type": "Feature",
    "geometry": {
        "type": "MultiPoint",
        "coordinates": [
            [21.42559803007430, 42.00038270989050],
            [21.38529272846381, 42.0080397578202]
        ]
    }
}]

Upvotes: 3

Related Questions