Display GPX routes on the map

[Mates-K1]

Hi,
it would be handy for me to be able to display a map in the gallery at the photo position, which would load a GPX route using Openstreetmap.

screen.png (219.01 KiB) Viewed 26358 times

The preview could easily be static (better, of course, would be a dynamic), after clicking on the preview the map would be displayed in the place where the photo is by default. The map would show the route uploaded using GPX.

I would find this to be a useful extension to the standard map image display, as it would better document the route taken on trips.

What do you think? Is there a reasonable solution?

[stephenbillard]

I think in theory this should be possible. It may take some thinking on how to do it, though.

Since netPhotoGraphics is file system based for albums and images I think we would need to invent the concept of a "dynamic image" (analogous to dynamic albums.) The getCOntent() method would then generate the mapk, presumably from data contained in the image file.

There are some pretty difficult problems to overcome, though. For instance how to handle caching.

I wonder if it would be simpler to just generate the map outside the context of netPhotoGraphics and store the map image as a normal image.

[Mates-K1]

Thanks for the quick response, Stephen.

What I like about the GPX map view is the dynamism - the ability to zoom in or out on the map.

And the dynamic preview would be a bonus. Even without it, it would be a great solution. I can upload a single image/placeholder somewhere into my system (or album), which will be the same for all of them, and the user will immediately know that the route of the trip is hidden under the preview.

[stephenbillard]

Are you up to doing some work on this?

Take a look at the "image" plugins for how these the getContents() method is the guts of displaying these alternate images, so the openStreetMap code would go there. classVIdeo and classTextobject are good starting points to see how this might be done.

Since you want the map to be responsive I think we can ignore the caching--we just won't cache the image. It will be generated each time the album page is loaded.

I don't know anything about openStreetMap and GPX images so how that is generated is something for you to research. openStreetMap::printMap() is the code that generates the traditional map.

There could be an image file with the suffix GPX that is the place holder for the map. Presumably there is a list of GPS coordinates provided. That list could be generated by querying the images in the album. The list could also be in the file contents, but then it would have to be edited manually. Other configuration specifics could also be stored in the file.

[Mates-K1]

I admit that I would like to help, but unfortunately my knowledge ends with HTML and CSS. But I can certainly spend enough time trying to pull some solutions out of the AI. Increase my knowledge of PHP to that level is probably unrealistic for me, unfortunately.

Can we please find a compromise that doesn't overwhelm you too much and allows for some route display?

[Mates-K1]

Wouldn't it be easier to just load a GPX file that would be placed next to the photos in the existing map under the album?

By inserting the following code into line 660 of openstreetmap.php I managed to load a GPX file into the map under the album. Unfortunately it is loaded as points and not as a route.

Code: Select all

   $albumPath = $album->localpath;

   $gpxFiles = glob($albumPath . "/*.gpx");


    if (!empty($gpxFiles)) {
        $gpxFile = $gpxFiles[0]; 
        if (file_exists($gpxFile)) {
            $gpx = simplexml_load_file($gpxFile);
            if ($gpx !== false) {
                if (isset($gpx->wpt)) {
                    foreach ($gpx->wpt as $wpt) {
                        $result[] = array(
                            'lat' => (string) $wpt['lat'],
                            'long' => (string) $wpt['lon'],
                            'title' => !empty($wpt->name) ? (string) $wpt->name : 'Waypoint',
                            'desc' => !empty($wpt->desc) ? (string) $wpt->desc : '',
                            'thumb' => '',
                            'current' => 0
                        );
                    }
                }

                if (isset($gpx->trk->trkseg->trkpt)) {
                    foreach ($gpx->trk->trkseg->trkpt as $trkpt) {
                        $result[] = array(
                            'lat' => (string) $trkpt['lat'],
                            'long' => (string) $trkpt['lon'],
                            'title' => 'Track Point',
                            'desc' => '',
                            'thumb' => '',
                            'current' => 0
                        );
                    }
                }
            } else {
                echo "<p>DEBUG: Failed to load GPX file.</p>";
            }
        } else {
            echo "<p>DEBUG: GPX file does not exist (wrong path).</p>";
        }
    } else {
        echo "<p>DEBUG: No GPX file found.</p>";
    }

    return $result;
}

[stephenbillard]

I guess I need a bit of education. How does one create a GPX file? Maybe you can provide me with an example. How does one tell Openstreetmap to create a route map as opposed to just individual points.

Anyway, I think that the best approach is to create a "class-gpx" plugin that is based on the "class-video" plugin. I will work on that end and with your help we can get this going.

GIven your code above (and with an example GPX file) I think I can make the basic plugin. But as you note it will load as points until we have the answer of how to tell Openstreetmap to make a route.

[Mates-K1]

Sorry, I am in hurry.

May be this helps:

Code: Select all

// Check if trackData contains coordinates and create polyline
if (Array.isArray(trackData) && trackData.length > 0) {
    // Create the polyline using trackData coordinates
    var polyline = L.polyline(trackData, {color: 'blue'}).addTo(map);
    
    // Adjust the map view to fit the polyline
    map.fitBounds(polyline.getBounds());
} else {
    console.log("DEBUG: trackData is empty or not defined.");
}

[Mates-K1]

Unfortunately, I don't know how exactly to create a GPX file, but according to the code it is actually a list of points in XML. Simple GPX files with a route can be obtained at https://graphhopper.com/maps/.

Code: Select all

