GeoJSON and properties

Teddy Brask-Andersen

unread,

Jul 28, 2019, 3:27:27 AM7/28/19

to MIT App Inventor Forum

Hi, Trying to setup a map with FeatureCollection.FeaturesFromGeoJSON using this string:

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"stroke":"#555555","stroke-width":2,"stroke-opacity":1,"fill":"#90f900","fill-opacity":0.1},"geometry":{"type":"Polygon","coordinates":[[[12.190533198765593,55.4503204366878],[12.190538563183623,55.44988843170206],[12.19134859030612,55.44988538939668],[12.19134859030612,55.45035085939582],[12.190533198765593,55.4503204366878]]]},"properties":{"fill":"#00FF00","fill-opacity":0.3}},{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[12.189471043995695,55.45021699930504],[12.189492501667814,55.44987322017269],[12.190157689503508,55.449894516312185],[12.190168418339567,55.45023829525897],[12.189471043995695,55.45021699930504]]]},"properties":{"fill-opacity":0.2}}]}

I was expecting two boxes one transparent but get two solid boxes. It's like the properties for the feature isn't applying correctly?

Tested the GeoJSON on GEOJSON.IO with the correct result.

What could be wrong in my setup?

blocks.png

GeoJsonTest.aia

SteveJG

unread,

Jul 28, 2019, 10:54:37 AM7/28/19

to MIT App Inventor Forum

FeatureCollection cannot handle all geojason directions. Evidently you discovered one. MIT has been informed. They may pr might not be able tp provide that ability.

Regards
Steve

Teddy Brask-Andersen

unread,

Jul 29, 2019, 3:29:41 AM7/29/19

to MIT App Inventor Forum

ok, thanks.

SteveJG

unread,

Jul 29, 2019, 8:33:24 AM7/29/19

to MIT App Inventor Forum

To get around this limitation why not use two Polygons using the coordinates you use in the FeatureCollection. Set one Polygon. to be solid filled and the other to merely show its outline?

Evan Patton

unread,

Jul 30, 2019, 2:32:49 PM7/30/19

to MIT App Inventor Forum

I've filed an issue for us to add support for fill-opacity and stroke-opacity. A potential workaround would be to include the alpha channel in the fill property as we do allow for ARGB values here, e.g., #80FFFFFF will represent white with 50% opacity.

Regards,

Evan

Teddy Brask-Andersen

unread,

Jul 30, 2019, 4:41:45 PM7/30/19

to MIT App Inventor Forum

Tested that, but GeoJson does not support alpha channel in the color field.

Did a test on geojson.io and app inventor.

Geojson.io showed the wrong color, and app inventor just a solid color.

Br, Teddy

Evan Patton

unread,

Aug 1, 2019, 2:46:06 PM8/1/19

to MIT App Inventor Forum

Interesting. A read through the code I wrote suggests that this should work. Can you send me a sample project that fails so I can test it?

Regards,

Evan

Teddy Brask-Andersen

unread,

Aug 3, 2019, 9:52:07 AM8/3/19

to MIT App Inventor Forum

Hi Evan,

Sorry, it looks like it works in away.

FeaturesFromGeoJSON is actually loading correctly with transparency added using the alpha channel in the color code.

I tried to change from solid to transparent and that you can't.

It seems that with each call of FeaturesFromGeoJSON, another set of features is added instead of replacing/modifying those already active.
Is there a way to change/delete Features loaded with FeaturesFromGeoJSON. Because otherwise, it is a form of a permanent structure.

I have added my test aia file. (GeoJsonTest (1).aia).

For example, try pressing the button repeatedly and note that the hidden opacity disappears.

Bless

Teddy, Denmark

GeoJsonTest (1).aia

SteveJG

unread,

Aug 3, 2019, 10:26:34 AM8/3/19

to MIT App Inventor Forum

Try this Teddy

Regards,

Steve

SteveJG

unread,

Aug 3, 2019, 10:34:18 AM8/3/19

to MIT App Inventor Forum

...and the following code is significantly more stable

Try it. Is this change more stable?

Teddy Brask-Andersen

unread,

Aug 3, 2019, 11:05:34 AM8/3/19

to MIT App Inventor Forum

Hi Steve & Evan,

Thanks for your suggestion. It works!

Steve: Your first line was the missing link :o)

All works fine now also in my main app. Great!

Regards

Teddy :o)

Reply all

Reply to author

Forward