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
}
});
Related
I am using Plotly js in my recent angular project. I implemented the library successfully by using its angular based wrapper.
There is one thing that I tried to implement in many ways but failed. I am trying to use my custom color palette for its charts.
I find a work around by passing the colour in the chart data layout like,
data = [{
values: allValues[0],
labels: allLabels,
type: 'pie',
name: 'Starry Night',
marker: {
colors: [['rgb(56, 75, 126)', 'rgb(18, 36, 37)', 'rgb(34, 53, 101)', 'rgb(36, 55, 57)', 'rgb(6, 4, 4)']]
},
domain: {
row: 0,
column: 0
},
hoverinfo: 'label+percent+name',
textinfo: 'none'
}
and it worked but it's not the perfect way because I need to add this in every chart data and need to take care of how many data points are there so I push those many color codes.
Is there any way I can provide my color palette in somewhere like config so that every time a chart gets initialize it start taking colors from the custom-defined palette.
The layout property takes a property colorway which takes a list of colour names/codes.
public graph: any = {
data: [],
layout: {
colorway: ["red", "green", "blue", "goldenrod", "magenta"],
autosize: true,
}
}
But I haven't yet figured out how to set this globally.
So I have 6 series I'm using in a single highcharts treemap chart where each series is it's own, smaller tree map. I can't get each of the names of the series to appear in the legend because the showInLegend property is a level above the data property.
I've tried two different configurations. First: series is set to my chartData variable, which looks like:
[{
name: key,
stack: key,
id: key,
showInLegend: true,
color: colors[key],
data: sliced
},
{...}]
And so forth. This gives me a single treemap chart with each series underneath the previous, aka they are stacked on top of each other.
If I combine them all into a single data array, I can get the proper chart format I'm looking for, where each individual series is grouped by color/parent and so forth. This was done using data-less data points, like so:
{
name,
id,
showInLegend,
color
}
and each of the other points then would be:
{
name
parent
value
}
This large data array is then given to a series array that looks like:
[{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: dataArray from above,
}]
Again, I want the chart to be multiple tree maps, not one jammed on top of the other. But i also need the legend to show all of those series' names
You can use unofficial legendType: 'point' property and remove unnecessary elements in afterGetAllItems legend event:
var H = Highcharts;
H.addEvent(H.Legend, 'afterGetAllItems', function(e) {
e.allItems.splice(2, 6);
});
H.chart('container', {
series: [{
legendType: 'point',
showInLegend: true,
...
}]
});
Live demo: https://jsfiddle.net/BlackLabel/gp2qmvac/
API Reference: https://api.highcharts.com/highcharts/series.treemap.showInLegend
Docs: https://www.highcharts.com/docs/extending-highcharts
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 */
}
})
Currently, on enabling the legend of sunburst chart in Highcharts, single series label is seen in legend. Refer following JSFiddle: http://jsfiddle.net/amrutaJgtp/7r8eb5ms/6/
Highcharts pie chart legend shows the all the category labels in the legend. Refer following Pie chart legend: http://jsfiddle.net/amrutaJgtp/wgaak302/
series: [{
name: 'Sales',
colorByPoint: true,
showInLegend: true,
data: [{
name: 'Consumer',
y: 2455
}, {
name: 'Corporate',
y: 6802
},{
name: 'Home office',
y: 9031
}, {
name: 'Small Business',
y: 5551
}]
}]
Is it possible to show all the data points of the sunburst series or atleast the categories - Consumer, Corporate, Home Office, Small Business in legend?
In my opinion the answer is no.
Please refer to this demo: http://jsfiddle.net/kkulig/u3p1usz9/
I tried to implement this functionality by setting legendType = 'point' (not docummented in the API, but it works) and overwriting H.Legend.prototype.getAllItems, but it seems that hiding points is not supported for sunburst. There's no method that will do it - check out the console.log output. Switching visibility of the point by using visible property doesn't work either. Legend behaves properly, but there's no effect on the plot area.
Workaround
This simple example shows how to mimic desired legend behavior: http://jsfiddle.net/kkulig/kn10kb7L/
First I added additional two series that have no data:
{
type: 'line',
name: 'p1',
color: 'blue'
}, {
type: 'line',
name: 'p2',
color: 'blue'
}
The color of the legend item markers needs to be handled manually by setting the color of the 'fake' series.
I created visible flag for every leaf for controlling its visibility.
Then I used their legendItemClick callback function to filter the full data set and perform setData on the first series using the filtered data.
legendItemClick: function(e) {
series = this;
data.forEach(function(leaf) {
if (leaf.id === series.name || leaf.parent === series.name) {
leaf.visible = !leaf.visible;
}
});
this.chart.series[0].setData(data.filter((leaf) => leaf.visible));
}
API reference: https://api.highcharts.com/highcharts/plotOptions.sunburst.point.events.legendItemClick
If you think that hiding points should be implemented in sunburst series you can share this idea here: https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api
Update
If you want an animation to happen use addPoint and removePoint instead of setData.
API references:
https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
https://api.highcharts.com/class-reference/Highcharts.Series#removePoint
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.