{"id":11087,"date":"2014-12-17T05:01:36","date_gmt":"2014-12-16T18:01:36","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=11087"},"modified":"2015-10-10T22:31:59","modified_gmt":"2015-10-10T12:31:59","slug":"php-geographical-image-map-google-bubble-chart-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/php-geographical-image-map-google-bubble-chart-tutorial\/","title":{"rendered":"PHP Geographical Image Map Google Bubble Chart Tutorial"},"content":{"rendered":"
\"PHP<\/a>

PHP Geographical Image Map Google Bubble Chart Tutorial<\/p><\/div>\n

Let’s, again, revisit the HTML image map<\/a> tag talked about previously, specifically, with PHP Geographical Overlay Image Map Jigsaw Game Tutorial<\/a> as shown below, by extending its functionality by analyzing that Wikipedia<\/a> information and present some statistical analysis via a Google Bubble Chart, good for correlating data concepts … you can do some R&D at PHP\/Javascript\/HTML Google Chart Bubble Chart Tutorial<\/a>.<\/p>\n

This HTML element has good practical use with geographical maps, as we show you today with a (free online) political map of India (thanks to Download Free India Outline Map – Political<\/a>), and we love it here at this blog for English vocabulary<\/a> learning purposes. My personal view is that it can be useful for so many things, but not everyone agrees, for sure. Maybe the ease of concept of image maps appeals to you?<\/p>\n

Today’s tutorial is, again, written in PHP, taking yesterday’s PHP as its basis, but adding new functionality living with all its original functionality … you can see how here at india_map.php<\/a> … you can see how we got there here at india_map.php<\/a><\/p>\n

Here is some downloadable PHP programming source code you could call india_map.php<\/a> that underpins the live run<\/a> which got underpinned by that great Mobilefish image map helper functionality here<\/strong><\/a>. Hope you get something out of today’s ideas of a geographical link to other interesting web information. Its inspiration stems from those millions of people who love maps, and who, perhaps, like me, finds gaping at them for long periods of time, pretty fulfilling … the “where”<\/i> fanatics!<\/p>\n

You click on an input submit button to show the Google Bubble Chart, optionally.<\/p>\n

Hope you enjoy our statistical chart today, and get ideas of your own with how to apply some of this web functionality.<\/p>\n

\n

Previous relevant PHP Geographical Overlay Image Map Jigsaw Game Tutorial<\/a> is shown below.<\/p>\n

\"PHP<\/a>

PHP Geographical Overlay Image Map Jigsaw Game Tutorial<\/p><\/div>\n

Let’s revisit the HTML image map<\/a> tag talked about previously, specifically, with PHP Geographical Overlay Image Map Primer Tutorial<\/a> as shown below, by extending its functionality to become a Jigsaw Game where the user positions Indian States on the right to the correct “overlay”<\/i><\/a> position over a map on the left … to “reveal”<\/i><\/a>.<\/p>\n

This HTML element has good practical use with geographical maps, as we show you today with a (free online) political map of India (thanks to Download Free India Outline Map – Political<\/a>), and we love it here at this blog for English vocabulary<\/a> learning purposes. My personal view is that it can be useful for so many things, but not everyone agrees, for sure. Maybe the ease of concept of image maps appeals to you?<\/p>\n

Today’s tutorial is, again, written in PHP, taking yesterday’s PHP as its basis, but adding new functionality living with all its original functionality … you can see how here at india_map.php<\/a> … and we apply “overlay”<\/i><\/a> and “reveal”<\/i><\/a> ideas to add more overlayed SVG polygon elements you can read about at PHP\/Javascript SVG Primer Tutorial<\/a>.<\/p>\n

Here is some downloadable PHP programming source code you could call india_map.php<\/a> that underpins the live run<\/a> which got underpinned by that great Mobilefish image map helper functionality here<\/strong><\/a>. Hope you get something out of today’s ideas of a geographical link to other interesting web information. Its inspiration stems from those millions of people who love maps, and who, perhaps, like me, finds gaping at them for long periods of time, pretty fulfilling … the “where”<\/i> fanatics!<\/p>\n

You click on a “jumbled” Indian state of interest on the right and place it correctly over the map of Indian States on the left … try to get to a score of 30 (Indian states).<\/p>\n

Hope you enjoy our jigsaw game today, and get ideas of your own with how to apply some of these functionality “bullet points”.<\/p>\n

\n

Previous relevant PHP Geographical Overlay Image Map Primer Tutorial<\/a> is shown below.<\/p>\n

\"PHP<\/a>

PHP Geographical Overlay Image Map Primer Tutorial<\/p><\/div>\n

Let’s revisit the HTML image map<\/a> tag talked about previously, specifically, with HTML Geographical Image Map Primer Tutorial<\/a> as shown below.<\/p>\n

This HTML element has good practical use with geographical maps, as we show you today with a (free online) political map of India (thanks to Download Free India Outline Map – Political<\/a>), and we love it here at this blog for English vocabulary<\/a> learning purposes. My personal view is that it can be useful for so many things, but not everyone agrees, for sure. Maybe the ease of concept of image maps appeals to you?<\/p>\n

Today’s tutorial is written in PHP, taking yesterday’s HTML as a basis … you can see how here at india_map.php<\/a> … and we apply Overlay<\/a> ideas to add HTML <a><\/i> elements (within a <div><\/i>) with text-decoration:none<\/i><\/a> and a higher z-index<\/a> and position:absolute<\/a> property, with an opacity<\/a> larger than the reduced opacity of the Image Map image’s opacity setting, over the top of the map naming the Indian states (rather than you having to hover, necessarily, now). The state name positioning is achieved by means of an offsetted moving average<\/a> of unique co-ordinate sets of the polygons used for the Image Map. These links being hovered over now bring up Wikipedia information to the right using Ajax techniques, and the Famous People information opens as a window.open (like we did yesterday). The Indian state background colours are handled via overlayed SVG polygon elements you can read about at PHP\/Javascript SVG Primer Tutorial<\/a>.<\/p>\n

Here is some downloadable PHP programming source code you could call india_map.php<\/a> that underpins the live run<\/a> which got underpinned by that great Mobilefish image map helper functionality here<\/strong><\/a>. Hope you get something out of today’s ideas of a geographical link to other interesting web information. Its inspiration stems from those millions of people who love maps, and who, perhaps, like me, finds gaping at them for long periods of time, pretty fulfilling … the “where”<\/i> fanatics!<\/p>\n

You click on an Indian state of interest and …<\/p>\n