organicmaps/organicmaps-tmp

Archived

Fork 1

Icons: inconsistent color palette #7268

New issue

Open

opened 2024-01-28 23:24:23 +00:00 by euf · 0 comments

euf commented

2024-01-28 23:24:23 +00:00

(Migrated from github.com)

Context

To further examine inconsistencies in icons design after #4017 and #7195, I extracted colors from SVGs to count their frequencies.

Rarely used colors may be added by mistake, and these icons should be redrawn to match the palette.
This research helps to visualize current palette, document it, and make further design choices.

Suggested actions

Examine possibility to bring down variations of similar colors: e.g. do we need those different shades of gray? should we settle on a single red for speedcam-alert and railway-crossing?
After reducing palette by removing unnecessary colors write down remaining ones for further icon designs, so that both light and dark styles have simple guidelines describing color choices depending on icon meaning
In the distant future, consider adjusting the palette together with adjusting map colors for better visual impression overall

As usual, comments and discussion is welcome @organicmaps/design!

⚠️ UPD: These findings reflect state of things as of 10 June 2024 after #7258 and #7548 by @dvdmrtnz. Tables below should be regenerated once again if the icons are updated.

style-clear

color	count	icons
`#555555`	1	dot-m
`#f51e30`	1	speedcam-alert-l
`#444444`	1	transfer_arrow
`#c81e17`	2	railway-crossing-l, railway-crossing-m
`#000003`	3	star-l, star-m, star-s
`#4e7c90`	4	parking_entrance_private-m, parking_private-m, …
`#000000`	4	skateboard-m, speedcam-m, speedcam-s, volleyball-m
`#eeeedd`	5	dot-m, ford-m, star-l, star-m, star-s
`#bb9342`	8	bar-m, beer-m, cafe-m, fastfood-m, ice_cream-m, …
`#14a0c2`	9	drinking-water-m, drinking-water-s, ford-m, fountain-m, …
`#664e42`	10	alpine_hut-m, alpine_hut-s, apartment-m, campsite-m, …
`#2e89b0`	10	bicycle-parking-m, motorcycle-parking-m, …
`#507f34`	11	garden-m, garden-outline-m, npark-m, nparkf-m, …
`#2f6499`	16	airport-m, airport-s, bicycle-rental, bus-m, bus-s, …
`#c15746`	19	alternative-m, assembly_point-m, audiologist-m, …
`#7f5933`	64	aircraft-m, anchor-m, animal-m, aquarium-m, arcade-m, …
`#8c5f93`	79	alcohol-m, antiques-m, art-m, auction-m, bakery-m, …
`#717065`	141	airport_gate-m, america-football-m, archery-m, arrow-m, …
`#ffffff`	263	airport_gate-m, airport-m, airport-s, alcohol-m, …

style-night

color	count	icons
`#f51e30`	1	speedcam-alert-l
`#444444`	1	transfer_arrow
`#c81e17`	2	railway-crossing-l, railway-crossing-m
`#000003`	3	star-l, star-m, star-s
`#eeeedd`	3	star-l, star-m, star-s
`#4e7c90`	4	parking_entrance_private-m, parking_private-m, …
`#bb9342`	8	bar-m, beer-m, cafe-m, fastfood-m, ice_cream-m, …
`#14a0c2`	9	drinking-water-m, drinking-water-s, ford-m, fountain-m, …
`#664e42`	10	alpine_hut-m, alpine_hut-s, apartment-m, campsite-m, …
`#2e89b0`	10	bicycle-parking-m, motorcycle-parking-m, …
`#507f34`	11	garden-m, garden-outline-m, npark-m, nparkf-m, …
`#2f6499`	16	airport-m, airport-s, bicycle-rental, bus-m, bus-s, …
`#ffffff`	16	arrow-m, arrow-s, arrow-xs, hotel-s, npark-m, …
`#c15746`	19	alternative-m, assembly_point-m, audiologist-m, …
`#111111`	21	bicycle-parking-m, garden-outline-m, motorcycle-parking-m, …
`#7f5933`	44	aquarium-m, arcade-m, buddhist-m, buddhist-s, casino-m, …
`#717065`	69	aircraft-m, airport_gate-m, anchor-m, animal-m, …
`#8c5f93`	79	alcohol-m, antiques-m, art-m, auction-m, bakery-m, …
`#777777`	91	america-football-m, archery-m, australian-football-m, …
`#000000`	224	airport_gate-m, airport-m, airport-s, alcohol-m, …

