Introduction
Mapper is a PHP script for handle maps with symbols inside;
the symbols can have great flexibility on shape, color, dimension and type of interaction like Anchor links and events handling.
Background
The maps are a useful tool to convey ideas and show synthetic data.
Google allows us to have real maps, but if we do not need a real map or we do not want to know Google that what we are doing, these scripts can be useful.
Using the Code
Mapper is build by three scripts:
mapper.php shows map and linkable symbolsmapper.js handle the point setgenimg.php create geometric symbols by GD
To show linkable maps, the
mapper.php script must be included and
genimg.php script must be in the same directory. A map with his symbols is created by calling the function
createMap whit an array of parameters
which almost contains the map image name and the points to put in the map, like the sample below.
(
Try).
<html>
...
<body>
...
include 'mapper.php';
...
$aParams = array("image"=>"images/PiemontMap.gif",
"points"=>array("Turin"=>array("x"=>127,"Y"=>250),
"Ivrea - Arduino"=>array("x"=>146,"Y"=>190),
"Garessio - Sanofi"=>array("x"=>160,"Y"=>370)));
echo createMap($aParams);
...
</body>
</html>
It is possible to personalize the map by setting some properties at general level (i.e. for all points) or for some categories of point or for a single point.
The setting at the point level overrides the setting associated to a category, which overrides the setting at the general level which, finally, override the defaults setting.
The Map's Symbols
The default symbol is a red circle, semi transparent (alpha = 0.7) and of 10 pixel diameter; this can be changed partially or totally by adding a parameters
color, shape, alpha and width; in the code below they are added at general level i.e. they are valid for all points.
(Try).
...
$aParams = array("image"=>"images/PiemontMap.gif",
"color" =>"008080","width" =>14,"alpha" =>0.9,"shape" =>"diamond",
"points"=>array("Turin"=>array("x"=>127,"Y"=>250),
"Ivrea - Arduino"=>array("x"=>146,"Y"=>190),
"Garessio - Sanofi"=>array("x"=>160,"Y"=>370)));
echo createMap($aParams);
...
shape parameter can be an image or an UNICODE value (with a lot of symbols).
(Try).
...
$aParams = array("image"=>"images/PiemontMap.gif","Width"=>30,"alpha"=>1,"color"=>"gray",
"points"=>array("Turin"=>array("x"=>127,"Y"=>250,"shape"=>"images/condor.gif"),
"Ivrea - Arduino"=>array("x"=>146,"Y"=>190,"Shape"=>"⌨"),
"Garessio - Sanofi"=>array("x"=>160,"Y"=>370,"Shape"=>"⚗")));
echo createMap($aParams);
...
A Symbol Can Become a Link
The anchor parameter can be associated to a point for create a link; the value is the site or document to link
(without href=) and can contain other Anchor parameters (like target).
(Try).
...
$aParams = array("image"=>"images/PiemontMap.gif",
"width"=>50,
"points"=>array("Turin"=>array("x"=>127,"Y"=>250,"shape"=>"images/logopace.gif",
"anchor"=>"http://rete.condorinformatique.com/index.php target=_blank"),
"Ivrea - Arduino"=>array("x"=>146,"Y"=>190,"shape"=>"images/arduino.jpg"),
"Garessio - Sanofi"=>array("x"=>160,"Y"=>370,"shape"=>"images/logo-sanofi.png")));
echo createMap($aParams);
...
Handle Events on Symbols
We can attach events at all symbols or at particular point, the event parameter accept a function name or a complete event,
in the first case is generated an onclick event:
| Syntax | Example | Translated as |
| "event"=>"function_name" | "event"=>"Signal" | onClick='Signal(pointName)' |
| "event"=>"onevent=function_name(parameter(s))" | "event"=>"onMouseOver='alert(\"nation=\"+this.title)'" | onMouseOver='alert("nation="+this.title)' |
(Try).
...
$aParams = array("image"=>"images/world.png","width"=>20,
"event"=>"alert",
"points"=>array("Italia"=>array("x"=>302,"Y"=>114,"shape"=>"images/it.png",
"event"=>"onMouseOver='alert(\"nation=\"+this.title)'"),
"Francia"=>array("x"=>278,"Y"=>105,"shape"=>"images/fr.png"),
"Spagna"=>array("x"=>274,"Y"=>128,"shape"=>"images/es.png"),
"U.S."=>array("x"=>93,"Y"=>118,"shape"=>"images/us.png")));
echo createMap($aParams);
...
How to Have Different Symbols on Map
Different symbols can be obtained by inserting different shapes at point level,
but the simplest method consists of assigning a shape set to a type at a general level and inserting (at point level) the type parameter.
(Try).
...
$aParams = array("image"=>"images/world.png",
"Europa"=>array("color" =>"blue","alpha" =>0.5,"shape"=>"diamond"),
"Africa"=>array("alpha" =>1,"shape"=>"images/Elephant.png","width"=>24),
"America"=>array("color" =>"yellow","shape"=>"triangle","width"=>15),
"points"=>array("Italia"=>array("x"=>302,"Y"=>114,"type"=>"Europa"),
"Francia"=>array("x"=>282,"Y"=>105,"type"=>"europa"),
"Spagna"=>array("x"=>272,"Y"=>125,"type"=>"europa"),
"Tanzania"=>array("x"=>355,"Y"=>225,"type"=>"Africa"),
"Kenia"=>array("x"=>360,"Y"=>200,"type"=>"Africa"),
"Birmania"=>array("x"=>483,"Y"=>190,"type"=>"Asia"),
"U.S."=>array("x"=>93,"Y"=>118,"type"=>"America")));
...
Handle Points
Setting point coordinates in a map is cumbersome. Mapper facilitates this task by allowing you to insert, update and delete points,
using the mouse and collecting the coordinates. This is done by calling createMap with a second parameter set to true. Only the image and points parameters are needed. Further to include mapper.php, we need to included a JavaScript code mapper.js.
createMap add two buttons, one for show the list of points and one for restore the initial situation;
the user must insert a button for capture the points (see details in documentation).
(Try).
...
$aPoints = array("Tanzania"=>array("x"=>355,"Y"=>225),
"Kenia"=>array("x"=>360,"Y"=>200),
"Birmania"=>array("x"=>483,"Y"=>190));
$aParams = array("image"=>"images/world.png","points"=>$aPoints);
echo createMap($aParams,true); echo "<input type=button onclick='alert(savePoints(mapper.returnPoints()))' value='Save'>";
...
Using with JOOMLA!
Using Mapper in JOOMLA! requires the Sourcerer plug-in, which permits to insert JavaScript, PHP scripts, HTML tags, and CSS directives in an article;
below is the sample for create a map (for handle the placements point).
...
{source}
<?php
include 'mapper/mapper.php';l
JHTML::script("mapper.js","mapper/js/",false);
$aParams = array("image"=>"mapper/images/world.png","alpha"=>1,
"points"=>array("Kenia"=>array("x"=>360,"Y"=>200),
"Tanzania"=>array("x"=>355,"Y"=>225),
"Birmania"=>array("x"=>483,"Y"=>190),
"U.S."=>array("x"=>93,"Y"=>118)));
echo createMap($aParams,true);
echo "<input type=button onclick='alert(mapper.returnPoints())' value='Save'>";
?>
{/source}
...
