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? – deevee 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);
| improve this answer | |

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.