Extras

These two tables were generated with R script, which

greps all hex-coded colors from every SVG file
normalizes them to be lowercase and 6-digits
excludes all of the subway and light rail icons
counts the number of files with each color
pretty-prints the markdown output

Here is the script for reproducibility:



library(tidyverse)

style <- "light"
# style <- "dark"

setwd(paste0(
  "~/organicmaps/data/styles/default/", style, "/symbols/"))

strings <- system('grep -oE "#[0-9A-Fa-f]{3,6}" *.svg | sort', intern = T) %>% 
  gsub(":", ",", .) %>% 
  gsub(".svg", "", .)
strings <- c("icon, color", strings)
csv <- paste(strings, collapse = "\n")

x1 <- read_csv(csv)
x1$color <- tolower(x1$color)
x1$color <- ifelse(nchar(x1$color) == 4,
                   str_replace(x1$color, 
                        "#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])",
                        "#\\1\\1\\2\\2\\3\\3"),
                   x1$color)
                   
x1$transport <- grepl("subway-", x1$icon) | grepl("light.*rail", x1$icon)

pick <- function(x) {
  x <- unique(x)
  if(length(x) <= 3) {
    x
  } else {
    len <- length(x)
    sort(unique(
      c(x[1], 
        x[3],
        x[5],
        x[len])
    ))[1:3]
  }
}

imglinks <- function(style, icon) {
  icon <- pick(icon)
  paste0(
    '<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/',
    'master/data/styles/default/',
    style,
    '/symbols/',
    icon,
    '.svg"/>', collapse = " ")
}


x2 <- x1 %>% 
  filter(!transport) %>% 
  group_by(color) %>% 
  summarise(count = n_distinct(icon), 
            sample = imglinks(style, icon), 
            icons = paste(unique(sort(icon)), collapse = ", ")) %>% 
  arrange(count, icons)


cutstring <- function(strings, n) {
  out <- as.character()
  for (i in seq_along(strings)) {
    string <- strings[i]
    sstring <- str_sub(string, 1, n)
    if(string != sstring) {
      x <- unlist(strsplit(sstring, ", "))
      res <- paste(c(x[1:(length(x)-1)], "…"), collapse = ", ")
    } else {
      res <- string
    }
    out <- c(out, res)
  }
  out
}

x3 <- x2 %>% 
  mutate(color = paste0("`", color, "`"),
         icons = cutstring(icons, 60))
  

x3 %>% knitr::kable() %>% clipr::write_clip()

