I'm trying to get LeafletSlider working on some geoJson data. Here's a snippet my my geoJson:

var millionmap = [{
  "type": "FeatureCollection",
  "features": [
      "type": "Feature",
      "properties": {
        "Year": 2002
      "geometry": {
        "type": "MultiPolygon",
        "coordinates": [

And this is what I've got in my code:

var testlayer = L.geoJson(millionmap);

sliderControl = L.control.sliderControl({
    position: "topright",
    layer: testlayer,
    range: true,
    timeAttribute: 'Year',
    timeStrLength: 4,
    maxValue: 2016,
    minValue: 1987


I don't think it's recognising the date in my numerical "Year" attribute, but I don't know how to fix that. I've made an attempt at forcing it with the other options there, but no dice. I've also tried:

timeAttribute: new Date('Year'),

...but that's really grasping at straws. How do I correctly feed my year into sliderControl?

Edit: Today I tried a few other things:

  1. Changing "Year" to be a string, while still explicitly specifying a timeStrLength of 4.

  2. Changing "Year" to a string, with a the LeafletSlider default time formatting (e.g. "1987-01-01 00:00:00+01").

  3. Doing the above but changing "Year" to "time", which seems to be the default.

None of these seemed to change anything.

Edit2: Honestly, now I think my problems are stemming from my incorrectly loading the JSON file. If I take the line of code that loads the file from the example, and explicitly insert (heh) the URL to the example JSON, it works fine:

    $.getJSON("http://dwilhelm89.github.io/LeafletSlider/points.json", function(json) {

If i then save that JSON off, re-host it on my domain, and link to that, it doesn't work. I don't get it.

  • Hi, I just tried with a geojson of mine and it works if I put the year as a string in my geojson (as "Year" = "2012") and if I remove the maxValue and minValue conditions... – juminet Apr 6 '17 at 8:02
  • Maybe you do have some webserver issues.. But when you access json file directly, can you read it's content? Can you post link to your data or publish a working snippet on some server or codepen for us to test it? – d324223 Apr 10 '17 at 21:29

I was looking to do something similar in Leaflet and used TimeDimension to achieve it. With TimeDimension, I just had to ensure my JSON had a property titled 'time'.

"properties": {
  "block_id": "ABC17",
  "job_id": 99999,
  "surveyor": "XXXXXXXXXX",
  "surveyor_id": 3,
  "legend": "#0dd2b9",
  "time": "2018-01-07T13:09:46.000Z"

Then to display the results, I used the following:

var timeDimension = new L.TimeDimension({
  period:     "PT180M",
  autoPlay:   true,
  timeSlider: false,
  loopButton: true,
  startOver:  true

map.timeDimension = timeDimension; 

var player = new L.TimeDimension.Player({
  transitionTime: 800, 
  loop: true
}, timeDimension); 

var timeDimensionControlOptions = {
  player:               player,
  timeDimension:        timeDimension,
  position:             'bottomleft',
  autoPlay:             true,
  backwardButton:       false,
  forwardButton:        false,
  minSpeed:             1,
  speedStep:            1,
  maxSpeed:             15,
  timeSliderDragUpdate: true

var timeDimensionControl = new L.Control.TimeDimension(timeDimensionControlOptions);

Your Answer

