Fun coding project

[Cam Adair]

Hey everyone,

One of my goals with the new gamequitters.com homepage is to showcase all of the countries that we have members from. What I want to do is recreate the global map that charitywater.org has (scroll down to Where We Work) with markers for our own countries. I've inspected their code and it looks like it's all being done with html/css (sprites):

If you're interested in taking on this project, let me know. It could be a fun way to practice your css/html skills and contribute to the community. Below I have listed the countries that we have represented in Game Quitters. For colors, the pin marker would be best as red (look at gamequitters.com for the colors), with highlight map a darker red and the global map either a lighter red or gray.

Countries: (75)

Singapore, USA, Canada, South Africa, Slovakia, England (United Kingdom), Finland, New Zealand, Norway, Germany, Brazil, Spain, Netherlands, Poland, Switzerland, Belgium, Australia, Russia, Turkey, Denmark, Greece, Lithuania, India, Czech Republic, Morocco, Colombia, Latvia, Serbia, Tunisia, Sweden, Portugal, Luxembourg, Italy, France, Algeria, Ireland, Romania, Hong Kong, Indonesia, Japan, Mexico, Egypt, Iceland, Scotland, Paraguay, Qatar, Bulgaria, Philippines, Argentina, Pakistan, Kuwait, Saudi Arabia, United Arab Emirates, Estonia, Ghana, South Korea, Israel, Malaysia, Austria, Slovenia, Syria, Hungary, Taiwan, Thailand, Croatia, Brunei, Bosnia, Bahrain, Guernsey, Tanzania, Venezuela, Uruguay, Mongolia, Bulgaria, Kosovo, Montenegro

Any questions let me know.

Edited February 15, 2017 by Cam Adair

[Ed]

I'm not an expert in CSS, but at first glance it looks like this should be relatively simple.  I probably shouldn't say that, often it's the "simple" jobs that give the biggest challenges.

Did you want the markers animated?

Do you have access to a royalty free map?  There are some free ones available but they require attribution.

I'm assuming you'll also want an easy way to add new countries, possibly within wordpress.

And just to showoff my awesome Microsoft Paint skill, here's what I imagine the markers will look like:

 

Edited November 14, 2016 by Ed

[Cam Adair]

I personally am a fan of the simplicity of the one charity water is using. I have attached two royalty free maps as well and a few links below:

http://www.freepik.com/index.php?goto=2&searchform=1&k=map+

http://www.freepik.com/free-vector/lcd-world-map-infographic_790018.htm#term=map&page=2&position=34

https://www.vecteezy.com/vector-art/107033-free-world-map-patterns-vector

For the markers, one idea that plays on the one you shared is to potentially just put the logo head on the country and not even have the marker with it. Open to any of those ideas. I've attached the logo files for you.

Overall from looking at the html/css it looks like it's mostly just the css sprites positioning that will take a bit of time. I'm not very good at that side of things yet.

 

 

 

World-map-background-in-abstract-style.zip

Game Quitters Logo - Finalized.zip

[Ed]

I've made some progress on this.  Still got a few things to work out, once those problems are solved it should be rather easy to finish it off.

[Cam Adair]

I've made some progress on this.  Still got a few things to work out, once those problems are solved it should be rather easy to finish it off.

Awesome! 

[Ed]

This is a sample of what to expect, there are still quite a few adjustments before it is finished.  Obviously Cam gets final say in the finished product but I have some idea on how I plan to make it better.

The marker - I consider this 99% finished.  There's a reason I chose to go with the marker instead of just the logo.  The logo is fine for countries like U.S.A, Canada, Australia etc.. But if you look over to Europe, that same logo is going to cover multiple countries, especially tiny ones like Luxembourg.

The map - I don't like the map in the picture below because it doesn't show enough detail.  We don't need a 100% accurate map but it will make things a lot easier to get one that has clear borders on different countries.

Mouseover - Will show the country and flag when cursor runs over a marker

Animation - I'm not sure if animation is needed but it can be added after everything else is working

Add a parent class to the marker - It will make it easier to add new countries if the marker inherits most of its attributes from a parent class.

[Cam Adair]

Awesome, I'm on board with all of that - like the idea of a mouseover flag/name. Do you want me to search for other maps? If you have one in mind that's either a free or paid vector let me know as well.

[Ed]

I found one that's in the public domain:

https://en.wikipedia.org/wiki/File:BlankMap-World6-Equirectangular.svg

I'd double-check the legality of it but I'm pretty sure that it's allowed to be used for commercial purposes.

[Cam Adair]

Yep that one is clear on the legal front.

[Ed]