## Context To further examine inconsistencies in icons design after #4017 and #7195, I extracted colors from SVGs to count their frequencies. 1. Rarely used colors may be added by mistake, and these icons should be redrawn to match the palette. 2. This research helps to visualize current palette, [document it](https://github.com/organicmaps/organicmaps/wiki/Colors#existing-palettes), and make further design choices. ## Suggested actions - [ ] Examine possibility to bring down variations of similar colors: e.g. do we need those different shades of gray? should we settle on a single red for speedcam-alert and railway-crossing? - [ ] After reducing palette by removing unnecessary colors write down remaining ones for further icon designs, so that both light and dark styles have simple guidelines describing color choices depending on icon meaning - [ ] In the distant future, consider adjusting the palette together with adjusting map colors for better visual impression overall As usual, comments and discussion is welcome @organicmaps/design! ⚠️ **UPD:** These findings reflect state of things as of 10 June 2024 after #7258 and #7548 by @dvdmrtnz. Tables below should be regenerated once again if the icons are updated. See also: [a wiki page with a dark/light icon design comparison](https://github.com/organicmaps/organicmaps/wiki/Icons:-dark-vs.-night-and-size-comparison). ## style-clear |color | count|sample |icons | |:---------|-----:|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:------------------------------------------------------| |`#555555` | 1|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/dot-m.svg"/> |dot-m | |`#f51e30` | 1|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/speedcam-alert-l.svg"/> |speedcam-alert-l | |`#444444` | 1|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/transfer_arrow.svg"/> |transfer_arrow | |`#c81e17` | 2|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/railway-crossing-l.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/railway-crossing-m.svg"/> |railway-crossing-l, railway-crossing-m | |`#000003` | 3|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/star-l.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/star-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/star-s.svg"/> |star-l, star-m, star-s | |`#4e7c90` | 4|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/parking_entrance_private-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/parking_private-s.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/parking_underground_private-m.svg"/> |parking_entrance_private-m, parking_private-m, … | |`#000000` | 4|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/skateboard-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/speedcam-s.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/volleyball-m.svg"/> |skateboard-m, speedcam-m, speedcam-s, volleyball-m | |`#eeeedd` | 5|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/dot-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/star-l.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/star-s.svg"/> |dot-m, ford-m, star-l, star-m, star-s | |`#bb9342` | 8|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/bar-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/cafe-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/ice_cream-m.svg"/> |bar-m, beer-m, cafe-m, fastfood-m, ice_cream-m, … | |`#14a0c2` | 9|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/drinking-water-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/ford-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/fountain-s.svg"/> |drinking-water-m, drinking-water-s, ford-m, fountain-m, … | |`#664e42` | 10|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/alpine_hut-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/apartment-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/campsite-s.svg"/> |alpine_hut-m, alpine_hut-s, apartment-m, campsite-m, … | |`#2e89b0` | 10|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/bicycle-parking-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/parking_underground_pay-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/parking-disabled-m.svg"/> |bicycle-parking-m, motorcycle-parking-m, … | |`#507f34` | 11|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/garden-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/npark-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/nparkf-outline-m.svg"/> |garden-m, garden-outline-m, npark-m, nparkf-m, … | |`#2f6499` | 16|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/airport-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/bicycle-rental.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/bus-s.svg"/> |airport-m, airport-s, bicycle-rental, bus-m, bus-s, … | |`#c15746` | 19|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/alternative-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/audiologist-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/clinic-m.svg"/> |alternative-m, assembly_point-m, audiologist-m, … | |`#7f5933` | 64|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/aircraft-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/animal-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/arcade-m.svg"/> |aircraft-m, anchor-m, animal-m, aquarium-m, arcade-m, … | |`#8c5f93` | 79|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/alcohol-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/art-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/bakery-m.svg"/> |alcohol-m, antiques-m, art-m, auction-m, bakery-m, … | |`#717065` | 141|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/airport_gate-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/archery-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/arrow-s.svg"/> |airport_gate-m, america-football-m, archery-m, arrow-m, … | |`#ffffff` | 263|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/airport_gate-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/airport-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/light/symbols/alpine_hut-m.svg"/> |airport_gate-m, airport-m, airport-s, alcohol-m, … | ## style-night |color | count|sample |icons | |:---------|-----:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:--------------------------------------------------------| |`#f51e30` | 1|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/speedcam-alert-l.svg"/> |speedcam-alert-l | |`#444444` | 1|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/transfer_arrow.svg"/> |transfer_arrow | |`#c81e17` | 2|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/railway-crossing-l.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/railway-crossing-m.svg"/> |railway-crossing-l, railway-crossing-m | |`#000003` | 3|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/star-l.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/star-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/star-s.svg"/> |star-l, star-m, star-s | |`#eeeedd` | 3|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/star-l.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/star-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/star-s.svg"/> |star-l, star-m, star-s | |`#4e7c90` | 4|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/parking_entrance_private-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/parking_private-s.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/parking_underground_private-m.svg"/> |parking_entrance_private-m, parking_private-m, … | |`#bb9342` | 8|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/bar-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/cafe-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/ice_cream-m.svg"/> |bar-m, beer-m, cafe-m, fastfood-m, ice_cream-m, … | |`#14a0c2` | 9|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/drinking-water-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/ford-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/fountain-s.svg"/> |drinking-water-m, drinking-water-s, ford-m, fountain-m, … | |`#664e42` | 10|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/alpine_hut-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/apartment-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/campsite-s.svg"/> |alpine_hut-m, alpine_hut-s, apartment-m, campsite-m, … | |`#2e89b0` | 10|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/bicycle-parking-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/parking_underground_pay-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/parking-disabled-m.svg"/> |bicycle-parking-m, motorcycle-parking-m, … | |`#507f34` | 11|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/garden-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/npark-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/nparkf-outline-m.svg"/> |garden-m, garden-outline-m, npark-m, nparkf-m, … | |`#2f6499` | 16|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/airport-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/bicycle-rental.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/bus-s.svg"/> |airport-m, airport-s, bicycle-rental, bus-m, bus-s, … | |`#ffffff` | 16|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/arrow-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/arrow-xs.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/npark-m.svg"/> |arrow-m, arrow-s, arrow-xs, hotel-s, npark-m, … | |`#c15746` | 19|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/alternative-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/audiologist-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/clinic-m.svg"/> |alternative-m, assembly_point-m, audiologist-m, … | |`#111111` | 21|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/bicycle-parking-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/motorcycle-parking-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/nparkf-outline-s.svg"/> |bicycle-parking-m, garden-outline-m, motorcycle-parking-m, … | |`#7f5933` | 44|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/aquarium-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/buddhist-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/casino-m.svg"/> |aquarium-m, arcade-m, buddhist-m, buddhist-s, casino-m, … | |`#717065` | 69|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/aircraft-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/anchor-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/archaeological-site-m.svg"/> |aircraft-m, airport_gate-m, anchor-m, animal-m, … | |`#8c5f93` | 79|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/alcohol-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/art-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/bakery-m.svg"/> |alcohol-m, antiques-m, art-m, auction-m, bakery-m, … | |`#777777` | 91|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/america-football-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/australian-football-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/barrier-entrance-s.svg"/> |america-football-m, archery-m, australian-football-m, … | |`#000000` | 224|<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/airport_gate-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/airport-m.svg"/> <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/default/dark/symbols/alpine_hut-m.svg"/> |airport_gate-m, airport-m, airport-s, alcohol-m, … | ## Extras These two tables were generated with R script, which * greps all hex-coded colors from every SVG file * normalizes them to be lowercase and 6-digits * excludes all of the subway and light rail icons * counts the number of files with each color * pretty-prints the markdown output <details><summary>Here is the script for reproducibility: </summary > ```r library(tidyverse) style <- "light" # style <- "dark" setwd(paste0( "~/organicmaps/data/styles/default/", style, "/symbols/")) strings <- system('grep -oE "#[0-9A-Fa-f]{3,6}" *.svg | sort', intern = T) %>% gsub(":", ",", .) %>% gsub(".svg", "", .) strings <- c("icon, color", strings) csv <- paste(strings, collapse = "\n") x1 <- read_csv(csv) x1$color <- tolower(x1$color) x1$color <- ifelse(nchar(x1$color) == 4, str_replace(x1$color, "#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])", "#\\1\\1\\2\\2\\3\\3"), x1$color) x1$transport <- grepl("subway-", x1$icon) | grepl("light.*rail", x1$icon) pick <- function(x) { x <- unique(x) if(length(x) <= 3) { x } else { len <- length(x) sort(unique( c(x[1], x[3], x[5], x[len]) ))[1:3] } } imglinks <- function(style, icon) { icon <- pick(icon) paste0( '<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/', 'master/data/styles/default/', style, '/symbols/', icon, '.svg"/>', collapse = " ") } x2 <- x1 %>% filter(!transport) %>% group_by(color) %>% summarise(count = n_distinct(icon), sample = imglinks(style, icon), icons = paste(unique(sort(icon)), collapse = ", ")) %>% arrange(count, icons) cutstring <- function(strings, n) { out <- as.character() for (i in seq_along(strings)) { string <- strings[i] sstring <- str_sub(string, 1, n) if(string != sstring) { x <- unlist(strsplit(sstring, ", ")) res <- paste(c(x[1:(length(x)-1)], "…"), collapse = ", ") } else { res <- string } out <- c(out, res) } out } x3 <- x2 %>% mutate(color = paste0("`", color, "`"), icons = cutstring(icons, 60)) x3 %>% knitr::kable() %>% clipr::write_clip() ``` </details>

👍 5

This repo is archived. You cannot comment on issues.