Jump to content

NEW PODCAST: Can You Still Play Games on the Weekend?

Sign in to follow this  
Cam Adair

Fun coding project

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by Reno F

Share this post


Link to post
Share on other sites

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

gamequittermapwithmarkers.thumb.png.69fa

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

gamequittersgooglemap.thumb.png.11aa9b10

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.

Share this post


Link to post
Share on other sites

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."

marker.png

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...