socib / Leaflet.TimeDimension

Add time dimension capabilities on a Leaflet map.
MIT License
435 stars 139 forks source link

L.TimeDimension is undefined #118

Closed garyhlusko closed 7 years ago

garyhlusko commented 7 years ago

I'm sure this is an issue because I'm missing something. I'm having the error:

L.TimeDimension is undefined

Here is how I have my map declared:

` map = new L.map('map',{

                            center: [1.0,1.0],
                            layers: [osmLayer,parcelLayer,vacantlotLayer,vacanthouseLayer,cityLayer,redevelopLayer,demoLayer, markers],
                            minZoom: 1,
                            zoom: 15,
                            zoomControl:false,
                            timeDimension: true,
                            timeDimensionOptions: {
                                    timeInterval: "1000-01-01/3000-01-01"
                            },
                            timeDimensionControl: true,
                            }
                    ).setView([41.2099,-80.4927],15);

            L.control.zoom({position:'bottomright'}).addTo(map);

            var overlays = {"Parcels":parcelLayer,
                    "Vacant Lots":vacantlotLayer,
                    "Vacant Houses":vacanthouseLayer,
                    "City of Farrell":farrellLayer,
                    "Redevelopment Authority":redevelopLayer,
                    "Demo List":demoLayer};

            L.control.layers({},overlays).addTo(map);

            }

`

Late I add a GeoJson Time Dimension Layer of

var testTimeLayer = L.TimeDimension.geoJson(markers).addTo(map);

Here is my header declaration of scripts. I'm using django to pull the static files.

`

<script type="text/javascript" src="{% static 'leaflet/src/leaflet.timedimension.layer.wms.js' %}"></script>
<script type="text/javascript" src="{% static 'leaflet/src/leaflet.timedimension.layer.js' %}"></script>
<script type="text/javascript" src="{% static 'leaflet/src/leaflet.timedimension.util.js' %}"></script>
<script type="text/javascript" src="{% static 'leaflet/src/leaflet.timedimension.js' %}"></script>
<script type="text/javascript" src="{% static 'leaflet/dist/leaflet.timedimension.min.js' %}"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js"></script>

`

bielfrontera commented 7 years ago

Hi @garyhlusko, have you checked that scripts are correctly loaded? And is your script called after the declaration of the scripts?

Some comments:

  1. Use just dist/leaflet.timedimension.min.js in production. You do not need to add all the source files.
  2. iso8601-js-period has to be placed before timedimension
  3. Create the timedimension layer with L.timeDimension.layer.geoJson (note the lowercase and 'layer' in the namespace)
  4. Do not add the geojson layer markers to the map, as you will add them with the timedimension layer.
garyhlusko commented 7 years ago

Sorry for the slow reply, but thanks for the help and clarification. It helps alot.