1

I am trying to create an interactive Leaflet map of a hiking trail. Along this trail, I have a number of 'waypoints', represented as markers in a GeoJSON file:

var waypoints = [
   { "Name": "Cabane de Susanfe", 
     "Altitude": 2095, 
     "Text": "This is the first waypoint",
     "coordinates": [ 6.91246, 46.14939 ] 
   },
   { "Name": "Rhône Valley", 
     "Altitude": 457, 
     "Text": "This is the second waypoint",
     "coordinates": [ 7.0458, 46.13417 ]
   },
   { "Name": "Cabane de Sorniot", 
     "Altitude": 2064, 
     "Text": "This is the third waypoint",
     "coordinates": [ 7.09167, 46.16176 ] 
   },
   { "Name": "Cabane du Demècre", 
     "Altitude": 2361, 
     "Text": "This is the fourth waypoint",
     "coordinates": [ 7.07314, 46.18744 ] 
   },
   ]

I would like to create a button in a separate div which would cycle through these waypoints and display information about each in a div on the side, like a map slideshow. So far I have managed to create a button that cycles through the elements in the 'waypoints' array, but how do I get the map to pan to the new marker and display information? Here is the jquery code I have so far to iterate through the array elements:

$(document).ready(function(){
var i = 0;

$("#button-next").on('click', function(){
     i = (i + 1) % waypoints.length;

     console.log(waypoints[i]);
});
});

The effect I am looking for is similar to CartoDB's odyssey.js slideshow or the jQuery slidemapper plugin, but I figure that there is probably an easier solution than completely rebuilding the map using one of these libraries.

I am a beginner with leaflet and javascript in general.

  • Why not put a slider instead of a button? github.com/dwilhelm89/LeafletSlider should solve what you're trying to do – 15Step Jan 30 '18 at 20:23
  • The effect I'm looking for is more similar to this: github.com/cavis/slidemapper - except that I'd like to try to avoid rebuilding the app with this plugin. – AWPardee Jan 30 '18 at 23:05
  • Did you add waypoints to the map as layers? Once you'll add them to featuregroup or layergroup you will be able to use geyLayer() to interact with individual markers – NettaB Feb 9 '18 at 17:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.