1

I am creating a map using the MapQuest API with Leaflet.

Up until today the map worked fine in development and no errors were being shown in FF dev console.

This morning when I was giving a presentation of my progress of my work so far, I noticed errors started showing in the console - TypeError: this._positions is undefined. The error points to leaflet.js:2716:4

    _onDrag : function() {
        if (this._map.options.inertia) {
            var t = this._lastTime = +new Date, e = this._lastPos = this._draggable._newPos;
            this._positions.push(e), this._times.push(t), t - this._times[0] > 200 && (this._positions.shift(), this._times.shift())
        }
        this._map.fire("move").fire("drag")
    },

This error is only thrown when I grab the map and drag it to see a location offscreen i.e. Monterey, CA is in the middle of the map, I grab the map at Monterey and drag up and left to put Soledad on the viewable portion of the map. No errors are thrown when zooming in or out on the map using +/- or the mouse wheel, nor any when clicking on a marker to see what's in the popup.

Yesterday I did start adding some geoJSON functionality, but I couldn't get it to work. After seeing these errors produced, I removed the geoJSON code thinking this was the culprit. It was not. The errors are still thrown.

The map still functions as needed, but I'm sure this will cause problems down the line. Any ideas on what could be causing this?

My basic map code with some generated markers:

<script type="text/javascript">
        window.onload = function() {

            //Redraw Map in mapContainer
            var map = L.map('mapContainer', {
                layers: MQ.mapLayer(),
                    center: [ 36.603030, -121.787919 ], 
                    zoom: 10
            });


    L.marker([36.584766,-121.830645],{icon: L.AwesomeMarkers.icon({icon: '',prefix: 'fa',markerColor: 'green',iconColor: '#fff', html: '1'})}).addTo(map).bindPopup("<center>JOBID: 2648520151<br/>Start: 6:16:12 AM<br/>Stop: 6:31:43 AM</center>");

    L.marker([36.584766,-121.830645],{icon: L.AwesomeMarkers.icon({icon: '',prefix: 'fa',markerColor: 'red',iconColor: '#fff', html: '2'})}).addTo(map).bindPopup("<center>JOBID: 2648520151<br/>Start: 6:31:44 AM<br/>Stop: 10:56:21 AM</center>");

    L.marker([36.616378,-121.838497],{icon: L.AwesomeMarkers.icon({icon: '',  prefix: 'fa', markerColor: 'blue',iconColor: '#fff', html: '1'})}).addTo(map).bindPopup("<center>JOBID: 2648520151<br/>Start: 12:07:00 PM<br/>Stop: 3:21:58 PM</center>");

    L.marker([36.509596,-121.433873],{icon: L.AwesomeMarkers.icon({icon: '',  prefix: 'fa', markerColor: 'blue',iconColor: '#fff', html: '2'})}).addTo(map).bindPopup("<center>JOBID: J23069944<br/>Start: 3:30:00 PM<br/>Stop: 5:16:58 PM</center>");


            map.invalidateSize(false);

        }

    </script>
  • Please (a) post the entire stack trace, not the line where the error ultimately happens, (b) specify the Leaflet version that you're using and (c) use the debug version of the Leaflet files (leaflet-src.js instead of leaflet.js) to get a better idea of where the bug is happening. – IvanSanchez May 19 '16 at 20:36
  • @IvanSanchez Something very interesting has happened - when I switched to using leaflet-src.js as requested the errors have disappeared and the map drags function as expected. – JeetKuneDoReMi May 24 '16 at 17:12

Your Answer

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

Browse other questions tagged or ask your own question.