var gTileSize = 256;
var gMaxZoom = 18; // The minimum is 0.
+var gMinTrackAccuracy = 1000; // meters
+var gTrackWidth = 2; // pixels
+var gTrackColor = "#FF0000";
+var gCurLocSize = 5; // pixels
+var gCurLocColor = "#800000";
+
var gMapStyles = {
// OSM tile usage policy: http://wiki.openstreetmap.org/wiki/Tile_usage_policy
// Find some more OSM ones at http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Tile_servers
osm_mapnik:
{name: "OpenStreetMap (Mapnik)",
url: "http://tile.openstreetmap.org/{z}/{x}/{y}.png",
- copyright: 'Map data and imagery © <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'},
+ copyright: 'Map data and imagery © <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://www.openstreetmap.org/copyright">ODbL/CC-BY-SA</a>'},
osm_cyclemap:
{name: "Cycle Map (OSM)",
url: "http://[a-c].tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
- copyright: 'Map data and imagery © <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'},
+ copyright: 'Map data and imagery © <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://www.openstreetmap.org/copyright">ODbL/CC-BY-SA</a>'},
osm_transmap:
{name: "Transport Map (OSM)",
url: "http://[a-c].tile2.opencyclemap.org/transport/{z}/{x}/{y}.png",
- copyright: 'Map data and imagery © <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'},
+ copyright: 'Map data and imagery © <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://www.openstreetmap.org/copyright">ODbL/CC-BY-SA</a>'},
mapquest_open:
{name: "MapQuest OSM",
- url: "http://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png",
- copyright: 'Data, imagery and map information provided by MapQuest, <a href="http://www.openstreetmap.org/">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.'},
+ url: "http://otile[1-4].mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png",
+ copyright: 'Map data © <a href="http://www.openstreetmap.org/">OpenStreetMap</a> and contributors (<a href="http://www.openstreetmap.org/copyright">ODbL/CC-BY-SA</a>), tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a>.'},
mapquest_aerial:
{name: "MapQuest Open Aerial",
- url: "http://oatile1.mqcdn.com/naip/{z}/{x}/{y}.png",
- copyright: 'Data, imagery and map information provided by MapQuest, <a href="http://www.openstreetmap.org/">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.'},
+ url: "http://oatile[1-4].mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg",
+ copyright: 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a>, portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency.'},
+ opengeoserver_arial:
+ {name: "OpenGeoServer Aerial",
+ url: "http://services.opengeoserver.org/tiles/1.0.0/globe.aerial_EPSG3857/{z}/{x}/{y}.png?origin=nw",
+ copyright: 'Tiles by <a href="http://www.opengeoserver.org/">OpenGeoServer.org</a>, <a href="https://creativecommons.org/licenses/by/3.0/at/">CC-BY 3.0 AT</a>.'},
google_map:
{name: "Google Maps",
url: " http://mt1.google.com/vt/x={x}&y={y}&z={z}",
var gLastTrackPoint, gLastDrawnPoint;
var gCenterPosition = true;
+var gCurPosMapCache;
+
function initMap() {
gGeolocation = navigator.geolocation;
gCanvas = document.getElementById("map");
gCanvas.addEventListener("touchcancel", mapEvHandler, false);
gCanvas.addEventListener("touchleave", mapEvHandler, false);
+ // XXX deprecated? see https://groups.google.com/forum/?fromgroups#!topic/mozilla.dev.planning/kuhrORubaRY[1-25]
gCanvas.addEventListener("DOMMouseScroll", mapEvHandler, false);
gCanvas.addEventListener("mousewheel", mapEvHandler, false);
gCanvas.width = canvasWidth;
gCanvas.height = canvasHeight;
drawMap();
+ showUI();
}
function zoomIn() {
if (mapSel.selectedIndex >= 0 && gActiveMap != mapSel.value) {
gActiveMap = mapSel.value;
gTiles = {};
+ document.getElementById("copyright").innerHTML =
+ gMapStyles[gActiveMap].copyright;
+ showUI();
drawMap();
}
}
.replace("{x}", norm.x)
.replace("{y}", norm.y)
.replace("{z}", norm.z)
- .replace("[a-c]", String.fromCharCode(97 + Math.floor(Math.random() * 2)));
+ .replace("[a-c]", String.fromCharCode(97 + Math.floor(Math.random() * 2)))
+ .replace("[1-4]", 1 + Math.floor(Math.random() * 3));
}
// Returns true if the tile is outside the current view.
var trackpoint = gps2xy(aLatitude, aLongitude);
// lastPoint is for optimizing (not actually executing the draw until the last)
trackpoint.optimized = (lastPoint === false);
+ var mappos = {x: Math.round((trackpoint.x - gPos.x) / gZoomFactor + gCanvas.width / 2),
+ y: Math.round((trackpoint.y - gPos.y) / gZoomFactor + gCanvas.height / 2)};
if (!gLastDrawnPoint || !gLastDrawnPoint.optimized) {
- gContext.strokeStyle = "#FF0000";
+ gContext.strokeStyle = gTrackColor;
gContext.fillStyle = gContext.strokeStyle;
- gContext.lineWidth = 2;
+ gContext.lineWidth = gTrackWidth;
gContext.lineCap = "round";
gContext.lineJoin = "round";
}
gContext.stroke();
gContext.beginPath();
trackpoint.optimized = false;
- gContext.arc(Math.round((trackpoint.x - gPos.x) / gZoomFactor + gCanvas.width / 2),
- Math.round((trackpoint.y - gPos.y) / gZoomFactor + gCanvas.height / 2),
+ gContext.arc(mappos.x, mappos.y,
gContext.lineWidth, 0, Math.PI * 2, false);
gContext.fill();
}
gContext.moveTo(Math.round((gLastDrawnPoint.x - gPos.x) / gZoomFactor + gCanvas.width / 2),
Math.round((gLastDrawnPoint.y - gPos.y) / gZoomFactor + gCanvas.height / 2));
}
- gContext.lineTo(Math.round((trackpoint.x - gPos.x) / gZoomFactor + gCanvas.width / 2),
- Math.round((trackpoint.y - gPos.y) / gZoomFactor + gCanvas.height / 2));
+ gContext.lineTo(mappos.x, mappos.y);
if (!trackpoint.optimized)
gContext.stroke();
}
gLastDrawnPoint = trackpoint;
}
+function drawCurrentLocation(trackPoint) {
+ var locpoint = gps2xy(trackPoint.coords.latitude, trackPoint.ccords.longitude);
+ var circleSize = gCurLocSize;
+ var mappos = {x: Math.round((locpoint.x - gPos.x) / gZoomFactor + gCanvas.width / 2),
+ y: Math.round((locpoint.y - gPos.y) / gZoomFactor + gCanvas.height / 2)};
+
+ // Initialize or draw cache.
+ if (!gCurPosMapCache)
+ gCurPosMapCache = {point: locpoint,
+ data: context.createImageData(circleSize, circleSize)};
+ else
+ gContext.putImageData(gCurPosMapCache, mappos.x - circleSize / 2,
+ mappos.y - circleSize / 2);
+
+ // Cache overdrawn area.
+ gCurPosMapCache = gContext.getImageData(mappos.x - circleSize / 2,
+ mappos.y - circleSize / 2,
+ circleSize, circleSize);
+
+ gContext.strokeStyle = gCurLocColor;
+ gContext.fillStyle = gContext.strokeStyle;
+ gContext.beginPath();
+ gContext.arc(mappos.x, mappos.y,
+ circleSize, 0, Math.PI * 2, false);
+ gContext.fill();
+}
+
var mapEvHandler = {
handleEvent: function(aEvent) {
var touchEvent = aEvent.type.indexOf('touch') != -1;
}
gLastMouseX = x;
gLastMouseY = y;
+ showUI();
break;
case "mousemove":
case "touchmove":
gPos.x -= dX * gZoomFactor;
gPos.y -= dY * gZoomFactor;
drawMap();
+ showUI();
}
gLastMouseX = x;
gLastMouseY = y;
case "mouseup":
case "touchend":
gDragging = false;
+ showUI();
break;
case "mouseout":
case "touchcancel":
heading: position.coords.heading,
speed: position.coords.speed},
beginSegment: !gLastTrackPoint};
- gLastTrackPoint = tPoint;
- gTrack.push(tPoint);
- try { gTrackStore.push(tPoint); } catch(e) {}
- var redrawn = false;
- if (gCenterPosition) {
- var posCoord = gps2xy(position.coords.latitude,
- position.coords.longitude);
- if (Math.abs(gPos.x - posCoord.x) > gCanvas.width * gZoomFactor / 4 ||
- Math.abs(gPos.y - posCoord.y) > gCanvas.height * gZoomFactor / 4) {
- gPos.x = posCoord.x;
- gPos.y = posCoord.y;
- drawMap(); // This draws the current point as well.
- redrawn = true;
+ // Only add point to track is accuracy is good enough.
+ if (tPoint.coords.accuracy < gMinTrackAccuracy) {
+ gLastTrackPoint = tPoint;
+ gTrack.push(tPoint);
+ try { gTrackStore.push(tPoint); } catch(e) {}
+ var redrawn = false;
+ if (gCenterPosition) {
+ var posCoord = gps2xy(position.coords.latitude,
+ position.coords.longitude);
+ if (Math.abs(gPos.x - posCoord.x) > gCanvas.width * gZoomFactor / 4 ||
+ Math.abs(gPos.y - posCoord.y) > gCanvas.height * gZoomFactor / 4) {
+ gPos.x = posCoord.x;
+ gPos.y = posCoord.y;
+ drawMap(); // This draws the current point as well.
+ redrawn = true;
+ }
}
+ if (!redrawn)
+ drawTrackPoint(position.coords.latitude, position.coords.longitude, true);
}
- if (!redrawn)
- drawTrackPoint(position.coords.latitude, position.coords.longitude, true);
+ drawCurrentLocation(tPoint);
},
function(error) {
// Ignore erros for the moment, but this is good for debugging.
projects / lantea.git / blobdiff