Icons for main Categories

[wellemut]

Problem

To show only pins make the map look quite nice and calm but makes it hard to differentiate, what is on the map. In fact, people need a lot of time to finde a specific need, if they don't use the search function or if they don't know the corresponding tag. Sometimes it is also hard if you don't know what to search for.

Thanks to kartevonmorgen/kartevonmorgen#364 and kartevonmorgen/kartevonmorgen#776 we can show something like a legend and an easy way to filter. (Doku: https://blog.vonmorgen.org/kategorieauswahl/) But it is optically very poor, as it is only text. And on the map you do not have a fast impression of the kind of entry

Solutions:

First Step 2024:

• [ ] Show standard Icons based on a defined tag in a csv file

• Good, simple Icons:

  • We can use the Icon-Set of the Open Greenmap on our plattform. https://docs.google.com/spreadsheets/d/1MaTRhu7W6FkWTNBH12ntKU4FM57mou63zN_w4r5K5No/edit#gid=0
  • Folder with SVG Icons: https://nextcloud.wechange.de/index.php/f/257819 (kvm-cloud)
  • https://react-icons.github.io/react-icons/

• [ ] Define which Icon is shown via Tags, which you can choose in the dynamic_colors.csv (#364 and kartevonmorgen/kartevonmorgen#776) You have to upload the icons to the folder where the categories.csv is stored. In colum H of the categories csv you than can define the ~~name URL of the icon, you want to show for the category. ( https://github.com/kartevonmorgen/kartevonmorgen/issues/804#issuecomment-894256409)~~

  • [ ] show the icon in the middle of the corresponding pin

Second Step

• show each icon in the dropdown beside the corresponding category
• and a clear, small legend of maximum 10 - 20 Topics could help

Third Step

• Advanced option
  • make a switch in the categories-csv-file if you are using font awsom or giving the direct URL to an svg.
  • Example of the csv: https://nextcloud.wechange.de/s/gJWLfksfmX7xBqm

Good Examples

• Similar to that map https://www.smarticular.net/verzeichnis/
• Hier ist auch ein super Filtersystem: http://klimaschutzkarte.de/

Related issues

Make Pin colour adjustable https://github.com/kartevonmorgen/kartevonmorgen.ts/issues/5 Those Icons could be individual definable in iframes: https://github.com/kartevonmorgen/kartevonmorgen/issues/372 https://trello.com/c/kajWf0zI/352-hochschule-geisenheim-university

[wellemut]

Oder Oikos-Icons könnten wir auch nehmen: https://ecomap.global/karte-hamburg/

[wellemut]

We can download greenmap-icons here: https://drive.google.com/open?id=0B_t0LFHnCbFMdkdxY0FUOUVBVTA and here https://app.box.com/s/jva1kruu90jc38sei48j5s2b5z2wmxwe where I have shared them

[wellemut]

Agreement of Greenmap

---------- Weitergeleitete Nachricht ---------- Von: Wendy Brawer web@greenmap.org Datum: Dienstag, 7. November 2017 Betreff: [GreenMap] Important Green Map update!! Please read! An: Helmut Wolman helmut@bildungsagenten.com Cc: Manuel Hartmann manuel.hartmann3@gmx.net, Thao Tran tthao.tran13@gmail.com, David Ziegler david@slowtec.de

hello Helmut and colleagues, your platform is looking good, and you can use Green Map Icons, please see the CC license we choose after a long discussion. Happy to learn more about how you define what belongs on this future looking map!

all the best, Wendy

Wendy E Brawer

Director of Green Map System +1 212 674 1631 web@greenmap.org

On Nov 5, 2017, at 7:15 PM, Helmut Wolman helmut@bildungsagenten.com wrote:

Dear Wendy

Thanks for your notice about your new plattform-cooperations.

I am just curios, how many german Mapping-initiatives might be looking for a new Mapping tool. As our kartevonmorgen.org is growing more and more we would like to gather different initiatives around it. Just our english version is still needing some time, what makes it complicated globally.

https://www.kartevonmorgen.org/#/?center=51.4814,9.8877&zoom=6

Also the icons are still missing, which is a feature also needed as soon as we start printing maps.

Good-Luck!

Helmut

[wellemut]

• Define URLs to each icon via categories.csv from kartevonmorgen/kartevonmorgen#776
• Create lookup-table while loading the map with all icons
• show each icon depending on the used tags instead of the normal green pin

Future Step

• if several icons match the tags, show first the most used one but when zooming in, open a cycle-menü which shows all possibel icons (There is even a nicer style when icons
  • show each icon in the dropdown beside the corresponding category

Optionally additional

• replace the rating flower by icons
• Add the icons on the entry detail right below the title

[viktoriabakun]

I'll take this task

[navid-kalaei]

@wellemut some categories are assigned with multiple tags. for example "karte von morge" has kartevonmorgen kvm regpis thempis ideenhochdrei pioneersofchange pocsummit should the front end render icon for the first matching token kartevonmorgen or for all of the tags?

[wellemut]

if an entry has at least one matching tag, the corresponding icon shall be shown!

[wellemut]

if an entry as two matching tags for different icons, it will only show the icon of the first one.

[navid-kalaei]

if an entry has at least one matching tag, the corresponding icon shall be shown!

what happens to the other tags? for example "karte von morgen" has "kvm" and "kartevonmorgen" should both tags get the icon? or i have misunderstood?

[wellemut]

if you found the first matching tag, your icon for this entry is defined. Dont look, if there are more matching tags.

In the future, we might have "mainTags", that are more relevant than others. https://github.com/kartevonmorgen/kartevonmorgen/issues/834 But for now, just take the first you find.

[navid-kalaei]

@viktoriabakun asks me whether the icons and the pins are in one svg or we will have two layers one for the actual pin and one for the icon inside. I would strongly recommend to make them separate because in case of customizations like renn we'll need to change the color of pin without affecting the icon inside. what do you think @wellemut

and from where they can have the url of the icons?

[wellemut]

categories.csv

this file contains categories and Icon-URLS

[wellemut]

This seems to be working really nicely! @viktoriabakun

Is it based on the categories.csv or hardcoded? If this is done like this, you can merge it to the kvm-code as well @navid-kalaei

[wellemut]

Markers gemeldet, mit dem die Trinkbrunnen auf der Karte von morgen markiert werden sollen, die zur EURO 2024 gebaut werden sollen

@navid-kalaei could you please estimate what this feature would need?

[wellemut]

@navid-kalaei here is another Network with a similar request.

But their Icons are rather pictures, so they should be much larger. Making it possible to set the size of these png or svg, maybe in relation to the zoom level, would be relevant.

[wellemut]

Icon = 16x16px good examples: https://react-icons.github.io/react-icons/

[wellemut]

0. Hashtags festelgen
1. Einträge kartien
   • mit Haupt-Hashtag #hs-geisenheim
   • Subhashtags nach Handlungsfeldern ...
2. Grafiken hochladen und Bild-adressen bei Einträgen hinterlegen.
3. Karte auf HS Seite einbetten https://www.hs-geisenheim.de/hochschule/organisation/administrative-einheiten/hochschulentwicklung-und-nachhaltigkeit/?L=0 4. Einfache Icons auf Pin 16x16 px
4. Großen Grafiken ab zoom 16 mit 500px
5. Farb-Legende anzeigen?

[wellemut]

@navid-kalaei please start to implement the simplest possible solution.

• simple icons on pins
• defined by hashtags in url

[navid-kalaei]

@wellemut the feature is ready for testing on the dev domain:

https://dev.kartevonmorgen.org/m/main?c=50.1284%2C8.6468&z=13.00&mapColorMode=gray&search=refill

[wellemut]

The Icons are very small but beautiful! (the useres should use even more simplier icons)

Bug;

• [ ] Changing from on point to the next, without going back to the search result list, does not change the highlited pin.

[wellemut]

https://github.com/kartevonmorgen/kartevonmorgen.ts/blob/develop/public/projects/main/pins/dynamic_icons.csv Icon-Name from https://react-icons.github.io/react-icons/

Not any icon can be just used, but we have to import it to our repo in https://github.com/kartevonmorgen/kartevonmorgen.ts/blob/develop/components/MapMarkerIcon.tsx and deploy a new version.

[wellemut]

I started to describe the feature in the wiki: https://github.com/kartevonmorgen/kartevonmorgen.ts/wiki/Customization#icons