Question

I’ve seen this question asked all over the net, but haven’t seen an answer that solves it yet.

Here’s what I need to do – based on data from my database, I need to highlight countries on a map of Africa. This is for a web-based game and I don’t want to use Google Maps and the like.

This can’t be a new problem and I assume there’s a PHP library somewhere out there that does it, or at least a file containing the necessary info (from what I understand I need a lot of coordinates). The map doesn’t need to be interactive (no on-click or on-hover events) and I’d like to keep this server-side if possible. It just needs to display the countries and color them based on data from the database.

However, if you don’t have a PHP solution, I’ll be grateful for any alternative options using Javascript (note that data still has to be extracted from DB).

One last question – how hard would it be to simply create a .PNG image of each country with the rest of the map transparent and position them so as to form a map? In that case, is there a PHP function that would allow me to highlight individual countries?

Answer 1

You can’t do this easily in PHP but with a jQuery plugin imageMapster it’s really simple. Here’s a map demo that sounds suitable for you.

http://www.outsharked.com/imagemapster/examples/usa.html

You can set it up as an image map and set it to highlight map areas on load, mouseover, click etc. The highlight can be either CSS based or an alternate image.

It’s very well documented and has been a life saver many times for me.

Here’s an example of how you set area to their onstate:

<script>
    $(document).ready(function() {
        $('#IMAGE_NAME').mapster('set',true,'AREA_ID');
    });
</script>

EDIT: This is actually the 2nd time today I’ve recommended this. I’m not affiliated with it in any way, I just think it’s cool.