PHP/JavaScript World Map with Continent and Ocean Selection
Tuesday 3rd February 2009
A world map image which enables the user to select continents and oceans to indicate location.
The world map function was developed for our favourite project, A-Z Animals and is used to enable contributors to select the locations an animal lives in or visits. The user may select by continent or ocean, or of course a mixture of the two. For example, a polar bear only lives in the Arctic Circle, whereas dogs are found throughout the world, certain fish only live in certain oceans but many migrate between the various oceans throughout the year. The world map enables users to quickly and easily select the animal location and is then used to display this information to visitors so they can quickly understand where the relevant animal is found.
In time we intend to advance the function so individual countries can be selected though due to the complexity of creating the image maps for the selection this will take some time. When developing the A-Z Animals project we were unable to find any suitable tools so began developing our own which we intend to advance to provide advanced country, ocean and river selection, as well as adding the ability to specify point locations with markers.
The map works by displaying all the images for each area on top of each other, they are transparent and are stacked over the faded map with the stylesheet 'display' values set to 'none'. Upon selection or moving the mouse over the continent/ocean the relevant image's 'display' value is switched to 'block' so the area is displayed (using an image map), on mouseout the 'display' value returns to 'none' unless the area is selected. The image map is used with a totally transparent image which is placed above all of the other images as the image map would not work if used with the bottom layer or with one of the layers which is hidden.
The world map includes JavaScript functions for saving the locations and a PHP function for loading the map with the areas pre-selected.
Usage
After setting up the stylesheets/Javascript as per the example file (see 'Configuration' instructions below), simply use the following to display a basic world map:
require "world_map.php";
print world_map('', '0', 'images');
To display map with Europe pre-selected:
require "world_map.php";
print world_map('europe', '0', 'images');
To display a large version of the map with Europe and the Atlantic ocean selected:
require "world_map.php";
print world_map('europe,sea_atlantic', '1', 'images');
The three input flags are used as outlined below:
world_map(PRE-SELECT, LARGE MAP, IMAGES LOCATION);
- PRE-SELECT
Used to load map with areas pre-selected, enter values seperated by commas. e.g. north_america,south_america
Values as follows:
- canada
- north_america
- south_america
- south_pole
- europe
- eurasia
- africa
- australia
- sea_pacific
- sea_atlantic
- sea_arctic
- sea_indian
- sea_pacific2
- LARGE MAP
If blank defaults to '0', 0 displays 600 pixel wide map, 1 displays large 1488 pixel wide map.
- IMAGE LOCATION
URL to image location, trailing slash is appended to URL. e.g. http://www.opencrypt.com/images or /images or images are all acceptable.
Configuration
The example.php file contains various CSS/Stylesheets and JavaScript which must be included before loading the world map function. No other configuration is required.
JavaScript Function Notes
In example.php you will find a JavaScript function called save_map(), in the example this simply displays a pop-up alert listing the selected values but this will need to be customised to save the location values as you require, for example you may want to save them in a database so they can then be parsed to the world_map() PHP function to load the map with the areas pre-selected.
License and Download
This code is Open Source and is released under the GNU General Public License.
We hope you find this code of use, if you use it in your projects we'd love to hear about it! And of course, if you have any questions please don't hesitate to post a comment and we will respond as soon as possible.
Share this article:
|
<- We've Moved!
|
Doing the unexpected ->
|
|
