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 symbols

mapper.js handle the point set

genimg.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).

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).

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).

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).

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).