Click here to Skip to main content
Click here to Skip to main content
Go to top

Generating Maps

, 16 Jan 2014
Rate this:
Please Sign up or sign in to vote.
Mapper is a PHP script for handle maps and linkable symbols inside.

 

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).
<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"=>"&#x2328;"),
                "Garessio - Sanofi"=>array("x"=>160,"Y"=>370,"Shape"=>"&#x2697;")));        
    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:

SyntaxExampleTranslated 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);   // include javascript mapper functions
    $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'>";
    ?>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Member 4206974
Software Developer Condor Informatique
Italy Italy
Computer literacy (software) : Languages: PHP, Javascript, SQL Autoit,Basic4Android; Frameworks: JOOMLA!
Teaching/Training skills on Office, WEB site development and programming languages.
Others : WEB site development.
UNDP Missions
feb – may 2003 Congo DR Bukavu: ground IT computer course
nov 2003 Burundi Bujumbura: Oracle Data Base course
feb 2005 Burundi Bujumbura: JAVA course
mar 2005 Mali Kati: MS Office course
oct 2006 Mali Kati: MS Office course
jun 2006 Burkina Faso Bobo Dioulasso: MS Office course
jun 2007 Burkina Faso Bobo Dioulasso: MS Office course
may 2007 Argentina Olavarria hospital: Internet application for access to medical records
apr 2008 Burkina Faso Ouagadougou: MS ACCESS and dynamic Internet applications
jun 2008 Niger Niamey: analysis of the computing needs of the Niamey hospital
may 2009 Burkina Faso Ouagadougou: MS ACCESS and dynamic Internet applications
oct 2010 Niger Niamey: analysis of the computing needs of the Niamey hospital (following)
Region Piedmont project Evaluation
mar 2006 Burkina Faso, Niger
mar 2007 Benin, Burkina Faso, Niger
sep 2008 Benin, Burkina Faso, Niger
Others
feb 2010 Burundi Kiremba hospital: MS Office course

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 16 Jan 2014
Article Copyright 2014 by Member 4206974
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid