Please wait for 15 seconds...

Friday, 1 August 2014



Recently I explained you, how to Show Visitor Location in Real Time in Google Maps. Few techsirius readers asked me to create a tutorial on Geo Maps so here I am. In this tutorial I will show you how to create simple Geo Map and fill value data in them. I am using here Highmaps.




First of all download project files from here or you can download Highmaps library
Create geo_maps.html and copy below code in it.

HTML

<div class="main">
<div id="geo_map" class="geo_map"></div>
</div>

CSS

.text_c{
    text-align: center;
}
.main{
    position: relative;
    width:80%;
    left: 50%;
    margin-left: -40%;
}
.geo_map{
    border:2px black dashed;
}

Javascript

<script type="text/javascript" src="js/jquery.min1.11.1.js"></script>
<script type="text/javascript" src="js/highmaps.js"></script>
<script type="text/javascript" src="js/world.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $.getJSON('get_geo.php', function(geo_data){
        $('#geo_map').highcharts('Map', {
            title : {
                text : 'Simple Geo Map Using Highmaps'
            },
            subtitle : {
                text : 'Top Ten Car Production Countries'
            },
            colorAxis: {
                min: 0
            },
            series : [{
                data : geo_data,
                mapData: Highcharts.maps['custom/world'],
                joinBy: 'hc-key',
                name: 'Anual Car Production',
                states: {
                    hover: {
                        color: '#BADA55'
                    }
                }
            }]
        });
    });
});
</script>

Here all Highmaps parameters are in JSON format.

title

Title is the main title of map and it appears in the top.

subtitle

Appears just below of map title.

colorAxis

Color range of the data map.

series

data: data value for blank Geo Map
mapData: blank geo map code, which is responsible for drawing blank Geo Map.
name: data name like Annual Car Production, World Population, Military Strength. Means, what sort of data are you displaying in the map?

And other components are self explanatory, let's jump to others.

Create get_geo.php and copy n paste below code in it.

I am using this code as example. You can create your own country data list. This is country ISO code list. You can use two character long ISO code and pass them in hc-key index.

PHP(get_geo.php)
<?php
$geo_data[0]['hc-key'] = "cn";
$geo_data[0]['value'] = 22116825;
$geo_data[1]['hc-key'] = "us";
$geo_data[1]['value'] = 11045902;
$geo_data[2]['hc-key'] = "jp";
$geo_data[2]['value'] = 9630070;
$geo_data[3]['hc-key'] = "de";
$geo_data[3]['value'] = 5718222;
$geo_data[4]['hc-key'] = "kr";
$geo_data[4]['value'] = 4521429;
$geo_data[5]['hc-key'] = "in";
$geo_data[5]['value'] = 3880938;
$geo_data[6]['hc-key'] = "br";
$geo_data[6]['value'] = 3740418;
$geo_data[7]['hc-key'] = "mx";
$geo_data[7]['value'] = 3052395;
$geo_data[8]['hc-key'] = "th";
$geo_data[8]['value'] = 2532577;
$geo_data[9]['hc-key'] = "ca";
$geo_data[9]['value'] = 2379806;
echo json_encode($geo_data);

Now save files and open geo_maps.html in your browser.

Posted by Atul Prasad Gupta

4 comments:

  1. Hi,
    thanks for this Tutorial! Didnt work for me at first but i found the error. In Your Example you say the name of the php file is get_map_data.php but in the JS u say it is get_geo.php.

    Btw. you should update your Download link, it doesnt work.

    ReplyDelete
    Replies
    1. Thanks for letting me know. I updated the fix and it is ready to rock.

      Delete
  2. The code doesn't work for me, it just display the dotted line the map inside is not visible.I want to the same thing you have done in asp.net.Can I get any links essential in that respect too OR what changes will I be required to make in order to run it in asp.net C#?

    ReplyDelete
    Replies
    1. There are two parts in this tutorial.
      1) Make sure all JS files are included properly.
      2) Get correct JSON data from get_geo.php (http://demo.techsirius.com/demo/create-simple-geo-map-using-highmaps/get_geo.php) and in your case there will be some URL like get_geo.aspx or something like that.

      If you are still facing some problem then you can message me your code on fb.com/techsirius

      Delete

Subscribe Techsirius

Techsirius on Facebook