It's starting to take shape, can almost see the final product.  The colors on the map can be changed quite easily if needed, now it's mainly a matter of figuring out the positions for the remaining markers. Only 65 left to go....

(Pics look slightly blurry because they're screenshots)

 

Edited November 22, 2016 by Ed

[Cam Adair]

Awesome! If you want an account to access the site and play around with it on a draft page, let me know.

[Ed]

Awesome! If you want an account to access the site and play around with it on a draft page, let me know.

At the moment I have other options to test it but once it's closer to being complete we'll need to test it on your page.

In the meantime, I'm trying to work out why some of the markers are not working like they should.  Some are working properly, then others are just lining up on the side:

Here is the code and the two pictures I'm using for anyone who might be more experienced working with CSS/HTML and might be able to tell me what I'm doing wrong:

  gamequittersmap.txt

gamequittersmap.txt

Edited November 23, 2016 by Ed

[Ed]

I worked out what I was doing wrong, somehow I cut and paste some duplicate code in the file.  If you look over the whole code it's likely you'll spot my mistake very easy.  This is why it's sometimes a good idea to step back and quickly look over the whole program rather than exclusively concentrate on the specific issue.

Anyway here is what the map looks like with a few more country markers (GameQuitters has taken over Europe):

Ps, for some reason the forum keeps adding my previous pics to this post.

gamequittersmap.txt

Edited November 23, 2016 by Ed

[Cam Adair]

Aware of that forum bug. Really fucking weird. Gotta get that one figured out.

[Ed]

Stage 1 is finished, all the markers are on the map.  Here's the html file: gamequittersmap.html

Next stage is to get it displaying the country name as you run your mouse over a marker.

gamequittersmap.html

[Cam Adair]

Damn we killin' it

Look at all those markers!

[Reno F]

Hey guys, the map looks awesome!

I just want to add the option that it can also be done embedding a map from a map service such as google maps. Here is a sample I've done quickly this morning:

<iframe src="https://www.google.com/maps/d/embed?mid=17-SjER5Zhh6-EelkdLVM7oM88-I" width="640" height="480"></iframe>

Changing the markers was the most I could do to personalize the map, so I guess there is not much to play with, but I didn't spend enough time on it!

edit: oh, we can't edit the html of the post...

Edited November 25, 2016 by Reno F

[Ed]

For anyone who doesn't want to download the html file but still interested in what my map looks like:

@Reno F has a good idea with using google maps to put the markers on.  I may be a little bit biased against that because I spent a lot of time getting the markers lined up for this map, and don't really look forward to doing that tedious work all over again.  The markers don't necessarily line up but here is what it looks like when I swap in Reno's code:

There are some disadvantages and advantages with doing it either way.  Like I said, I may be slightly biased because of the work I've already put in, but a couple of objective reasons to use the first map is quicker loading times and later we also have the ability to colour in the countries.

[Hitaru]

A bit stacked in my opinion. Could you do them smaller or without the arrow?

[Cam Adair]

We can add Uruguay to the list! Country 72 baby.

[Reno F]

A bit stacked in my opinion. Could you do them smaller or without the arrow?

How about you guys make Europe one big country?

[WorkInProgress]

A bit stacked in my opinion. Could you do them smaller or without the arrow?

How about you guys make Europe one big country?

But it isn't !!!

 

[Cam Adair]

A bit stacked in my opinion. Could you do them smaller or without the arrow?

How about you guys make Europe one big country?

Agreed. Lol.

[Cam Adair]

#74: Bulgaria! 

[phpsmith]

I'd like to maybe add my two cents to this topic.

First, looks great. I think it would be cool to see where everyone is coming from. I agree it looks a little cluttered in Europe, that may help by reducing the size of the pointer a bit and adding a marker outline around the arrow part so it's not so much a red blob. Of course, the alternative to the clutter is the ability to zoom in on the map, which is why Google Maps API is often used  But given the work that's been put into this so far, it'd be a shame not to use it. I've attached a quick example of how I think the pins could look a little different to maybe reduce some clutter/size without losing the gamequitters logo to the pixel war.

Another thing is that although Europe looks very busy of course with all the countries, US, Canada, and other larger countries seem a bit bare. It may be cool to separate the pins into the states and provinces of those larger countries, of course that is more work as well.

Finally, I'll throw a big stick in the spokes - what's been done set aside, what would be cool to see is an option for people to list their location on their forum profile, there could then be a server side script that accesses the database and generates the Google Maps API JavaScript cooridinates based on the locations. It would remove having to place the pins when a new person comes on board from a new location. That's a pretty big stick though, and as the late and great Bruce Lee has once said, "If you spend too much time thinking about a thing, you'll never get it done."