<?xml version="1.0" encoding="UTF-8" standalone="no" ?><gpx xmlns="http://www.topografix.com/GPX/1/1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" creator="GraphHopper" version="1.1" xmlns:gh="https://graphhopper.com/public/schema/gpx/1.1">
<metadata><copyright author="OpenStreetMap contributors"/><link href="http://graphhopper.com"><text>GraphHopper GPX</text></link><time>2025-03-08T10:27:24.816Z</time></metadata>
<trk>
<name>GraphHopper Track</name><desc></desc>
<trkseg><trkpt lat="47.009857" lon="-113.075981"><ele>1298.6</ele></trkpt>
<trkpt lat="47.010026" lon="-113.075736"><ele>1299.4</ele></trkpt>
<trkpt lat="47.010143" lon="-113.075542"><ele>1300.0</ele></trkpt>
<trkpt lat="47.010285" lon="-113.075130"><ele>1301.0</ele></trkpt>
<trkpt lat="47.010433" lon="-113.074527"><ele>1302.4</ele></trkpt>
<trkpt lat="47.010617" lon="-113.073961"><ele>1303.7</ele></trkpt>
<trkpt lat="47.010994" lon="-113.072954"><ele>1306.3</ele></trkpt>
<trkpt lat="47.011507" lon="-113.071737"><ele>1309.4</ele></trkpt>
<trkpt lat="47.011817" lon="-113.071223"><ele>1310.9</ele></trkpt>
<trkpt lat="47.012320" lon="-113.070475"><ele>1313.2</ele></trkpt>
<trkpt lat="47.013137" lon="-113.068872"><ele>1312.0</ele></trkpt>
<trkpt lat="47.013264" lon="-113.068580"><ele>1311.4</ele></trkpt>
<trkpt lat="47.013313" lon="-113.068333"><ele>1310.9</ele></trkpt>
<trkpt lat="47.013371" lon="-113.067875"><ele>1310.1</ele></trkpt>
<trkpt lat="47.013408" lon="-113.067371"><ele>1309.1</ele></trkpt>
<trkpt lat="47.013444" lon="-113.067220"><ele>1308.8</ele></trkpt>
<trkpt lat="47.013530" lon="-113.067066"><ele>1308.6</ele></trkpt>
<trkpt lat="47.014691" lon="-113.069181"><ele>1312.6</ele></trkpt>
<trkpt lat="47.014818" lon="-113.068850"><ele>1311.1</ele></trkpt>
<trkpt lat="47.015093" lon="-113.068234"><ele>1308.2</ele></trkpt>
<trkpt lat="47.015314" lon="-113.067821"><ele>1311.9</ele></trkpt>
<trkpt lat="47.015625" lon="-113.067291"><ele>1316.8</ele></trkpt>
<trkpt lat="47.015990" lon="-113.066705"><ele>1317.4</ele></trkpt>
<trkpt lat="47.016385" lon="-113.066151"><ele>1318.0</ele></trkpt>
<trkpt lat="47.016795" lon="-113.065599"><ele>1318.7</ele></trkpt>
<trkpt lat="47.017418" lon="-113.064869"><ele>1319.6</ele></trkpt>
<trkpt lat="47.017784" lon="-113.064422"><ele>1320.1</ele></trkpt>
<trkpt lat="47.018381" lon="-113.063769"><ele>1321.0</ele></trkpt>
<trkpt lat="47.018761" lon="-113.063375"><ele>1321.5</ele></trkpt>
<trkpt lat="47.019070" lon="-113.063094"><ele>1322.0</ele></trkpt>
<trkpt lat="47.019403" lon="-113.062848"><ele>1322.4</ele></trkpt>
<trkpt lat="47.019593" lon="-113.062784"><ele>1321.4</ele></trkpt>
<trkpt lat="47.019784" lon="-113.062798"><ele>1320.5</ele></trkpt>
<trkpt lat="47.019965" lon="-113.062877"><ele>1319.6</ele></trkpt>
<trkpt lat="47.020134" lon="-113.062910"><ele>1318.8</ele></trkpt>
<trkpt lat="47.020669" lon="-113.062858"><ele>1316.3</ele></trkpt>
<trkpt lat="47.021182" lon="-113.062826"><ele>1313.8</ele></trkpt>
<trkpt lat="47.021393" lon="-113.062834"><ele>1312.8</ele></trkpt>
<trkpt lat="47.021669" lon="-113.062882"><ele>1311.6</ele></trkpt>
<trkpt lat="47.024954" lon="-113.062876"><ele>1314.4</ele></trkpt>
<trkpt lat="47.025134" lon="-113.062888"><ele>1314.6</ele></trkpt>
<trkpt lat="47.025194" lon="-113.063088"><ele>1313.8</ele></trkpt>
</trkseg></trk>
</gpx>

I attach here a GPX packed in a ZIP containing one short route.

sample.zip

(973 Bytes) Downloaded 76 times

Of course, the current solution of displaying points instead of routes is not unusable, because the map (according to the settings) " groups " together points with similar location.

If I could have one more wish for this plugin, it would be great if it could display multiple GPX files in the map at once (probably differentiated by color). For my use, one route will be sufficient 98% of the time, but there are real situations where I would need two or three routes (three is the real maximum).

Adding GPX support will be an amazing feature that will help us document our scouts' trips even better.

Thank you so much for your work and support.

[stephenbillard]

Thanks for the GPX file. I will get this working with the code you have supplied. The implementation I propose will allow for as many routes as there are GPX files. Essentially the GPX file will be an image in the album. As for colors, I presume the

Code: Select all

color: 'blue'

parameter would select it. So just a question of how to input that to the system.