Hex colors for marker color

JackDougherty / leaflet-maps-with-google-sheets-dev

code development for improving Leaflet Maps with Google Sheets

https://jackdougherty.github.io/leaflet-maps-with-google-sheets-dev/

MIT License

1 stars 10 forks source link

Hex colors for marker color #5

Open ilyankou opened 7 years ago

ilyankou commented 7 years ago

It is not possible to use hex for Marker Color value. We use Leaflet.awesome-markers plugin (https://github.com/lvoogdt/Leaflet.awesome-markers), in which the only colors allowed are: 'red', 'darkred', 'orange', 'green', 'darkgreen', 'blue', 'purple', 'darkpuple', 'cadetblue'.

When the color is not from the list above, it defaults to a red.

If you look into plugin's code, you will see a sprite (multiple images combined into one .png file) with the icons of above-mentioned colors: https://github.com/lvoogdt/Leaflet.awesome-markers/blob/2.0/develop/dist/images/markers-plain.png

JackDougherty commented 7 years ago

Thanks for all of the March 15th improvements.

As for leaflet.awesome-markers, I noticed that a different developer has taken over code maintenance on a different site. See this thread https://github.com/lvoogdt/Leaflet.awesome-markers/issues/79

Here is leaflet.awesome-markers v2.0 https://github.com/sigma-geosistemas/Leaflet.awesome-markers

Would it be possible for you to switch us over this newer version? And if so, does that increase our color spectrum?

ilyankou commented 7 years ago

Jack,

They use the same .png files for the icons, but oddly enough have more markerColor options available: 'white', 'red','darkred', 'lightred', 'orange', 'beige', 'green', 'darkgreen', 'lightgreen', 'blue', 'darkblue', 'lightblue', 'purple', 'darkpurple', 'pink', 'cadetblue', 'white', 'gray', 'lightgray', 'black'.

Switching to this will double the number of colors in the palette, but we still won't be able to use hex or any other color code. In the ideal world the markers would be svg so that we can apply any colors to them, as opposed to raster images (although it might be possible to create some layers on top of a white marker and play with css to change their transparency, colors, etc – who knows).

A question: do we really need a wide variety of colors?

JackDougherty commented 7 years ago

Thanks for investigating. When I looked at our current CSS code, I see that leaflet-awesome-markers v1 supports the 19 colors that appear in v2, even though the v1 documentation lists fewer colors. https://github.com/JackDougherty/leaflet-maps-with-google-sheets-dev/blob/master/scripts/Leaflet.awesome-markers/leaflet.awesome-markers.css

So my goal is simply to make sure we're using the best available version of leaflet-awesome markers. If you have time today or Friday, please upload v2 into our dev code to see if it runs as expected. If yes, please add it there and update the README credits.

richpauloo commented 6 years ago

Just to chime in, I think it would be great to be able to map hex color codes to leaflet markers, in the same way that palettes are commonly mapped to points or polygons.

jgieseking commented 5 years ago

Also to chime in: indeed, many thanks! I also want to add my support for specific hex values to produce my map. I've made a map of LGBTQ historical sites to launch with my book but they don't carry the vibrancy of the people's stories withins. Given that maps lie so well, especially when it comes to color, mapping in specific hex values would Leaflet maps shine.

And hallo @JackDougherty :)

JackDougherty commented 5 years ago

Good to hear from you, Jack G (@jgieseking ) @ilyankou - would you please take another look at this issue and tell us what you recommend?

ilyankou commented 5 years ago

Aaaaaalrighty y'all!

I looked into the issue. This gentleman (@wesleyvandevoorde) proposed marker changes from .png to .svg back in 2016, and submitted a pull request (https://github.com/lvoogdt/Leaflet.awesome-markers/pull/74) - which was never accepted. But I tested it and it works perfectly! So I updated the main repository https://github.com/DataVizForAll/leaflet-maps-with-google-sheets to include these changes.

Once you sync your repositories with the updated main one:

You can use any colors you want that would normally be accepted by a css style: names (darkblue), hex (#aa8653), rgba with transparencies (rgba(200,0,100,0.5)) - you name it!
Instead of using bourgeois FontAwesome icons, you need to start using names of Material Icons (https://material.io/tools/icons/). The selection of icons is on par with FontAwesome (and in addition you don't have to deal with FontAwesome's new annoying licensing).
The new markers also jump on hover!

ilyankou commented 5 years ago

Created a plugin for Leaflet with these changes: https://github.com/ilyankou/Leaflet.IconMaterial

jgieseking commented 5 years ago

Awesome! Thank you!!