Hi
It seems the styleOptions of geoJSON layer in map component doesn't work at all.
Thanks for reporting this issue. Currently the styleOptions at the root level will apply all of the Features in a FeatureCollection only if they have a styleOptions object. It’s a bug we’re aware of and would like to resolve. However, it may take some time until this gets worked on. We apologize for any inconvenience this may cause you.
In the meantime, you can try adding the styleOptions property to each of the Features in the “features” array as a temporary solution. The picture below gives a demonstration of how the root styleOptions is applied.
Please let me know if that works for you.
3 Likes
Thanks this will solve my problem for the moment.
This workaround does not work with Point type geometry and when rendering a marker as an icon. I tried adding a styleOptions object to the feature, marker, and icon objects at all possible level combinations with no success. The only way (that I have found) to alter the marker icons is through the map components style property by setting the fill property which sets the color globally on the map. I need the color to vary between features based on user-selected filters.
Is there another workaround for this issue?
Ignition version 8.1.27
geoJSON object:
{
"styleOptions": {
"stroke": true,
"color": "#9A00FB",
"weight": 2,
"opacity": 1,
"lineCap": "inherit",
"lineJoin": "inherit",
"dashArray": "",
"dashOffset": "",
"fill": true,
"fillColor": "#F1BE00",
"fillOpacity": 1,
"fillRule": "inherit",
"interactive": true
},
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-121.16945743560791,
38.6632293081453
]
},
"marker": {
"icon": {
"size": {
"width": 100,
"height": 100
},
"path": "material/location_on"
},
"tooltip": {
"content": {
"text": "Some text"
}
}
},
"styleOptions": {}
},
{
"type": "Feature",
"properties": {
"stroke": "#c7170a"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
-121.14997386932373,
38.655488159953
],
[
-121.15048885345459,
38.655689239321134
],
[
-121.15031719207764,
38.65699624145518
],
[
-121.14920139312744,
38.65699624145518
],
[
-121.14877223968504,
38.65816917178303
],
[
-121.14551067352294,
38.658135659754485
],
[
-121.14551067352294,
38.655521673220235
],
[
-121.14684104919432,
38.65434869953815
],
[
-121.14834308624268,
38.6554546466701
],
[
-121.14975929260254,
38.655521673220235
],
[
-121.14817142486571,
38.6554546466701
]
]
},
"styleOptions": {}
},
{
"type": "Feature",
"properties": {
"stroke": "#0f3df5"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
-121.16469383239745,
38.66983040550309
],
[
-121.16443634033203,
38.670265989507826
],
[
-121.16044521331787,
38.66895922954322
],
[
-121.15975856781006,
38.66755192290758
],
[
-121.15967273712158,
38.666580195039295
],
[
-121.16053104400635,
38.66490477119321
],
[
-121.16224765777588,
38.665005297729465
],
[
-121.16340637207033,
38.66580950493899
],
[
-121.16310596466064,
38.66664721117775
],
[
-121.16383552551268,
38.66684825921672
],
[
-121.16336345672606,
38.66785349094385
],
[
-121.16293430328369,
38.66781998344699
],
[
-121.16284847259521,
38.66889221556877
],
[
-121.16482257843018,
38.669662872487926
]
]
},
"styleOptions": {
"color": "#0f3df5"
}
},
{
"type": "Feature",
"properties": {
"fill-opacity": 0.5,
"stroke": "#000000",
"fill": "#189183"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-121.17366313934326,
38.65706326656277
],
[
-121.17001533508302,
38.65706326656277
],
[
-121.17001533508302,
38.659844753217264
],
[
-121.17366313934326,
38.659844753217264
],
[
-121.17366313934326,
38.65706326656277
]
]
]
},
"styleOptions": {
"color": "#000000",
"fillColor": "#189183",
"fill": true,
"fillOpacity": 0.5
}
}
]
}
