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.
Here all Highmaps parameters are in JSON format.
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)
Now save files and open geo_maps.html in your browser.
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>
<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;
}
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>
<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 MapmapData: 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);
$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.
Hi,
ReplyDeletethanks 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.
Thanks for letting me know. I updated the fix and it is ready to rock.
DeleteThe 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#?
ReplyDeleteThere are two parts in this tutorial.
Delete1) 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