Support » Plugin: Extensions for Leaflet Map » Very interesting plugin

  • jackaspades

    (@jackaspades)


    Hi First, I want to say how much I appreciate this plugin. I have been struggling for a while using both WP-GPX-Maps and Leaflet Maps. The first one provided altitude profiles and the latter did not. So I displayed 2 maps on my articles. (Not ideal of course). Seeing that this plugin can eliminate the duplication, I will remove WP-GP-Maps from the site.

    Some other things I noticed.
    – my site was using D3.js Version 3. Cursor tracking on a combined map and alti-profile display does not work with D3 V3. Upgrading to V6 fixes this.
    – Even with D3 V6 I am not able to make changes in the thickness of the polyline on the map nor activate several options such as the download option, the slope option etc.

    I have deactivated and removed WP-GPX-Maps from the site, activated the migration option, but not yet removed all the sgpx meta tags from the articles.

    I wonder if you have any suggestions about these issues.

    Regards

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 18 total)
  • Plugin Author hupe13

    (@hupe13)

    I tested sgpx only with leaflet-map and wp-gpx-maps, no other plugin is active, which needs any Leaflet library. You are using some more Leaflet libraries, may be, this is the reason.

    I’m using the newest versions of all Leaflet plugins. I need to include these in the plugin, this was a requirement for accepting the plugin.

    but not yet removed all the sgpx meta tags from the articles.

    This is not included. elevation interprets only some sgpx parameters, others are ignored.
    I tried to document this: https://leafext.de/en/doku/elevation/sgpx/.

    You have to define your defaults in the elevation settings page for all maps. If you want to change there for one map only, you must use the elevation shortcode.

    In elevation you can select one of three polyline weights. Should I define “weight 2” also?

    Plugin Author hupe13

    (@hupe13)

    The developer console shows some errors and warnings. Control.FullScreen.css from wp-gpx-maps should be loaded but is not there.

    Thread Starter jackaspades

    (@jackaspades)

    Thanks for your 2 messages.

    I did also notice the system is trying to load Control.FullScreen library from the wp-gpx-maps plugin directory. This directory is not present. The attempted load is coming from another plugin for which I am the author and occurs in connection with the loading of maps for the database page – so it is fully my problem.

    However I made some other progress with your plugin. I removed all sgpx tags in the articles and the alti profiles now work correctly with the various defaults.

    Also I implemented a test page with multiple hoverable tracks. I observed that the hover system works correctly but clicking on a track polyline makes it disappear. The track control on the uppper left is still functional but you can’t get make the tracks visible without a page refresh. According to me this is an undesirable behaviour. Also, I noticed that the name=”…” option in the elevation-track tag is not used in the track control. The control is sourcing the track name directly from the gpx. Also possibly undesirable ?

    Regarding polyline weights – in my opinion {weight:2} is not useful but {weight:6} might be.

    Thanks and best regards

    Plugin Author hupe13

    (@hupe13)

    I observed that the hover system works correctly but clicking on a track polyline makes it disappear. The track control on the uppper left is still functional but you can’t get make the tracks visible without a page refresh. According to me this is an undesirable behaviour.

    You are right, I need to fix it.

    Also, I noticed that the name=”…” option in the elevation-track tag is not used in the track control. The control is sourcing the track name directly from the gpx. Also possibly undesirable ?

    At time, I wrote this script, I had difficulties with the name, I used this example, so I used to show the tracks this on my site:

    echo '[elevation-track file="/path/'.$file.'" lat="'.$startlat.'" lng="'.$startlng.'" name="'.basename($file).'"]';

    The name in the Control is basename($file).

    So I have a lot of tasks for the next release.

    • This reply was modified 1 year ago by hupe13.
    • This reply was modified 1 year ago by hupe13.
    • This reply was modified 1 year ago by hupe13.
    Plugin Author hupe13

    (@hupe13)

    I don’t know myself what I programmed once. 😉

    Also, I noticed that the name=”…” option in the elevation-track tag is not used in the track control. The control is sourcing the track name directly from the gpx.

    This is expected.
    The parameters lat, lon, name refer to the starting points. I don’t know how to omit them without reading the file again.

    Thread Starter jackaspades

    (@jackaspades)

    Hi I am using a WMTS basemap from the Institut national de l’information géographique et forestière (IGN) – the french national mapping service. I have an API key for this and it is entered in the MAP Tile URL field in the Leaflet Map plugin.
    The basemap displays correctly in the site posts including the gpx track and the the altiprofile (profile created by your plugin).

    I am not using Google Map APIs. However, as you can see on this example (https://lacroixdegattigues.com/orchids-in-june/) there are several Google Map controls visible (pegman, search box and geolocalisation box on lower right, some map layer controls upper left and a small layer window on the lower left) which do not work corrctly. I don’t understand how these controls get placed on the map. Are they coming from your plugin ? Can you tell me how to remove them ? Thanks
    PS : I did clean up and remove all references to WP-GPX-MAPs and associated resources so I guess the cause is something else. Regards

    Thread Starter jackaspades

    (@jackaspades)

    In case it is useful, here are the short codes used for the map on the above example

    [leaflet-map fitbounds scrollwheel=1 zoom=15]
    [leaflet-marker lat=43.883342 lng=4.267288] trail starts here[/leaflet-marker]
    [leaflet-marker lat=43.887453 lng=4.263249] colony of corn cockles[/leaflet-marker]
    [leaflet-marker lat=43.888499 lng=4.260927] wild snapdragons[/leaflet-marker]
    [leaflet-marker lat=43.892283 lng=4.261621] lizard orchids[/leaflet-marker]
    [leaflet-marker lat=43.896664 lng=4.267719] lizard orchids[/leaflet-marker]
    [leaflet-marker lat=43.891096 lng=4.266784] Violet birds-nest orchid (limodorum abortivum) [/leaflet-marker]
    [cluster]
    [elevation gpx=”/wp-content/uploads/gpx/clos-gaillard.gpx”]`

    Plugin Author hupe13

    (@hupe13)

    Can you please create a testpage with a map only? Or two. One without IGN (with tiles from openstreetmap), one with IGN map.
    There are many js files, which I cannot assign. Deactivate all plugins (and files) that you do not need.

    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css" />
    <script src="https://unpkg.com/leaflet-ui@0.5.0/dist/leaflet-ui.js"></script>
    
    <script src="https://unpkg.com/@raruto/leaflet-elevation@1.6.7/dist/leaflet-elevation.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation@1.6.7/dist/leaflet-elevation.min.css" />
    
    <script type="text/javascript" src="/resources/js/Leaflet.fullscreen.min.js"></script>
    <link rel="stylesheet" href="/resources/css/leaflet.fullscreen.css" type="text/css" media="screen,projection" />
    

    Your page is loading an old leaflet version. Configure this in Leaflet Map setting.
    You probably tested leaflet-elevation from Raruto at some point, you can find leaflet-ui.js there too. My plugin does not load leaflet-ui.js, but a newer version of leaflet-elevation.js. Fullscren can do it too, but it doesn’t load this file.

    I’m testing Leaflet Providers, this includes Tiles from IGN too. But maps with api keys don’t work yet.

    • This reply was modified 1 year ago by hupe13.
    Thread Starter jackaspades

    (@jackaspades)

    If I change the last metatag from

    [elevation gpx=”/wp-content/uploads/gpx/clos-gaillard.gpx”]

    to

    [leaflet-gpx src=”/wp-content/uploads/gpx/clos-gaillard.gpx”]

    the undesirable controls are still visible on the map. Looks like this is not coming from your plugin.

    Thread Starter jackaspades

    (@jackaspades)

    OK I just read your last message. I did the following :
    1) changed to load the latest version of leaflet from unpkg,
    2) removed leaflet-ui library (yes this came from a different site where I am using the same libraries).
    3) removed the GPPluginLeaflet library (coming from IGN which I need for a different section of the site but I can leave out for now.

    I tested
    1) with IGN base layer
    2 without IGN base layer

    In both cases the google controls no longer appear on the map. So it must must have been caused by use of the leaflet-ui library.

    Thread Starter jackaspades

    (@jackaspades)

    You can check that it works correctly on this link – currently showing IGN basemap

    https://lacroixdegattigues.com/orchids-in-june/

    Thread Starter jackaspades

    (@jackaspades)

    There is also a sample “map only” test article as your requested

    https://lacroixdegattigues.com/map-test/

    (with IGN base map but OSM also works fine)

    Thread Starter jackaspades

    (@jackaspades)

    Thanks also for your rapid responses to all previous messages

    I have one further discussion point.

    I am loading the leaflet libraries in header.php – the main entry point for WordPress. As I assume your plugin actually loads the libraries, also tried removing these from wordpress header.php and then no base map appears.

    Observations ?

    Plugin Author hupe13

    (@hupe13)

    Your test site doesn’t work correctly.

    As I assume your plugin actually loads the libraries, also tried removing these from wordpress header.php and then no base map appears.

    WordPress is using some functions for enqueueing and dequeueing javascript and css. This system isn’t trivial but when you understand it, it is perfect. leaflet.js is enqueued when the shortcode leaflet-map is used. But leaflet-map loads the default tilelayers, there is no possibility to specify a key. One possibility to load leaflet.js would be to define leaflet-map with a height of 1 px, like I do with sgpx.

    Does a documentation from IGN exist, how to use the tiles with or without wordpress? Are the tiles the same as here?

    • This reply was modified 1 year ago by hupe13.
    Thread Starter jackaspades

    (@jackaspades)

    Hi
    Thanks again for your messages.

    I have 2 different areas of the site where maps are displayed :

    1) WordPress posts: In this case, I only want to display an IGN base map with some markers, some waypoints and an altiprofile. No need for layers or layer controls. Your plugin works well for this.

    2) Database Generated Pages : These are created by clicking on a link in a table generated from a specially formatted SQL database. In this case I am using Leaflet, a different version of leaflet.elevation. and a library from IGN called GPPluginLeaflet.js which provides a number of useful map widgets such as route planning, isodistance and isochrone calculations, itinerary profiles, reverse lookups etc. In the current status – database generated pages are working but the WordPress posts are not working. To see a database generated page and the map widgets used click here https://lacroixdegattigues.com/load-map/?rkey=777

    In testing, I can get one or the other to work – but not both.

    The rest of this discussion is perhaps not fully appropriate for the wordpress.org forum.

    If you are willing to exchange e-mails directly, I can provide much more information about these topics.
    Cordialement J C

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Very interesting plugin’ is closed to new replies.