Disaster Form Style ?

[vincentsarago]

I set up a first form to add disaster info!

I tried to add general disaster tag, but if someone want's to add one I'm all open.

About the style, it's really basic so I may ask to a someone handy in design to provide some icons!

[vincentsarago]

it will be nice I think to add icons to make disaster type more visual! Also, icons would be nice on the map!

To Do:

• [x] set the disaster types list
• [x] design svg icons
• [ ] add icons on mapbox-studio / create mapbox gl sprite seems really hard (https://www.mapbox.com/help/define-sprite/)
• [ ] add icons on map for each disaster (also for EONet Events)

[ghost]

I volunteer for designing the SVG icons; I have a few days off this week, so should be able to put some time into it.

[vincentsarago]

@CodeMacabre thanks so much :-) let me know if you need some inputs !

[ghost]

What do you think of these early tests? I'm experimenting with a coloured circular theme, but they could easily be converted to monochrome, other shapes, etc.

Earthquake:

Tsunami:

[vincentsarago]

whooooooaaa that's awesome 👍

[ghost]

Excellent, glad to know I'm on the right path! I hope to spend some time over the weekend getting a full set of first drafts finished. Do you have any ideas or suggestions for the 'other / uncategorised' icon? I was thinking something like the generic hazard / caution symbol ⚠.

[vincentsarago]

Do as you want :-), the generic hazard is good 👍

[ghost]

@vincentsarago Just a heads-up, most icons drafted but I'm away from my PC for a few days. Should be able to get them to you Thursday.

[vincentsarago]

@CodeMacabre no rush! I'm working on the DB part and that could be long :-)

[ghost]

I just discovered this set of humanitarian icons by the UN OCHA. There's also a web font here, which includes them in SVG format.

It renders what I've been working on a bit obsolete, but as these are a recognised / established standard, it may be best to use them instead. What do you think?

[vincentsarago]

@CodeMacabre I knew those, but they are png and I really wanted something from scratch! but if you think those are better, it's ok!

[ghost]

Ah ok, if you prefer custom icons I'm happy to continue.

[vincentsarago]

👍

[ghost]

I'm still tweaking a few I'm not entirely happy with (sandstorm, tornado) and have to do another pass on colours (if you're happy for the current colours to be changed) but I should be ready to make a PR soon.

I was thinking of adding the icons to each disaster type via css ::before pseudo-elements. Does that sound okay, or is there a different style you'd prefer?

[ghost]

Oh, also I've drafted two additional types; avalanches and disease.

Although disease epidemics themselves wouldn't be visible by satellite, the resulting responses might be, such as evacuations, aid infrastructure, etc. What do you think?

[vincentsarago]

all ok for both 👍 I'll also add the icon on the popup (instead of the disasterwatch logo)

[vincentsarago]

@CodeMacabre Man I love your icons! they are really greats

FYI! I choose this the background-image solution for the css (inside a size-defined element): .icon-fire { background-image: url('../img/fire.svg'); }

only one comment, I'm not quite sure about the man-made icon! can we work together on this one ?

[vincentsarago]

@CodeMacabre I also modified the tornado svg because it was too heavy (430ko)

[ghost]

@vincentsarago 😃 Glad you like them! I'm pleased with how they look in action.

I agree the manmade one needs some work; the nuclear symbol doesn't really match the others (apart from disease, but that might need changing too). I had a couple of other ideas; either a few barrels with an oil puddle, or possibly an oil well? I think it'd work better reverting it back to black, too.

The tornado was my least favourite tbh; if you want me to take another pass and try to keep the filesize down, I'm happy to work on it.

[vincentsarago]

@CodeMacabre Love your hand sketch :D

About the man-made I had couple of ideas:

• boot trace (like the trace on the moon)
• simple human body
• simple human hand

[vincentsarago]

@CodeMacabre about rendering icons on the map! it might be a bit difficult. Mapbox-gl require a specific svg format: https://www.mapbox.com/maki-icons/guidelines/#specs

[ghost]

@vincentsarago Hmm, yeah the icons would need to be completely redesigned to fit the Maki guidelines. I could certainly look at simplifying them all if you'd like to try it out.

I'll work on the manmade icon. The body and hand would be best if we follow the Maki guidelines, but I love the idea of the moon boot footprint. I'll try all three.

[vincentsarago]

Yeah! don't loose time on the Maki icon for now. Thanks

[vincentsarago]

@CodeMacabre As soon as we change the man-made icon I'll do an official launch of the project!

[ghost]

Awesome! I'll work on it tomorrow send a PR on Tuesday.

[ghost]

Sent my PR #35 which includes a few minor changes along with the new manmade icon. The boot / footprint wasn't very readable at small sizes, so I went for the hand design. I tweaked the colours and changed manmade to a black / dark grey.

One major change is the svg file sizes: I realised what was making the tornado so much larger and adjusted all other icons to match. File sizes went from an average of 100kb to max 3.78kb!

[vincentsarago]

will merge now!