We Keep Coding

How to change the style of a feature collection in leaflet?

I was looking at the choropleth example.
https://leafletjs.com/examples/choropleth/
This is the data source they use
{
"type": "Feature",
"properties": {
"name": "Alabama",
"density": 94.65
},
"geometry": ...
...
}
My dataset is a feature collection of polygons so it looks like
{
"type": "Feature Collection",
"Features": [
{
"type": "Feature",
"properties": {
"name": "Alabama",
"density": 94.65
},
"geometry": ...
...
},
{
"type": "Feature",
"properties": {
"name": "Ohio",
"density": 99.65
},
"geometry": ...
...
},
}
Anyway so its an array so when i make my style function I use
const finalLayer = L.geoJSON(currentLayer.layer, {
style: {this.styleData(currentLayer.layer)}
});
this.currentProjectLayers.push(finalLayer);
finalLayer.addTo(this.map);
getColor(data) {
return data > 1000000 ? '#800026' :
data > 800000 ? '#BD0026' :
data > 600000 ? '#E31A1C' :
data > 400000 ? '#FC4E2A' :
data > 200000 ? '#FD8D3C' :
'#FEB24C';
}
styleData(feature) {
return {
fillColor: this.getColor(feature.features[0].properties.totalHH),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}
Obviously i don't want to use 0 as the index. When I use the index it colors them all according to the index of the one spot. I know how to do a forEach but I don't think that will work. I need to do the style in an onEachFeature i think.... But can I apply the style using OnEachFeature.. how would I do that?

You are probably trying to work around an issue that does not exist.
Although that may not be explicit, Leaflet GeoJSON factory also parses GeoJSON Feature Collection, as if it were directly an array of Features. As such, each of those Features will be modified by the style option, which receives as argument the Feature data:
L.geoJSON(geojsonFeatureCollectionObject, {
style: function (featureObject) {
return {
fill: featureObject.properties.totalHH
};
}
});

mapbox: disable one feature rendering

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/ ]

Attach object to Highcharts click event

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
})

Mapbox marker symbol color change

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

Symbolize line based on attributes

I am trying to use PolyLineDecorator with Leaflet but I've hit a snag that I can't figure out even forgoing PolyLineDecorator when it comes to symbolizing a path/line based on attribute data.
var polyline = L.polyline([...]).addTo(map);
var decorator = L.polylineDecorator(polyline, {
patterns: [
// defines a pattern of 10px-wide dashes, repeated every 20px on the line
{offset: 0, repeat: 20, symbol: L.Symbol.dash({pixelSize: 10})}
]
}).addTo(map);
Works great for me however, I have 20 lines in a single GeoJSON file and i'd like to symbolize the lines based on the Name field in the JSON file. I can't seem to find an example anywhere covering this. Can someone point me to any relevant examples or documentation? I feel like there has to be a way vs exporting each line as its own GeoJSON file.
Thanks for any help.

You should use GeoJson onEachFeature() method for this. Let's asume that your geoJson structure is:
var geojsonFeatures = [
{
"type": "Feature",
"properties": {
"name": "Trail 1",
},
"geometry": {
"type": "Point",
"coordinates": [-104.99404, 39.75621]
}
},
{
"type": "Feature",
"properties": {
"name": "Trail 2",
},
"geometry": {
"type": "Point",
"coordinates": [-104.99404, 39.75621]
}
}
];
You can access feature's name properties by feature.properties.name:
L.geoJson(geojsonFeature, {
onEachFeature: function (feature, layer) {
if (feature.properties.name === '') {
L.polylineDecorator(layer, {
patterns: [
{offset: 0, repeat: 20, symbol: L.Symbol.dash({pixelSize: 10})}
]
}).addTo(map);
} else {
L.polylineDecorator(layer, {
patterns: [
{offset: 0, repeat: 30, symbol: L.Symbol.dash({pixelSize: 20})}
]
}).addTo(map);
}
})
})