Using the GD Library in PHP to Plot Data in MapQuest

In this post, we will walk through the process of how to use the GD library in PHP to plot data on a MapQuest map.

By data, I am not referring to plotting just a location on a map, but plotting location specific data as well. Location gives you the "where", data will give you the "what" about that location. By using one of the icons from the MapQuest icon repository, you could plot a location with an icon indicating a restaurant or a gas station. By looking at a map such as this, we could quickly process where the gas stations and restaurants are and any patterns relating to the location of these businesses. For example, a high density of gas stations and restaurants along a line may indicate a major business route.

The example that we will create will plot the locations and some related data of the 46 High Peaks in the Adirondack Mountains of New York State. Mountain locations will be plotted by placing a icon at the appropriate position, elevations will be plotted by changing the color of the icon, and a white "+" marking on the icon will show which mountains have been hiked by a friend of mine.

Sample code available on the MapQuest website shows how to plot locations on a map using various methods. A location in MapQuest can be defined by coordinates (i.e. latitude and longitude) or by varying details of an address. Each location gets plotted via an icon displayed on the map at the appropriate position using either a default icon (i.e. a blue star), a user-selected icon in the MapQuest icon repository as mentioned above, or a user-defined image specified by a URL. It is by this last method that we will plot data on a map.

The GD library provides the ability to generate dynamic images. There are various implementations of the GD library, but for the purposes of this post, we will be dealing with the PHP version. See the following code which dynamically creates images based on URL parameters.

    // Image width & height
    $size = 10;

    // n_1: Numeric data must be between 0 and 100
    if ( isset( $_REQUEST['n_1'] ) && $_REQUEST['n_1'] > 0 && $_REQUEST['n_1'] <= 100 ){
        $n_1 = $_REQUEST['n_1'];
    }
    else {
        $n_1 = 0;
    }
    
    // Set RGB values based on numeric data (n_1)
    $rgb_red = 255 - ( $n_1 * 255 / 100 );
    $rgb_green = $rgb_red;
    $rgb_blue = $n_1 * 255 / 100;
    
    // Create image handle
    $image_handle = ImageCreate( $size, $size );
    
    // First allocated color becomes background color
    $bg_color = ImageColorAllocate( $image_handle, $rgb_red, $rgb_green, $rgb_blue );
    
    // b_1: Boolean data determines whether to mark image or not
    if ( isset( $_REQUEST['b_1'] ) && $_REQUEST['b_1'] == 1 ){
    	$white = ImageColorAllocate( $image_handle, 255, 255, 255 );
    	ImageString( $image_handle, 0, 2.5, 1.75, "+", $white );
    }
    
    // Finalize image
    header( "Content-type: image/gif" );
    ImageGif( $image_handle );

To see this image creation functionality, click on the following link: image.php?n_1=100&b_1=0. By changing the n_1 URL parameter value to another number between 0 and 100, a new image will be generated with a color somewhere between yellow and blue, depending on the value you choose. By changing the b_1 URL parameter value to a value of 1, a new image will be generated with a white '+' on top of the color that is selected by the n_1 variable (image.php?n_1=100&b_1=1). Thus we can use n_1 variable to display numeric data that has been translated to the range of 0 to 100 and we can use the b_1 variable to plot boolean data.

We will be accessing an XML data file containing the High Peak coordinates and the data we want to plot at those locations. The latitude and longitude data was retrieved from Wikipedia. See the following snippet of the xml data.

<?xml version="1.0" encoding="utf-8" ?>
<peaks>
  <peak>
     <rank>1</rank>
     <name>Mount Marcy</name>
     <elevation>5344</elevation>
     <latitude>44.1125</latitude>
     <longitude>-73.923889</longitude>
     <hiked>1</hiked>
  </peak>
  <peak>
     <rank>2</rank>
     <name>Algonquin Peak</name>
     <elevation>5114</elevation>
     <latitude>44.143611</latitude>
     <longitude>-73.986667</longitude>
     <hiked>1</hiked>
  </peak>

To wrap it all together, we will have PHP read in the XML data and generate the necessary Javascript to create a map with dynamic icons for the 46 High Peaks based on elevation and whether they've been hiked yet. See the following PHP code.

    <!-- MapQuest OpenAPI -->
    <script src="http://web.openapi.mapquest.com/oapi/transaction?request=script&
key=YOUR-KEY-HERE" type="text/javascript" ></script>

    <!-- ... -->
        
    <?php
    // Load XML data into memory
    $myxml = simplexml_load_file( 'adk_high_peaks.xml' );
    
    // Populate array with elevation data
    foreach( $myxml as $peak ){
        $elevation[] = $peak->elevation;
    }
    
    // Max and min elevation to translate elevation into a number between 0 and 100
    $data_max = max( $elevation );
    $data_min = min( $elevation );
    $x = 100 / ( $data_max - $data_min );

    // Create legend
    echo "<p><b>Legend</b></p>";
    echo "{$data_min} ft ";
    echo "--------------------------------------> ";
    echo "{$data_max} ft<br />";
    for( $i = 0; $i <= 100; $i += 100 / 20 ){
        echo "<img src=\"image.php?n_1={$i}\" /> ";
    }
    echo "<br />Did Not Hike Yet: <img src=\"image.php?n_1=100\" />";
    echo "<br />Reached Summit: <img src=\"image.php?n_1=100&b_1=1\" />";
    ?>
        <!-- DIV to hold the Map -->
        <div id='myMap' class='myMap' style="height:550;width:550"></div>

        <!-- Create the base MQMap object and pass in the id of the DIV you want to hold the map -->
        <script type="text/javascript">
        var mq = new MQMap("myMap");

        <?php
        // Create location for each node in XML data file
    	foreach( $myxml as $peak ){
            echo "var loc{$peak->rank} = new MQLocation();\n";
            echo "loc{$peak->rank}.setName(\"{$peak->name}\");\n";
            echo "loc{$peak->rank}.setLatitude(\"{$peak->latitude}\");\n";
            echo "loc{$peak->rank}.setLongitude(\"{$peak->longitude}\");\n";
            $n_1 = ( $peak->elevation - $data_min ) * $x;
            // Generate dynamic icon based on location data
            echo "loc{$peak->rank}.setIconSource(\"image.php?n_1={$n_1}&b_1={$peak->hiked}\");\n";
            echo "mq.locations.add( loc{$peak->rank} );\n\n";      
    	}
        ?>
        
        mq.getMap();
		</script>

Check out this working example. It is my hope that this example has shown how easily you can use MapQuest and the GD library in PHP to plot various types of data on a map.

• Project Source Code
• PHP GD Library
• Wikipedia: Adirondack High Peaks