JourneyMap is a JavaScript library for the Leaflet.js mapping platform.

The library can help you create a story map where interactions on the map are triggered as the user scrolls down the page. This demonstration map shows you some of the interactions you can create with the library.

The demo shows how you can add a marker to the map, move the map to a different location and zoom in and out on the map. All these map events are fired by waypoints in the left-hand text column.

Add a Marker

Using JourneyMap you can add a marker to the map to highlight a specific location.

To create a marker you need to add this function to your JavaScript:

$('.marker').waypoint(function(direction) {
if (direction === 'down') {
var marker = L.marker([-41.29042, 174.78219])
.addTo(map) .bindPopup("A Marker This is a marker.")
.openPopup();
}
});

The 'direction === down' condition ensures that the marker event is called as you scroll down the page. If you want the marker to be added when the user scrolls upwards you simply need to change the condition to 'direction === up'.

To call the marker event you simply need to add an element to this left hand text column named 'marker'

Polyline

You can add a polyline to your map by adding the following function to your map JavaScript:

$('.polyline').waypoint(function(direction) {
if (direction === 'down') {
var polyline = L.polyline([
[-41.286, 174.796],
[-41.281, 174.786],
[-41.279, 174.776],
[-41.290, 174.775],
[-41.292, 174.788]]
).addTo(map);
}
});

Change the Location

You can also use JourneyMap to change the location on the map.

Changing the location on the map involves calling the following function:
$('.panto').waypoint(function(direction) {
if (direction === 'down') {
map.panTo(new L.LatLng(40.737, -73.923));
}
});

Zoom the Map

You can zoom in and out of the map using the map.setZoom(zoomlevel) function.

Using the Waypoints library with a Leaflet map you can in effect call any Leaflet function from this text column. You simply need to create the function in your map JavaScript and call the event in this left-hand text column.

You can reverse all your map interactions by adding 'direction === up' functions in your map JavaScript. I've added a few 'up' functions to this demonstration map. If you scroll up this page you will see some of these functions in action. As you scroll back up the page the map will zoom back out and the map will recentre back on Wellington, New Zealand.

To use this JourneyMap libary you need to include:

Waypoint.js
jQuery