I am using some default mapbox clustering, which is not enough for indoor map of building. Here is my example
map.addSource('maintenance_events_on_map', {
type: 'geojson',
cluster: true,
clusterMaxZoom: 22, // Max zoom to cluster points on
clusterRadius: 1, // Radius
data: JSON.parse(maintenance_events_on_map)
}).addLayer({
id: 'clusters',
type: 'circle',
source: 'maintenance_events_on_map',
paint: {
'circle-radius': 20,
'circle-color': '#973901'
}
}).addLayer({
id: 'cluster-label',
type:'symbol',
source:'maintenance_events_on_map',
layout:{
'text-field': "{point_count}"
}
});
The output is following:
I need it to be on the level of indoor building:
The only way achieving this is using Mapbox Studio, where you can upload custom icons, which easily can be called in the layer properties, while creating a layer. These icons are clusterable and this works much more better.
Related
I'm using Mapbox country boundaries source to display country shapes over the map.
I need to style each country with a different color. I'm only able to do it when creating a separate layer for each country, but that takes really long to render.
countriesLayer.setFilter('countries-simplification-data', ['in', 'ADM0_A3_IS'].concat(['US']));
Is there a way to style each country/polygon separately using just one single layer?
This is how I create the layer:
map.addSource("countries-no-simplification", {
type: "vector",
url: "mapbox://mapbox.country-boundaries-v1"
});
let countriesLayer = map.addLayer({
id: "countries-simplification-data",
type: "fill",
source: "countries-no-simplification",
"source-layer": "country_boundaries",
paint: {
"fill-color": "#ff69b4",
"fill-opacity": 0.3
}
});
I want to use a JSON file containing coordinates to plot points on a map with Mapbox and add markers at those locations. I've followed a few of their tutorials and searched elsewhere (stack overflow, Github etc) to see if I could find a solution but nothing seemed to work. I'm not getting any errors when I open the HTML file in the browser but the markers aren't appearing on the map at the JSON's coordinates and I'm not really sure how to get the JSON's coordinates to be read and then plotted on the map. I want the JSON to be used from the same folder as the project and not a URL so this didn't work for me either.
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoiam1hcHNkamFuZ28iLCJhIjoiY2tydzIwazc4MGNnODJvb2VhNHNhZDd5diJ9.iwGIdgMHrcjbNu1xJRAElQ';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
// style: 'mapbox://styles/mapbox/light-v10',
center: [-0.19346, 51.50405],
zoom: 9
});
map.on('load', () => {
map.addLayer({
id: 'restaurants',
type: 'Point',
source: {
type: 'geojson',
data: './restaurants.json' // replace this with the url of your own geojson
},
paint: {
'circle-radius': [
'interpolate',
['linear'],
['number', ['get', 'coordinates']],
0,
4,
5,
24
],
'circle-color': [
'interpolate',
['linear'],
['number', ['get', 'coordinates']],
0,
1,
2,
3,
4,
5,
],
'circle-opacity': 0.8
}
});
});
I don't know if this is your only error, but this line:
type: 'Point',
should be:
type: 'circle',
I found the below code in the MapBox website, I am unable to find out how exactly the data is received to plot the data-driven circles on the map. There is a url "mapbox://examples.8fgz4egr" present in the 'source' but what kind of data is it ? is it json or what ? How do I change the source and put my own ?
https://www.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors/
<script> mapboxgl.accessToken = 'ACCESS_TOKEN; var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
zoom: 12,
center: [-122.447303, 37.753574] });
map.on('load', function () {
map.addLayer({
'id': 'population',
'type': 'circle',
'source': {
type: 'vector',
url: 'mapbox://examples.8fgz4egr'
},
'source-layer': 'sf2010',
'paint': {
// make circles larger as the user zooms from z12 to z22
'circle-radius': {
'base': 1.75,
'stops': [[12, 2], [22, 180]]
},
// color circles by ethnicity, using data-driven styles
'circle-color': {
property: 'ethnicity',
type: 'categorical',
stops: [
['White', '#fbb03b'],
['Black', '#223b53'],
['Hispanic', '#e55e5e'],
['Asian', '#3bb2d0'],
['Other', '#ccc']]
}
}
}); }); </script>
It's vector tiles as you can see from the type value of the source property. Here is an in depth explanation on what vector tiles are and how they work: https://www.mapbox.com/vector-tiles/
Very roughly it's GeoJSON sliced into map tiles.
For simplicity's sake you can switch out the source for a geojson source and connect the circle layer to it:
map.addLayer({
type: 'circle',
id: 'my-layer',
source: {
type: 'geosjon'
data: /* url to GeoJSON or inlined FeaturedCollection */
}
})
I am following this example to visualize data on a map using mapbox. I use the following code:
<script> mapboxgl.accessToken = 'ACCESS_TOKEN; var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
zoom: 12,
center: [-122.447303, 37.753574] });
map.on('load', function () {
map.addLayer({
'id': 'population',
'type': 'circle',
'source': {
type: 'vector',
url: 'mapbox://examples.8fgz4egr'
},
'source-layer': 'sf2010',
'paint': {
// make circles larger as the user zooms from z12 to z22
'circle-radius': {
'base': 1.75,
'stops': [[12, 2], [22, 180]]
},
// color circles by ethnicity, using data-driven styles
'circle-color': {
property: 'ethnicity',
type: 'categorical',
stops: [
['White', '#fbb03b'],
['Black', '#223b53'],
['Hispanic', '#e55e5e'],
['Asian', '#3bb2d0'],
['Other', '#ccc']]
}
}
}); }); </script>
My question is that I have a size-variable dataset, which is the result of user queries, and I would like to visualize my dataset.
How to use mapbox to obtain this behavior?
Thank you.
If the data is small enough, you simple load it all into the browser as a GeoJSON object, then display it with a geojson source. See this example.
If the data changes, you simple update the source object with .setData(newdata): example.
Currently, I am manually setting the stops but my GeoJSON files have different ranges and I have to set stops values every time.
Is it possible to use min and max value of a property within a map.addLayer function? and then divide it into a range of values?
I am currently parsing the GeoJSON to get minimum and maximum value and I am not sure if mapbox provides this functionality.
map.addLayer({
'id': 'heatmap',
'type': 'circle',
'source': "sourceGeoJSON",
paint: {
'circle-color': {
property:'pH',
stops: [
[6,'#6879FB'],
[8,'#68FB75'],
[9, '#F94B18'],
[10, '#F92918']
];
},
'circle-opacity': 1.0
}
});
Mapbox-GL-JS doesn't provide any automatic binning functionality. It's pretty trivial to create linear bins over a range:
phvals = sourceGeoJSON.features.map(f => f.properties.pH);
min = Math.min(...phvals);
max = Math.max(...phvals);
range = max-min;
map.addLayer({
'id': 'heatmap',
'type': 'circle',
'source': "sourceGeoJSON",
paint: {
'circle-color': {
property:'pH',
stops: [
[min,'#6879FB'],
[min + 1/3*range,'#68FB75'],
[min + 2/3*range, '#F94B18'],
[max, '#F92918']
];
},
'circle-opacity': 1.0
}
});
To go further, consider using something like the ckmeans function in the Simple Statistics package.