I have a point layer with an icon, and I would like to display the labels in addition to the icon only from a certain zoom level (9). I would like to avoid creating a dedicated label layer. Looking at the expression documentation, Stet and Zoom should give me the desired result, but it doesn't work.
Following this answer, I try to change the size of the text depending on the zoom level, but no matter the zoom, the text will always have the default size (here 7)
Am I missing something or is it a bug? I'm using Maplibre
layout: {
"icon-image": "border_crossing",
"icon-size": 0.5,
"icon-allow-overlap": true,
'text-field': ['get', 'loc_type'],
'text-variable-anchor': ['top'],
'text-radial-offset': 0.5,
'text-justify': 'auto',
"text-size": [ "step",
["zoom"],
0,0,
9,15,
7
]
}
There are various ways. One would be:
'text-field`: ["step", ["zoom"], "", 9, ["get", "loc_type"]]
It looks like you had a bug in your step code.
Related
This is what I am trying to do in Mapbox GL JS (I am new to it): I have a spatial dataset of US cities. Each city has a ranking attribute (1-5). At the default zoom level, I want only the major cities (rank 1) to be visible. As the user gradually zooms in, I want the cities to appear based on their rank (2,3,4,5). This way, only when the user is at the max zoom level can even the smallest cities (rank 5) be visible.
I appreciate any help!
In the Mapbox style specification (filter property on layer object documentation) you can filter the features in the US Cities spatial dataset like so:
{
"id": "layer.us-cities,
...
"filter": [
">=", ["zoom"],
["match", ["get", "rank"],
1, // rank
10, // minimum zoom level
2, // etc.
15,
3,
18,
4,
20,
23 // fallback for ranks > 4
]
]
}
The filter consists of 2 parts:
The expression to compare the map's current zoom level against
The minimum zoom level needed for a city (vector tile feature) of a specific rank
For example: let's say the map's current zoom level is 17. Features with rank 1 (minimum zoom level 10) and rank 2 (min. zoom level 15) will be displayed on the map. From rank 3 onwards the minimum zoom level is at least 18 for which the equation mapZoomLevel >= "city zoom level by rank" doesn't satisfy.
filter={[
"all",
[
"match",
["get", "level"],
["2", "3", "4", "5"],
[">", ["zoom"], 12.1],
["<=", ["zoom"], 16],
],
]}
I was wondering if it would be possible to ignore the sizes of segments in highcharts pyramid. I would like all segments to be of the same size despite the value. The reason is that sometimes differences between values may be quite significant and value of 1 - even being extremely important, becomes invisible when the next value is 500. Also, would like to be able to add a legend if possible. It would be nice to set a minimum size of a segment if not possible to get dynamic sizing disabled.
Thanks for your help!
Pawel
Yes, you can add additional data according to which the height of the segment will be calculated. Next, use keys option to map the values and show the right one in a tooltip and data label:
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.realY}</b><br/>'
},
series: [{
...
keys: ['name', 'realY', 'y'],
dataLabels: {
format: '<b>{point.name}</b> ({point.realY:,.0f})',
...
},
data: [
['Website visits', 15654, 1],
['Downloads', 4064, 1],
['Requested price list', 1987, 1],
['Invoice sent', 976, 1],
['Finalized', 846, 1]
]
}]
Live demo: https://jsfiddle.net/BlackLabel/e83fatk2/
API Reference: https://api.highcharts.com/highcharts/series.column.keys
I am trying to offset symbols of a symbol layer so that they don't interfere with a previous symbol layer (i.e. they don't overlap). I need to offset them as in both cases icon-allow-overlap needs to be set to true, as the symbols need to be viewable at all zoom levels. Ideally I'd like to do something like this:
"icon-offset": [
["zoom"],
12, [-16, 0],
22, [0, 0]
]
but that gives me an error:
array length 2 expected, length 5 found
Is there a way I can do what I want similar to what I was trying above? I know that icon-offset is not transitionable so that is why the above is failing.
Any help would be appreciated.
Thanks for your time.
The answer was to use a function:
"icon-offset": {
"stops": [
[12, [-16, 0]],
[22, [0, 0]]
]
}
More info on this can be found here
I'm using Baidu's echarts library
How can I split colors of the area under a line chart after a certain threshold (beyond x-axis) using the areastyle?
Thank you!
You can't.
The areastyle is applied to the series itself, and cannot be tied to individual datapoints. Because the area color actually marks the area between two datapoints.
But.., you can, however, create a workaround and create two linecharts, like so:
legend: {
data: ['myLine']
},
series : [
{
name: 'myLine',
type: 'line',
areaStyle: {
normal: {
color: 'red'
}
},
data: [400, 300, 101, 134, null, null, null]
},
{
name: 'myLine',
type: 'line',
areaStyle: {
normal: {
color: 'green'
}
},
data: [null, null, null, 134, 90, 230, 210]
},
]
By adding it manually to the legend, and by giving both series the same name. ECharts combines the two series to some degree, so both the legend and the animation are acting like it's a single series.
Also, make sure to connect the two lines, by adding a datapoint twice (see 134). And you can customize the lines a little more with lineStyle, etc, to make them look better.
You can create a little demo by checking the ECharts demo gallery and replace the series and legend data with the snippet above (you may have to click the blue run button).
I need the legends of Google chart to get wrapped (comes in new line) automatically if it exceeds container area.
I don't want scroll button as it is not enough convenient.
With available customization options, seems it cannot be done.
Any other way?
Use the maxLines property for the legend.
i.e.:
options.legend = {position: 'top', maxLines: 5};
Note that this undocumented property only works if the legend is positioned at the top and there is enough vertical space to render both the chart and multi-line legend.
with the maxLines property for the legends, chartArea with specific set of values can help in rendering the display.
legend: { position: "top", alignment: "start", maxLines: 2 },
chartArea: {top:50,bottom:30,right:0,left:50, 'width': '100%' }
I did a lot of testing of this and it seems that you need to have chartArea width and height set to 'auto'. Still not perfect but sort of OK.