i want to disable rendering of only one extruded building in my case, i looking for something like this
map.on('load', function () {
map.addLayer({
'id': '3d-buildings',
'source': 'mapbox',
'source-layer': 'building',
"filter": ["!=", "id", "12345"],
'type': 'fill-extrusion',
'paint': {
'fill-extrusion-color': '#bbb',
'fill-extrusion-height': 10,
'fill-extrusion-base': 0,
'fill-extrusion-opacity': 1
}
});
})
following expression is incorrect:
"filter": ["!=", "id", "12345"]
mapbox-gl-0.44.1
The filter retrieves the property value from the properties of the current feature. Make sure that the building id is in the properties:
{
"type": "Feature",
"properties": {
"id": "12345",
"base_height": 30,
"height": 40
},
"geometry": {...}
}
}
Upd: Gets the feature's id, if it has one: ["id"]. And, of course, you need to take into account the possible type of identifier:
"filter": ["!=", ["id"], 12345]
For example click on the building to hide it: [ https://jsfiddle.net/yedg641a/ ]
Related
Good Day,
I have a geojson(similar to below) and I am facing trouble with an expression that works well when used without promoted.
JSFiddle:
https://jsfiddle.net/dollysingh3192/w6bzsx84/7/
GeoJson
{
'type': 'FeatureCollection',
'features': [
{
"geometry": {
"type": "Point",
"coordinates": [
8.612079620361328,
-2.932969060251523
]
},
"type": "Feature",
"properties": {
"id": "GMYTEORRGI5DQ",
"sid": "s_133",
"n": "15",
"r": "13",
"s": "312",
"sz": 5.5,
"m": "n",
"ri": 13,
"si": 7
},
"id": 11578
}
]
}
Working
Below expression is working fine and extract one feature from Map(Without using promoteId)
mapInstance.queryRenderedFeatures({ layers: ['seat'], filter: ["any", ["==", ["id"], 21762]] });
Working GIF:
Not Working
But on using promoteId in geojson source, the expression is not working at all.
mapInstance.queryRenderedFeatures({ layers: ['seat'], filter: ["any", ["==", ["id"], "GMYTEORRGI5DQ"]] });
Not Working GIF:
However, I noticed that setFilter and setFeatureState work fine with the same expression.
mapInstance.setFilter('seat', ["match", ["id"], "GMYTEORRGI5DQ", true, false]); //Works fine
GIF with setFilter:(Don't know why it works). LINK
Please guide. Am I doing anything wrong here?
https://jsfiddle.net/dollysingh3192/w6bzsx84/7/
To get properties data use get
Try it this way
mapInstance.queryRenderedFeatures({
layers: ['seat'],
filter: ["==", ["get", "id"] ,"GMYTEORRGI5DQ"]
});
Update:
To fitler on id/promoteId
mapInstance.queryRenderedFeatures({
layers: ['seat'],
filter: ['==', 'id', 'GMYTEORRGI5DQ']
})
https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#id
I am trying to change the color of a marker which is a circle, that is being painted using the paint property on a layer.
Following this tutorial:
https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/
I have set the circle-color to be dependent of a feature-state:
map.addLayer({
id: "singles",
type: "circle",
source: "users",
filter: ["!has", "point_count"],
paint: {
'circle-radius': {
'base': 10,
'stops': [[5, 20], [15, 500]]
},
'circle-color': ["case",
["boolean", ["feature-state", "hover"], false],
'#ddffc8',
'#ff0000'
],
}
});
Then when somebody hovers over a sidebar, I want to update the feature-state and change the color:
function highlightMarkersOnHoverOnSidebar (markers, map) {
let marks = markers
Array.from(document.querySelectorAll('.sideBarItems')).map( (x, i) => {
x.addEventListener('mouseenter', function(){
map.setFeatureState({source: 'users', id: marks.features[i].properties.id}, { hover: true});
}, false)
x.addEventListener('mouseleave', function(){
map.setFeatureState({source: 'users', id: marks.features[i].properties.id}, { hover: false});
}, false)
})
}
However, nothing happens when i hover the sidebar element.. and it doesnt even throw an error.
Is there anything im missing? thanks.
I also run into this issue.
It seems like you need an id at the feature level in your geojson. Not in the properties:
{
"type": "FeatureCollection",
"features": [
{
"id": 4459,
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
8.64543,
50.163105
]
},
"properties": {
"id": "NOT HERE",
"name": "Test",
"foo": "bar",
}
}
]
}
Moving the id to the feature solved the issue.
Are you using featureCollection in geoJson? That caused some problems for me.
Moving from D3 to Highcharts and this is eluding me. I have a fairly complex object that contains a clickthrough object which needs to be accessed in a function on a point click in the series. I'm creating the series array with the data and name just fine with a small conversion, but I need to attach this object to the data points as well. No idea how.
Quick example. original data:
[
{
"key": "Super Cool Thing",
"format": ".2f",
"values": [
{
"label": "01",
"value": 9.5,
"format": ".2f",
"order": 0,
"tooltip": "numerator = 133, denominator = 14",
"clickthrough": {
"output_format": "json",
"metrics": "",
"options": {
"columns": [
{
"order": 1,
"display_as": "Brand",
"format": "{0}",
"name": "brand",
"data_type": "string"
},
{
"order": 2,
"display_as": "Last Submit Time (Month)",
"format": "%m",
"name": "last-submit-time-month",
"data_type": "datetime"
},
{
"order": 3,
"display_as": "Agent Things",
"format": "{0}",
"name": "agent-thing-values",
"data_type": "string"
}
]
},
"cut_y": "brand",
"type": "",
"filter": { },
"cut_x": "last-submit-time-month"
},
"metrics": [
{
"name": "Agent - Feel Appreciated Mean",
"slug": "qcustomersatr4-mean"
}
]
}
]
}
]
run through a (super quick POC) funct:
for(let i = 0; i < data.length; i++){
var values = [];
var xcuts = [];
data[i].values.forEach(val => {
values.push(val.value);
xcuts.push(val.label);
});
chart.addSeries({
name: data[i].key,
data: values
})
chart.xAxis[0].setCategories(xcuts);
}
and this all works fine. But I need the clickthrough object so I can do something like:
plotOptions: {
series: {
allowPointSelect: true,
cursor: 'pointer',
point: {
events: {
click: function (event) {
console.log('CLICKTHROUGH DATA HERE');
console.log(event.point);
}
}
}
},
},
I'm unsure how to format the series data to include additional data that's accessible in an event function later down the line. I currently do this via d3 and it's fine, but am struggling with the Highcharts method to do the same. It seems I can't just add whatever I want to the series or data, so is this possible?
Have it. I have to set the y value explicitly and then I can add whatever else which is then avail in the event.
example:
data[i].values.forEach(val => {
values.push({link: val.clickthrough, y:val.value});
xcuts.push(val.label);
});
chart.addSeries({
name: data[i].key,
data: values
})
I am placing markers by pulling coordinates from a MSSQL database.
I would like to make the markers (circles) a different color (red [#ff0000] or blue [#0000FF] depending on another variable in the database, but all the markers are brown (see source, link below).
here is an example:
map.addSource("markers", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-98.00371, 38.65447]
},
"properties": {
"description": "<strong>UTEP 5560</strong>
<p>Ellsworth Co., Kansas: 38.65447, -98.00371: : JOHNSON, JD</p>",
"marker-size": "small",
"marker-color": "#0000ff",
"marker-symbol": "circle"
}
},....
map.addLayer({
"id": "markers",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "{marker-symbol}-11",
"icon-allow-overlap": true,
"text-field": "{title}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});
The full source code can be viewed here: http://webapps.fhsu.edu/ksfaunatest/account.aspx?o=33&t=75
You have to use the mapbox circle layer instead of marker layer, With that you can do data driven styling and give colors based on the 'mytype' property in the geojson
Below is the sample of the circle layer
map.addLayer({
'id': 'mapid',
'type': 'circle',
'source': source,
'paint': {
'circle-radius': 2,
'circle-color': {
property: 'mytype', // geojson property based on which you want too change the color
type: 'categorical',
stops: [
['type1', '#fbb03b'],
['type2', '#223b53'],
['type3', '#e55e5e']
}
});
Visit this link for a live example
The answer above uses the categorical layer property where you can color your circles depending on e.g. the category by using different stops.
I guess you just want to use a color that you define in the geojson feature properties. Then you could use the layers identity property like this:
map.addLayer({
id: 'layerId',
source: 'sourceName',
type: 'circle',
paint: {
'circle-radius': 2,
'circle-color': {
type: 'identity',
property: 'marker-color',
},
},
});
Also see: https://www.mapbox.com/mapbox-gl-js/style-spec/#function-type
I have a Highstock.js chart implemented in Angular. I'm trying to have multiple zoom options for the user, with one of them selected by default. I define the buttons, I indicate which one should be selected by default (by providing index of the button), but it only works when the "xAxis" field is not present in the configuration JS object.
$scope.chartConfig = {
"useHighStocks":true,
/*
the line below prevents the rangeSelector from selecting
a custom time frame option in spite of correct configuration
*/
"xAxis": {},
"options":{
"rangeSelector": {
"allButtonsEnabled": true,
"enabled": true,
"selected": 1,
"buttons": [{
"type": 'month',
"count": 1,
"text": '1m'
}, {
"type": 'month',
"count": 3,
"text": '3m'
}]
}
...
How can I have both xAxis and custom zoom selection in the chart?
Here's the Fiddle, please try commenting / uncommenting the xAxis line and running the code.
Fiddle: http://jsfiddle.net/11zqLnh3/
Have you tried to put your xAxis object inside options? It looks like it will work just fine in this case:
"options":{
"xAxis": {}, // try commenting this line
"rangeSelector": {
"allButtonsEnabled": true,
"enabled": true,
"selected": 1,
"buttons": [{
"type": 'month',
"count": 1,
"text": '1m'
}, {
"type": 'month',
"count": 3,
"text": '3m'
}]
},
},
Look at this example:
http://jsfiddle.net/11zqLnh3/1/