I'm using a geojson that contains cities in italy, where I have "data" to read; data is stored in the properties fields. I can add even more data, for example we are thinking about adding the density of people for each city, to make cities more or less relevant, to be translated in which city is shown before on the maps.
The geojson:
{
type: "geojson",
data: {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [11.433, 46.883],
},
properties: {
title: "Vipiteno",
/* etc */
},
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [11.326, 46.46],
},
properties: {
title: "Bolzano",
/* etc */
},
},
],
},
}
On my page I add the geojson to the map by using this function:
map.on("load", function () {
// Add an image to use as a custom marker
map.loadImage("img", function (error, image) {
if (error) throw error;
map.addImage("custom-marker", image);
// Add a GeoJSON source with 2 points
map.addSource("points", geoJson);
map.addLayer({
id: "points",
type: "symbol",
source: "points",
layout: {
"icon-image": "custom-marker",
// get the title name from the source's "title" property
"text-field": ["get", "title"],
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 1.25],
"text-anchor": "top",
},
});
});
});
So how can I control which markers are shown at first load, and then showing more more points when the user zooms in?
Right now just a few are rendered at starting zoom level, but there is no control on which, and small cities are rendered before capitals (for example).
How can I override this?
