This is a hex bin implementation of leaflet + d3 + nouislider, using vanilla JavaScript with ECM 2016 web standards, so Internet Explorer is not supported. You can use babel
or other similar tools to make it IE compatible though.
See the example here.
Leaflet + d3 plugin from: https://github.com/Asymmetrik/leaflet-d3
Timeslider from: https://refreshless.com/nouislider/
Takes in spatial-temporal point data from a geojson and converts it to a hex representation with start and end dates being scrollable.
Include the following in the header of the HTML
file:
<!-- load css styles -->
<link rel="stylesheet" href="./static/leaflet.css" />
<link href="./static/nouislider.css" rel="stylesheet">
<link href="./static/styles.css" rel="stylesheet">
<!-- load libraries -->
<script src="./static/d3.js" charset="utf-8"></script>
<script src="./static/d3-hexbin.js" charset="utf-8"></script>
<script src="./static/leaflet-src.js"></script>
<script src="./static/nouislider.js"></script>
<script src="./static/wNumb.min.js"></script>
<script src="./static/leaflet-d3.js" charset="utf-8"></script>
<!-- load data -->
<script src="./SAMPLE_DATA.js" charset="utf-8"></script>
Clone the repository:
git clone https://github.com/albertkun/leaflet_hex_timeslider.git
geojson
is used for the data, and it should be formatted with a features.geometry.coordinates[]
array, as per GeoJSON standards:
https://en.wikipedia.org/wiki/GeoJSON
However, in the example the geojson
is brought in as a variable
as follows:
json = features.properties.Date
Time data should be stored under the properties
object, as per GeoJSON standards above.
The field used is Date
(case sentitive), with date format of 1/1/2020
or any other ISO standard.