Warning
This repository was archived on 11 June 2024 because this plugin has not been maintained for several years.
Perhaps OpenHistoricalMap/leaflet-ohm-timeslider-v2 will suit your needs?
This Leaflet plugin provides a L.Control.MBGLTimeSlider interface, to the TimeSlider control for Mapbox GL.
This code was split out from the GH Pages branch of https://github.com/Open-Historical-Map-Labs/openhistoricaltiles.
The intended use case is a Leaflet map with a L.mapboxGL layer displaying OpenHistoricalMap data.
References:
The demo/ folder contains a working demo of a Leaflet map, filtering an OpenHistoricalMap Mapbox GL layer.
-
Create a Leaflet map containing a Mapbox GL layer as usual.
-
Include the SCRIPT and LINK tags for both the MBGL TimeSlider control and this Leaflet wrapper:
<script src="https://openhistoricalmap.github.io/mbgl-timeslider/dist/mbgl-control-timeslider.js"></script>
<link href="https://openhistoricalmap.github.io/mbgl-timeslider/dist/mbgl-control-timeslider.css" rel="stylesheet" />
<script src="dist/leaflet-control-mbgltimeslider.js"></script>
<link rel="stylesheet" href="dist/leaflet-control-mbgltimeslider.css" />
- Add the control to your Leaflet map, configuring which
L.mapboxGLlayer is to be filtered data source should have its layers filtered, and passing other parameters to theTimeSlider.TimeSliderControlBe sure to do this on the Mapbox layer'sloadevent, like this:
var MAP, ohmlayer, dateslider;
MAP = L.map('map', {})
.setView([ 40.80623, -73.91894 ], 14.6);
ohmlayer = L.mapboxGL({
... MBGL layer options here, such as API key, style object or URL, et cetera ...
})
.addTo(MAP);
// add the TimeSliderControl tied to the ohmlayer
dateslider = new L.Control.MBGLTimeSlider({
mbgllayer: ohmlayer, // specify the L.mapboxGL layer to filter
timeSliderOptions: { // these are passed directly to the Mapbox GL TimeSlider.TimeSliderControl as-given
sourcename: "osm", // required
date: 1850,
range: [1800, 2000],
datelimit: [1600, 2100],
onDateSelect: function (newdate) {
console.log([ 'date changed', newdate ]);
},
onRangeChange: function (newrange) {
console.log([ 'range changed', newrange[0], newrange[1] ]);
}
},
})
.addTo(MAP);
mbgllayer -- The L.mapboxGL layer to be filtered
timeSliderOptions -- A set of options to be passed to the Mapbox GL TimeSlider.TimeSliderControl These are passed as-is. See the documentation for the TimeSliderControl for details.
position -- Set the Leaflet Control Position for the control, e.g. bottomright. Use this instead of timeSliderOptions.position
All L.Control.TimeSliderControl methods are simply those of the Mapbox GL TimeSlider.TimeSliderControl and all arguments are passed to the underlying control as-is. See the documentation for the TimeSliderControl for details.
People have become accustomed to having the map state reflected in the URL hash as they change it, and for page loading to implicitly include loading the URL hash into the starting map view.
To facilitate this behavior in your application, we provide L.Control.MBGLTimeSliderUrlHashReader and L.Control.MBGLTimeSliderUrlHashWriter
The L.Control.MBGLTimeSliderUrlHashReader control, when added to your map, will do one thing: read and apply the URL hash params.
The expected URL hash would be structured like this example: #16.6/40.8217108/-73.9119449/1980,1970-2000
- The zoom level, which may be integer or fractional.
- The latitude of the starting map view's center.
- The longitude of the starting map view's center.
- The MBGLTimeSlider settings: the selected date, then the range.
The MBGLTimeSliderUrlHashReader has only one constructor option: timeslidercontrol which points to the MBGLTimeSlider that it should set.
const urlreader = new L.Control.MBGLTimeSliderUrlHashReader({
timeslidercontrol: timeslider,
});
MAP.addControl(urlreader);
After it has set the map view and MBGLTimeSlider date and range, the TimeSlider.URLHashReader control has no other effect, and has no visible user interface.
The L.Control.MBGLTimeSliderUrlHashWriter control continuously tracks changes to the map view and/or to the MBGLTimeSlider settings, and updates the URL hash in the address bar. When used in conjunction with MBGLTimeSliderUrlHashReader, the effect is that one may reload the page and automagically have their previous view applied on page load.
The MBGLTimeSliderUrlHashWriter has only one constructor option: timeslidercontrol which points to the MBGLTimeSlider that it should be tracking.
const urlwriter = new TimeSlider.L.Control.MBGLTimeSliderUrlHashWriter({
timeslidercontrol: timeslider,
});
MAP.addControl(urlwriter);
The MBGLTimeSliderUrlHashWriter has no visible UI control. It will stop updating the URL if it is removed from the map via MAP.removeControl()
Again, note that this is just a wrapper for the Mapbox GL TimeSlider.TimeSliderControl so if you're trying to alter functionality or styling of the time slider, you should probably be making edits to that code instead.
Babel, SASS/SCSS, Webpack.
Most edits would be made to these files:
leaflet-control-mbgltimeslider-control.js-- the widget's JavaScript source codeleaflet-control-mbgltimeslider-control.scss-- the widget's SASS stylesheet
Commands of note:
nvm install && nvm use && yarn install-- first-time project setup to set up the proper version of Node and the dependencies; you probably only need to do this the first time you set up, after yougit clonethe reponvm use && npm run serve-- select the right Node, then start up a web server and a new browser window; use this in conjunction withnpm run watchfor your day-to-day worknpm run build-- compile the control for distribution and use in other browsers and sites; output goes into thedist/foldernpm run watch-- watches for changes to the files listed above, automagically runningnpm run buildfor you when they are changed
The dist/ folder is kept in version control, so the ready-to-use control will be readily available on Github.