How to change the size of an icon and add the icon to legend in a GeoJSONView

🚀 Support (Q&A)
1

Hi!

In a GeoJSONView, I have added Points to a GeoJSON as follows:

shape['features'].append({
                        'geometry': {'coordinates': [row['longitude'], row['latitude']], 'type': 'Point'},
                        'properties': {'marker-color': '#FFBF00',
                                       'description': description,
                                       'icon': icon},
                        'type': 'Feature'})

where icon can be equal to a square, a circle or triangle.

I’m trying to change the size of the icons, since they appear quite big on the map. I cannot find anything about it in the documentation.

Also, I want to add a legend, to explain the different icons and colors. In the documentation, it looks like I can only explain colors with MapLegend. Is this true?

2

Hi Marlies,

It’s currently not possible to set a specific size for the icon, only for labels on the map. Is this something that is limiting for you? Can you give me some more background about what it is you want to do that you currently cannot? The icon scales with zoomlevel. Perhaps you can try some different icons, open and/or closed versions of icons etc. to get your desired result.

For a legend you can indeed use a MapLegend, is there anything you need to do with the legend that you cannot?

3

Hi!

We want to show some recently sold houses on a plot, with different icons per type of house (so rent/sale and ground bound/ stacked). But there can be a lot of houses in a certain city for instance, which results in a very messy view. Ideally, we of course want to group the icons, when there are too many in one area (like you also see on the map of Funda), but I suppose that is a step too far for now.

For the legend, we want to explain the icons, so ‘square’ = ground bound properties and ‘traingle’ = stacked properties. But this seems to be impossible, since you can only explain colors in de MapLegend instead of icons.

plot.PNG
plot.PNG1267×888 161 KB

4

Hi Marlies,

The resulting view you posted is indeed a cluttered, I can imagine it not being the desired result. As an alternative, I think it might be possible to build something that is more useful using a slightly different flow. Bear in mind that I am only trying to generate some ideas here, I don’t really know if these options will be useful to you. So, in no particular order:

  • Perhaps the user should go to the desired zoomlevel, and then draw an area on the map in which the icons should be shown. You could use the GeoPolygon to get the coordinates of an area drawn by the user, and then only show icons within that region
  • You could try to get the “grouping” as you call it by determining the distance between a point and it’s neighbors, then grouping if that distance is too small. Perhaps give the user a “Refine” ToggleButton to switch that on and off
  • You could first draw a GeoPolygon per property-type, in different colors. Using the MapView interaction see this link you could then let the user select one or more polygons at a time and draw the icons falling inside that polygon.

I think you can still make use of the legend, albeit with a small workaround:

  • You can color code the icons, e.g. green square = ground bound properties, red triangle = stacked properties. Then the colors would already distinguish the icons.
  • Furthermore: you are free to use unicode symbols in the legend. E.g.: u25B2 is the unicode for a black triangle pointing up (see this link for examples). So you could do something like:
legend = MapLegend([
        (Color.red(), "(\u25B2) (red) stacked property")
])

An example of this is:
image

Hope this helps!

5

The GeoJSON spec allows for setting a marker-size property on the feature. The value has to be one of small, medium or large.

2 Likes
6

Thank you very much Raoul. That’s really helpfull!

Would you consider adding it to the documentation here:
GeoJSONResult

After reading about it in the community, I have found it here:
Styling the map elements - simplestyle-spec GeoJSON properties

which is of course a logical place, but the good old SDK Reference page is my “go to” page. So I would appreciate it if it is also added there (of course if it’s not too much trouble)!

Thank you!