search

TransforMap / transformap-viewer

https://viewer.transformap.co/
Do What The F*ck You Want To Public License
10 stars 16 forks source link

Icons for the main filter categories #34

Closed josefkreitmayer closed 7 years ago

josefkreitmayer commented 7 years ago

@paulovieira from https://github.com/paulovieira/rede-convergir-3 was so nice to share the source of their wonderful free icons with us yesterday in the ETL call.

When we have some time, we could have a look, which would be a good match for the main filter-categories in the SUSY-Map: https://mapicons.mapsmarker.com/

josefkreitmayer commented 7 years ago

@species here the source of the icons: https://mapicons.mapsmarker.com/

The icons come directly with the map-marker. They have a size of 32x37 and do not need any further processing for the graphics, than plug and play with the respective categories. All of them are from one design, and would fit to each other perfectly.

I searched for other map icons libraries, that fulfill your requirement of 48x48px or vector, and the results are

josefkreitmayer commented 7 years ago

Please, let´s just start with https://mapicons.mapsmarker.com/

all the other options that came up are a nightmare to search, and do not come as a readymade marker.

paulovieira commented 7 years ago

One detail: in Leaflet you'll probably have to adjust the offset values when creating L.Icon instances, otherwise the tip of the icon (in the bottom) won't be in the correct place.

To make sure it is in the correct spot: draw both the icon and a small circle marker in the same point. The tip should be exactly in the center of the circle.

As for other map icons collections, there's also a good one from mapbox: https://www.mapbox.com/maki-icons/

species commented 7 years ago

Uh, In my opinion the mapsmarker icons are super-ugly. They look that they are really drawn manually pixel-by pixel with no anti-aliasing :-/ So they won't be able to scale, and the result will look horrible on any HD screen.

They require that we display the license "CC-BY-SA 3.0 Maps Icons Collection https://mapicons.mapsmarker.com" somewhere on the map.

In contrast, the maki Icons are available as SVG and under a CC-0 license, which requires no attribution.

josefkreitmayer commented 7 years ago

Here a collection of possible specifications for the Icons for the SUSY-map:

colours:

dark blue: #212f4f turquois: #95d5d2 yellow: #ffdd00 orange: #ffc20a

Categories ; Icon ; Icon-Link

josefkreitmayer commented 7 years ago

food_agriculture_plain_blue food_agriculture_bubble_blue_invers food_agriculture_turquoise_plain food_agriculture_turquoise_invers_bubble food_agriculture_yellow_plain food_agriculture_yellow_invers_bubble food_agriculture_orange_plain food_agriculture_orange_invert_bubble

josefkreitmayer commented 7 years ago

I like turquoise and yellow the most.

Fair Trade: world_turquoise_invert_bubble world_turquoise_plain world_yellow_invert_bubble world_yellow_plain

species commented 7 years ago

I've tried the Icons you committed in a fork, view it here: https://susy-mapviewer.github.io/transformap-viewer/#6/48.122/15.436

A question arised: How to handle multiple categories per item? A lot of items have more than one type_of_initiative set, which results in more than one category. Currently it chooses the last one set, which is like random. This results in different icons displayed if you click a category to filter items only from one category.

josefkreitmayer commented 7 years ago

I will download and provide all items in yellow and turquoise with the colour starting in the naming, and the name of the category.

josefkreitmayer commented 7 years ago

@species I uploaded the files in yellow and turquoise. Would try yellow first.

The files are named:

colour_filter_category.png

species commented 7 years ago

The turquoise ones are much better, the yellow ones looked too similar to the cluster colors.

see here: https://susy-mapviewer.github.io/transformap-viewer/#5/50.750/18.369

josefkreitmayer commented 7 years ago

top!