GPS Visualizer

Building dynamic maps from GPX files with PHP

Normally, making a map with GPS Visualizer means uploading a GPS data file (e.g., a GPX file) and receiving an HTML file that contains commands to plot that data on a map using the Leaflet API or the Google Maps API. However, it's also possible to create a map that pulls the data from a separate file; these are "dynamic" maps, and you can see a simple example here.

The most obvious advantage of dynamic maps is that you can update the underlying data file without having to re-visit gpsvisualizer.com to generate a new map. But you can also take advantage of this functionality to easily create an entire Web site full of automatically-generated maps, using a scripting language like PHP. This page will demonstrate just one way to do this, but the variations and possibilities are limitless.

1. Upload some GPX files to your Web server

Decide where on your server you want to store the track data files (.gpx files), and put the files there with sensible, predictable names. For this example, we'll be using files that correspond to three trails on the north side of Mt. Hood in Oregon: Elk_Cove.gpx, Pinnacle_Ridge.gpx, and Vista_Ridge.gpx. The files will be placed in the /tutorials/tracks/ directory on GPS Visualizer's server.

2. Create a GPS Visualizer map to use as a template

Go to the Leaflet or Google Maps input form. Instead of uploading a file, enter the name of a file in the box labeled "URL that the map will load dynamically." It doesn't have to be a real filename; "TEST.GPX" will work.

When your map is displayed, it will be blank (unless you included the complete URL of a GPX file); that's OK! Download the HTML file that was created. Save it as something like "map.php".

3. Edit the template map

Open map.php in a text editor. Scroll down to the bottom, and you'll see something like this:

gv_options.dynamic_data = [
    {
    url:'TEST.GPX',
    field_alias:{},
    synthesize_fields:{ name:'', desc:'', label:'', folder:'' },
    ignore_styles:false,
    track_options:{color:'#e60000',width:'3',opacity:'0.9'},
    autozoom:true, zoom_default:8, zoom_adjustment:0
    }
];

The most important part here is the url parameter. Take out TEST.gpx (or whatever you entered as the dummy filename) and replace it with this PHP code: <?=$GPX_PATH?> (If your PHP configuration does not have short_open_tag enabled, you may need to use an echo statement instead.)

Then, above the gv_options.dynamic_data section, add this chunk of PHP code:

<?php
    $path_to_tracks = '/tutorials/tracks/';
    if ($_REQUEST['track']) {
        $GPX_PATH = $path_to_tracks.$_REQUEST['track'].".gpx";
    }
?>

4. Test the map

The PHP code in step 3 looks at the $_REQUEST['track'] variable for the name of the track file that the map should load. So, to make it work, you just need to put ?track=TRACKNAME in the URL that's used to display the map. Note that the ".gpx" suffix is hard-coded into the PHP statement that creates the $GPX_PATH variable, so it shouldn't be included.

Here's a working URL: https://www.gpsvisualizer.com/tutorials/php_map.php?track=Vista_Ridge

5. Add more PHP code... or don't

So far, this has been a very simple example. But there are many ways you could make it more complicated and flexible, depending on your needs, your proficiency with PHP, and your imagination. Here are a few possibilities:

  • Make sure a GPX file really exists on the server before trying to load it into a map, using PHP's file_exists function.
  • In the simple example above, the map uses GPS Visualizer's autozoom feature to zoom in on the track after the data is loaded, which can be jarring. For a smoother experience, you could disable auto-zoom and include zoom and center parameters in the URL along with the filename, and use PHP to insert those into the gv_options.center and gv_options.zoom parameters respectively. (Or, if you're even more ambitious, store the center points and zoom levels of all the tracks in a database so they don't need to be supplied in the URL.)
  • Allow the map to load multiple files via a comma-delimited list of track names (e.g., ?track=Vista_Ridge,Elk_Cove), or read from multiple track parameters (e.g., ?track[]=Vista_Ridge&track[]=Elk_Cove). Once you've parsed the input into an array of filenames, you can push multiple entries into the gv_options.dynamic_data array. Here's an example using a comma-separated list:

    gv_options.dynamic_data = [];
    <?php
        $path_to_tracks = '/tutorials/tracks/';
        $track_list = preg_split('/ *, */', $_REQUEST['track']);
        
        foreach ($track_list as $track) {
            $GPX_PATH = $path_to_tracks.$track.".gpx";
    ?>
    gv_options.dynamic_data.push({
        url:'<?=$GPX_PATH?>',
        autozoom:false,
        track_options:{color:'#e60000',width:'3',opacity:'0.9'}
    });
    <?php
        }
    ?>
  • If multiple files are loaded, cycle through a pre-defined list of colors to distinguish them.
  • Use the filename(s) as the title of the page.

Here's a working demo of some of these possibilities: https://www.gpsvisualizer.com/tutorials/php_map2.php?track=Vista_Ridge,Pinnacle_Ridge,Elk_Cove&zoom=14&center=45.43,-121.70

Source files

The links above point to working maps whose PHP code is being interpreted by this Web server, so viewing the source won't show you the PHP statements contained in them. If you'd like to see the source code of the templates, use these links to view and/or download the original PHP files:

  • php_map.php - The very simple page that draws a map from a single GPX file.
  • php_map2.php - The more complicated version that loads multiple GPX files and takes additional URL parameters.

And remember, you only need a single map template to create as many maps as you want!




Return to the Tutorials index

Return to the GPS Visualizer home page