Sign in to follow this  
Followers 0

Fun coding project

32 posts in this topic

Posted (edited)

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):

Screen_Shot_2016-11-13_at_12.20.39_PM.th

Screen_Shot_2016-11-13_at_12.21.54_PM.th

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 by Cam Adair
3 people like this

Share this post


Link to post
Share on other sites

Posted (edited)

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:

gamequitters.thumb.png.1064d7aa9c334581b

 

Edited by Ed

Share this post


Link to post
Share on other sites

Posted

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

1 person likes this

Share this post


Link to post
Share on other sites

Posted

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.

2 people like this

Share this post


Link to post
Share on other sites

Posted

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! 

Share this post


Link to post
Share on other sites

Posted

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.

sample.thumb.png.7eda8994a8e12434e64ea03

3 people like this

Share this post


Link to post
Share on other sites

Posted

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.

1 person likes this

Share this post


Link to post
Share on other sites

Posted

Yep that one is clear on the legal front.

Share this post


Link to post
Share on other sites

Posted (edited)

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)

sample_2.thumb.png.6876c6f402e728924dc86

code_sample.thumb.jpg.cb3f03fde6636dcdb0

 

Edited by Ed
3 people like this

Share this post


Link to post
Share on other sites

Posted

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

1 person likes this

Share this post


Link to post
Share on other sites

Posted (edited)

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:

error.thumb.png.d2cd1a82ca6f6cf4aa34f6ca

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

marker.png

gamequitter map.png

gamequittersmap.txt

Edited by Ed
1 person likes this

Share this post


Link to post
Share on other sites

Posted (edited)

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):

fixed.thumb.png.c598ff819290965f6105de73

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

marker.png

gamequitter map.png

gamequittersmap.txt

Edited by Ed
1 person likes this

Share this post


Link to post
Share on other sites

Posted

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

Share this post


Link to post
Share on other sites

Posted

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0