Created
July 21, 2014 22:58
-
-
Save nickfox/ea8eb4733636ef624258 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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:'©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> </td><td> </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> </td></tr>" | |
+ "<tr><td>Time:</td><td>" + gpsTime + "</td></tr>" | |
+ "<tr><td>User Name:</td><td>" + userName + "</td><td> </td></tr>" | |
+ "<tr><td>Accuracy:</td><td>" + accuracy + " ft</td><td> </td></tr>" | |
+ "<tr><td>Extra Info:</td><td>" + extraInfo + "</td><td> </td></tr></table>"; | |
L.marker(new L.LatLng(latitude, longitude), {icon: markerIcon}).bindPopup(popupWindowText).addTo(map); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment