gistfile1.txt

/*
here is the json being passed into the function when the user clicks on the routes dropdown box

{"locations":[{"latitude":"47.610000","longitude":"-122.330000","speed":"0","direction":"0","distance":"0.0","location_method":"na","gps_time":"Jan 3 2007 01:37PM","user_name":"wordpressUser2","session_id":"8BA21D90-3F90-407F-BAAE-800B04B1F5EA","accuracy":"137","extra_info":"na"}]}

{"locations":[{"latitude":"47.610000","longitude":"-122.330000","speed":"0","direction":"0","distance":"0.0","location_method":"na","gps_time":"Jan 3 2007 01:37PM","user_name":"wordpressUser","session_id":"8BA21D90-3F90-407F-BAAE-800B04B1F5EC","accuracy":"137","extra_info":"na"}]} 

*/
    
    function loadGPSLocations(json) {
        if (json.length == 0 || json == '0') {
            showMessage('There is no tracking data to view.');
            map.innerHTML = '';
        }
        else {
            hideWaitImage();

            // make sure we only create map object once
            if (map.id == 'map') {
                // use leaflet (http://leafletjs.com/) to create our map and map layers
                map = new L.map('map');

                var openStreetMapsURL = ('https:' == document.location.protocol ? 'https://' : 'http://') +
                 '{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
                var openStreetMapsLayer = new L.TileLayer(openStreetMapsURL,
                {attribution:'&copy;2014 <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'});

                // need to get your own bing maps key, http://www.microsoft.com/maps/create-a-bing-maps-key.aspx
                var bingMapsLayer = new L.BingLayer("AnH1IKGCBwAiBWfYAHMtIfIhMVybHFx2GxsReNP5W0z6P8kRa67_QwhM4PglI9yL");
                var googleMapsLayer = new L.Google('ROADMAP');
            
                // this fixes the zoom buttons from freezing
                // https://github.com/shramov/leaflet-plugins/issues/62
                L.polyline([[0, 0], ]).addTo(map);

                // this sets which map layer will first be displayed, go ahead and change it to bingMapsLayer or openStreetMapsLayer to see
                map.addLayer(googleMapsLayer);

                // this is the switcher control to switch between map types (upper right hand corner of map)
                map.addControl(new L.Control.Layers({
                    'Bing Maps':bingMapsLayer,
                    'Google Maps':googleMapsLayer,
                    'OpenStreetMaps':openStreetMapsLayer
                }, {}));
            }

                console.log(JSON.stringify(json));
            
                var finalLocation = false;
                var counter = 0;

                // iterate through the locations and create map markers for each location
                $(json.locations).each(function(key, value){
                    counter++;

                    // want to set the map center on the last location
                    if (counter == $(json.locations).length) {
                        map.setView(new L.LatLng($(this).attr('latitude'),$(this).attr('longitude')), zoomLevel);
                        finalLocation = true;
                    }

                    var marker = createMarker(
                        $(this).attr('latitude'),
                        $(this).attr('longitude'),
                        $(this).attr('speed'),
                        $(this).attr('direction'),
                        $(this).attr('distance'),
                        $(this).attr('location_method'),
                        $(this).attr('gps_time'),
                        $(this).attr('user_name'),
                        $(this).attr('session_id'),
                        $(this).attr('accuracy'),
                        $(this).attr('extra_info'),
                        map, finalLocation);
                });
            }

            // display route name above map
            showMessage($("#selectRoute option:selected").text());
    }

    function createMarker(latitude, longitude, speed, direction, distance, locationMethod, gpsTime,
                          userName, sessionID, accuracy, extraInfo, map, finalLocation) {
        var iconUrl;

        if (finalLocation) {
            iconUrl = pluginUrl + 'images/coolred_small.png';
        } else {
            iconUrl = pluginUrl + 'images/coolblue_small.png';
        }

        var markerIcon = new L.Icon({
                iconUrl:      iconUrl,
                shadowUrl:    pluginUrl + 'images/coolshadow_small.png',
                iconSize:     [12, 20],
                shadowSize:   [22, 20],
                iconAnchor:   [6, 20],
                shadowAnchor: [6, 20],
                popupAnchor:  [-3, -76]
        });

        var lastMarker = "</td></tr>";

        // when a user clicks on last marker, let them know it's final one
        if (finalLocation) {
            lastMarker = "</td></tr><tr><td colspan=2  style=\"text-align:center\"><b>Final location</b></td></tr>";
        }

        // convert from meters to feet
        accuracy = parseInt(accuracy * 3.28);

        var popupWindowText = "<table id=\"gps_info_table\" cellspacing=\"0\" cellpadding=\"0\">"
            + "<tr><td>&nbsp;</td><td>&nbsp;</td><td rowspan=2 align=right>"
            + "<img src=" + pluginUrl + "images/" + getCompassImage(direction) + ".jpg alt= />" + lastMarker
            + "<tr><td style=\"width:75px\">Speed:</td><td style=\"width:100px\">" + speed +  " mph</td></tr>"
            + "<tr><td>Distance:</td><td>" + distance +  " mi</td><td>&nbsp;</td></tr>"
            + "<tr><td>Time:</td><td>" + gpsTime +  "</td></tr>"
            + "<tr><td>User Name:</td><td>" + userName + "</td><td>&nbsp;</td></tr>"
            + "<tr><td>Accuracy:</td><td>" + accuracy + " ft</td><td>&nbsp;</td></tr>"
            + "<tr><td>Extra Info:</td><td>" + extraInfo + "</td><td>&nbsp;</td></tr></table>";

        L.marker(new L.LatLng(latitude, longitude), {icon: markerIcon}).bindPopup(popupWindowText).addTo(map);
    }