Permalink
Browse files

more options for urbandistance

  • Loading branch information...
1 parent fdf7ddc commit 12bc685c5f3b927fb0d80eca29d1c59ddc9127b7 @stefanw committed Jun 14, 2010
Showing with 109 additions and 81 deletions.
  1. +13 −8 london.html
  2. +7 −55 media/js/mapnificent.js
  3. +85 −18 media/layers/urbandistance.js
  4. +4 −0 media/layers/urbandistanceworker.js
View
@@ -24,18 +24,18 @@ <h1 id="about-header"><img style="vertical-align:middle;margin:10px 0 0;" src="m
<h2 style="position:relative;top:-30px;left:90px">London</h2>
<nav class="nav">
<ul>
- <li><a class="toggle" href="#about">About / Impressum</a></li>
+ <li><a class="toggle" href="#about">About</a></li>
</ul>
</nav>
</header>
<section id="about" class="vcard contentoverlay">
<a class="close toggle" href="#about">close</a>
<h2 class="center">It's <img style="vertical-align:middle;margin:10px 0 0;" src="media/img/mapnificent.png" alt="Mapnificent"/></h2>
- <p>Mapnificent shows you the area you can reach with public transport from any point in a given time.</p>
+ <p>Mapnificent London claims to know all weekend night busses after 1am in London.</p>
<p>It was inspired by <a href="http://mapumental.channel4.com">mapumental</a> and you can read the <a href="http://blog.stefanwehrmeyer.com/post/449810520/mapnificent">full story of Mapnificent on my blog</a>.</p>
<p>Mapnificent is licensed under <a href="http://creativecommons.org/licenses/by-nc-sa/3.0">cc-by-nc-sa</a> and <a href="http://github.com/stefanw/Mapnificent">the code is on GitHub</a>.</p>
- <h2>Impressum</h2>
- <p>Mapnificent was created by<br/>
+ <h2>Mapnificent was created by</h2>
+ <p>
<a class="url" href="http://stefanwehrmeyer.com" title="Stefan Wehrmeyer">
<span class="given-name">Stefan</span>
<span class="family-name">Wehrmeyer</span>
@@ -61,12 +61,17 @@ <h2 class="center">It's <img style="vertical-align:middle;margin:10px 0 0;" src=
var MAPNIFICENT_LAYER = {};
var MAPNIFICENT_LAYERDATA = {};
var mapnificent = Mapnificent({"mapStartCenter": {"lat": 51.500515, "lng": -0.128317},
- "northwest": {"lat":51.635067, "lng":-0.355682},
- "southeast": {"lat":51.399206,"lng": 0.171661},
+ "northwest": {"lat":51.713416, "lng":-0.560303},
+ "southeast": {"lat":51.273944, "lng":0.346069},
"mapStartZoom": 12,
"layerSettings": {"urbanDistance":
- {"defaultStartAtPosition": {"lat": 51.4945146, "lng": -0.146578}},
- "darkOverlayColor": "rgba(75,75,75,0.7)"
+ {"defaultStartAtPosition": {"lat": 51.4945146, "lng": -0.146578}
+ , "darkOverlayColor": "rgba(0,0,0,0.75)"
+ , "colorMaxAcceptableTime": 120
+ , "colorBaseGradientColor": 240
+ , "colorMaxGradientColor" : 120
+ , "estimatedMaxCalculateCalls": 700000
+ }
},
"mapStyles": {"Night": [
{
View
@@ -132,13 +132,13 @@ var Mapnificent = (function(){
defaults.mapTypeIds = [google.maps.MapTypeId.ROADMAP];
defaults.heightCacheFactor = 3;
defaults.widthCacheFactor = 5;
+ defaults.layerSettings = {};
defaults.getGMapOptions = function(){
return {"googleBarOptions": {"client": "pub-8009811934212849",
"channel": "6817437931",
"adsafe": "low",
"language": "de"}};
};
- defaults.blockSize = 0.5; // in km 500 * 500 meters per block
that.env = {};
for(var key in defaults){
@@ -186,8 +186,6 @@ var Mapnificent = (function(){
that.env.Gnortheast = new google.maps.LatLng(that.env.northeast.lat, that.env.northeast.lng);
that.env.widthInKm = that.getDistanceInKm(that.env.northwest, that.env.northeast);
that.env.heightInKm = that.getDistanceInKm(that.env.northwest, that.env.southwest);
- that.env.blockCountX = Math.ceil(that.env.widthInKm / that.env.blockSize);
- that.env.blockCountY = Math.ceil(that.env.heightInKm / that.env.blockSize);
jQuery("#"+that.mapID).height(jQuery(window).height());
that.env.getGMapOptions();
var lastStyle = google.maps.MapTypeId.ROADMAP;
@@ -202,7 +200,7 @@ var Mapnificent = (function(){
, "mapTypeId": lastStyle
, "mapTypeControlOptions": {
"mapTypeIds": that.env.mapTypeIds
- },
+ }
};
that.map = new google.maps.Map(document.getElementById(that.mapID), mapOptions);
for(var style in that.env.mapStyles){
@@ -471,19 +469,6 @@ var Mapnificent = (function(){
pos.lng<that.env.northwest.lng || pos.lng>that.env.southeast.lng) {return false;}
return true;
};
- that.getBlockIndizesForPosition = function(pos) {
- /* This is somewhat less correct, but should be faster than alternative */
- if(!that.inRange(pos)){return [0,0];}
- var indexX = Math.floor((that.env.widthInKm / that.env.latLngDiffs.lng * (pos.lng - that.env.northwest.lng)) / that.env.blockSize);
- var indexY = Math.floor((that.env.heightInKm / that.env.latLngDiffs.lat * (that.env.northwest.lat - pos.lat)) / that.env.blockSize);
- return [indexX, indexY];
- };
- that.getAlternativeBlockIndizesForPosition = function(pos) {
- if(!that.inRange(pos)){return [0,0];}
- var indexX = Math.floor(that.getDistanceInKm(pos,{"lat": pos.lat, "lng": that.env.northwest.lng}) / that.env.blockSize);
- var indexY = Math.floor(that.getDistanceInKm(pos,{"lat": that.env.northwest.lat, "lng":pos.lng}) / that.env.blockSize);
- return [indexX, indexY];
- };
that.getCanvasXY = function(pos) {
var xy = that.canvasoverlay.fromLatLngToDivPixel(new google.maps.LatLng(pos.lat, pos.lng));
var x = xy.x - (that.canvasoverlayxy.x);
@@ -551,7 +536,11 @@ var Mapnificent = (function(){
}
that.layers[idname].tabid = tabid;
var container = that.refreshControls(idname);
- that.layers[idname].layerObject.setup(that.layers[idname].data, container, that.env.layerSettings[idname]);
+ var lsettings = {};
+ if(typeof(that.env.layerSettings[idname])!== 'undefined'){
+ lsettings = that.env.layerSettings[idname];
+ }
+ that.layers[idname].layerObject.setup(that.layers[idname].data, container, lsettings);
if(!that.isLayerActive(idname)){
that.layers[idname].layerObject.deactivate();
} else {
@@ -612,43 +601,6 @@ var Mapnificent = (function(){
}
return result;
};
- that.getBlockIndizesForPositionByRadius = function(pos, rad) {
- var indizes = that.getBlockIndizesForPosition(pos);
- if(rad == 0){
- return [indizes];
- }
- var results = [];
- var maxDistanceToEdge = Math.max(Math.abs(that.env.blockCountX-indizes[0]), Math.abs(indizes[1]-that.env.blockCountY));
- var nearestObjects = [];
- for(var i=rad;i<maxDistanceToEdge;i++){
- for (var j=-i;j<(i+1);j++){
- var nx = indizes[0]-i;
- var ny = indizes[1]+j;
- if(nx>=0 && ny < that.env.blockCountY && ny > 0){
- results.push([nx,ny]);
- }
- var nx = indizes[0]+i;
- var ny = indizes[1]+j;
- if(nx < that.env.blockCountX && ny < that.env.blockCountY && ny > 0){
- results.push([nx,ny]);
- }
- if(j>-i && j<i){
- var nx = indizes[0]+j;
- var ny = indizes[1]-i;
- if(nx < that.env.blockCountX && nx > 0 && ny >= 0){
- results.push([nx,ny]);
- }
- var nx = indizes[0]+j;
- var ny = indizes[1]-i;
- if(nx < that.env.blockCountX && nx > 0 && ny >= 0){
- results.push([nx,ny]);
- }
- }
- }
- break; // algorithm change: break here, wait for next round. I miss iterators.
- }
- return results;
- };
that.addTab = function(idname, title, active) {
that.tabs.push(idname);
@@ -84,10 +84,11 @@ MAPNIFICENT_LAYER.urbanDistance = (function (mapnificent){
, callbacksForIndex = {}
, minutesPerKm = 13
, estimatedMinuteLimit = 600 // 10 hours travel in a city, really?
- , colorMaxAcceptableTime = 60
+ , colorMaxAcceptableTime = 120
, colorBaseGradientColor = 120
- , colorMaxGradientColor = 0
+ , colorMaxGradientColor = 240
, maxWalkTime = 10
+ , maxWalkTravelTime = 180
, positionCounter = -1
, startPositions = {}
, startPositionsCount = 0
@@ -98,12 +99,69 @@ MAPNIFICENT_LAYER.urbanDistance = (function (mapnificent){
, lines
, defaultStartAtPosition = {"lat":52.525849,"lng":13.368919}
, darkOverlayColor = "rgba(75,75,75,0.4)"
+ , estimatedMaxCalculateCalls = 2000000
, intersection = false
, colored = false
, colorCache = {}
- , minuteSorted = false;
-
-
+ , minuteSorted = false
+ , blockCountX
+ , blockCountY
+ , blockSize = 0.5; // in km 500 * 500 meters per block
+
+ var getBlockIndizesForPosition = function(pos) {
+ var indexX = Math.floor((mapnificent.env.widthInKm / mapnificent.env.latLngDiffs.lng * (pos.lng - mapnificent.env.northwest.lng)) / blockSize);
+ var indexY = Math.floor((mapnificent.env.heightInKm / mapnificent.env.latLngDiffs.lat * (mapnificent.env.northwest.lat - pos.lat)) / blockSize);
+ return [indexX, indexY];
+ };
+ var getAlternativeBlockIndizesForPosition = function(pos) {
+ var indexX = Math.floor(mapnificent.getDistanceInKm(pos,{"lat": pos.lat, "lng": mapnificent.env.northwest.lng}) / blockSize);
+ var indexY = Math.floor(mapnificent.getDistanceInKm(pos,{"lat": mapnificent.env.northwest.lat, "lng":pos.lng}) / blockSize);
+ return [indexX, indexY];
+ };
+
+ var getBlockIndizesForPositionByRadius = function(pos, rad, all) {
+ var indizes = getBlockIndizesForPosition(pos);
+ if(rad === 0){
+ return [indizes];
+ }
+ var results = [];
+ var maxDistanceToEdge = Math.max(Math.abs(blockCountX-indizes[0]), Math.abs(indizes[1]-blockCountY));
+ var nearestObjects = [];
+ if(!!all){
+ var start = 0;
+ } else {
+ var start = rad;
+ }
+ for(var i=start;i<maxDistanceToEdge;i++){
+ for (var j=-i;j<(i+1);j++){
+ var nx = indizes[0]-i;
+ var ny = indizes[1]+j;
+ if(nx>=0 && ny < blockCountY && ny > 0){
+ results.push([nx,ny]);
+ }
+ var nx = indizes[0]+i;
+ var ny = indizes[1]+j;
+ if(nx < blockCountX && ny < blockCountY && ny > 0){
+ results.push([nx,ny]);
+ }
+ if(j>-i && j<i){
+ var nx = indizes[0]+j;
+ var ny = indizes[1]-i;
+ if(nx < blockCountX && nx > 0 && ny >= 0){
+ results.push([nx,ny]);
+ }
+ var nx = indizes[0]+j;
+ var ny = indizes[1]-i;
+ if(nx < blockCountX && nx > 0 && ny >= 0){
+ results.push([nx,ny]);
+ }
+ }
+ }
+ break; // algorithm change: break here, wait for next round. I miss iterators.
+ }
+ return results;
+ };
+
var updateGoby = function(e){
var newMaxWalkTime, newMinutesPerKm;
try{
@@ -152,13 +210,13 @@ MAPNIFICENT_LAYER.urbanDistance = (function (mapnificent){
'<div id="'+that.idname+'-positionContainer"></div>'+
'');
var inter = "";
- if(!mapnificent.hasCompositing){
+ if(mapnificent.hasCompositing){
inter = ' readonly="readonly"';
+ inter = '<label class="'+that.idname+'-intersection" for="'+that.idname+'-intersection">Intersect: </label><input'+inter+' class="'+that.idname+'-intersection" type="checkbox" id="'+that.idname+'-intersection"/>';
}
container.after(''+
'<div class="controlsoverlay" style="right:inherit;width:100px;left:0px !important;bottom:50px;border-left: 0px;border-bottom: 5px solid rgb(213,213,213);border-right: 5px solid rgb(213,213,213);">'+
- '<label for="'+that.idname+'-colored">Colored: </label><input type="checkbox" id="'+that.idname+'-colored"/>'+
- '<label class="'+that.idname+'-intersection" for="'+that.idname+'-intersection">Intersect: </label><input'+inter+' class="'+that.idname+'-intersection" type="checkbox" id="'+that.idname+'-intersection"/>'+
+ '<label for="'+that.idname+'-colored">Colored: </label><input type="checkbox" id="'+that.idname+'-colored"/>'+inter+
'</div>'+
'');
if(!mapnificent.hasCompositing){
@@ -208,7 +266,7 @@ MAPNIFICENT_LAYER.urbanDistance = (function (mapnificent){
'</div>');
jQuery('#'+that.idname+'-'+index).mouseover(highlightMarker(index));
jQuery('#'+that.idname+'-'+index).mouseout(unhighlightMarker(index));
- jQuery('#'+that.idname+'-'+index+'-slider').slider({ min: 0, max: 180,
+ jQuery('#'+that.idname+'-'+index+'-slider').slider({ min: 0, max: maxWalkTravelTime,
slide: updateSlider(index),
stop: updateSlider(index),
value: startPositions[index].minutes,
@@ -254,7 +312,7 @@ MAPNIFICENT_LAYER.urbanDistance = (function (mapnificent){
};
var updateCalculationProcess = function(index, count){
- var estimatedMaxCalculateCalls = 2000000, percent = 0;
+ var percent = 0;
if (count>estimatedMaxCalculateCalls){
percent = 99;
} else {
@@ -390,31 +448,40 @@ MAPNIFICENT_LAYER.urbanDistance = (function (mapnificent){
*/
that.setup = function(dataobjs, controlcontainer, options){
+ estimatedMaxCalculateCalls = options.estimatedMaxCalculateCalls || estimatedMaxCalculateCalls;
defaultStartAtPosition = options.defaultStartAtPosition || defaultStartAtPosition;
+ colorMaxGradientColor = options.colorMaxGradientColor || colorMaxGradientColor;
+ colorBaseGradientColor = options.colorBaseGradientColor || colorBaseGradientColor;
darkOverlayColor = options.darkOverlayColor || darkOverlayColor;
+ blockCountX = Math.ceil(mapnificent.env.widthInKm / blockSize);
+ blockCountY = Math.ceil(mapnificent.env.heightInKm / blockSize);
+
stations = dataobjs[0];
lines = dataobjs[1];
blockGrid = [];
- for(var i=0;i<mapnificent.env.blockCountX;i+=1){
+ for(var i=0;i<blockCountX;i+=1){
blockGrid.push([]);
- for(var j=0;j<mapnificent.env.blockCountX;j+=1){
+ for(var j=0;j<blockCountX;j+=1){
blockGrid[i].push([]);
}
}
stationList = [];
for(var stationId in stations){
for(var i=0;i<stations[stationId].reachableStations.length;i++){
- if(!stations[stationId].reachableStations[i].minutes){
+ if(!stations[stationId].reachableStations[i].minutes && stations[stationId].reachableStations[i].minutes !== 0){
stations[stationId].reachableStations[i].minutes = 2;
}
- if(!stations[stationId].reachableStations[i].stay){
+ if(!stations[stationId].reachableStations[i].stay && stations[stationId].reachableStations[i].stay !== 0){
stations[stationId].reachableStations[i].stay = 0;
}
}
if (stations[stationId].pos != null){
if(mapnificent.inRange(stations[stationId].pos)){
stationList.push(stationId);
- var indizes = mapnificent.getBlockIndizesForPosition(stations[stationId].pos);
+ var indizes = getBlockIndizesForPosition(stations[stationId].pos);
+ // var indizes = getBlockIndizesForPositionByRadius(stations[stationId].pos, 1, true);
+ // stations[stationId].blockIndizes = indizes.slice();
+ // blockGrid[indizes[0][0]][indizes[0][1]].push(stationId);
blockGrid[indizes[0]][indizes[1]].push(stationId);
}
}
@@ -438,7 +505,7 @@ MAPNIFICENT_LAYER.urbanDistance = (function (mapnificent){
, nextStations = []
, distances = [];
while(i<=1 || nextStations.length == 0){
- var indizes = mapnificent.getBlockIndizesForPositionByRadius(startPos, i);
+ var indizes = getBlockIndizesForPositionByRadius(startPos, i);
for(var j=0;j<indizes.length;j+=1){
if(blockGrid[indizes[j][0]][indizes[j][1]].length>0){
nextStations = jQuery.merge(nextStations, blockGrid[indizes[j][0]][indizes[j][1]]);
@@ -453,7 +520,7 @@ MAPNIFICENT_LAYER.urbanDistance = (function (mapnificent){
distances.push(mapnificent.getDistanceInKm(startPos, stations[nextStations[k]].pos));
}
startPositions[index].webworker.postMessage({"fromStations": nextStations, "blockGrid": blockGrid, "position": startPos,
- "stations": stations, "lines": lines, "distances": distances,
+ "stations": stations, "lines": lines, "distances": distances, "blockGrid": blockGrid,
"maxWalkTime": maxWalkTime, "minutesPerKm": minutesPerKm, "estimatedMinuteLimit": estimatedMinuteLimit});
};
@@ -538,7 +605,7 @@ MAPNIFICENT_LAYER.urbanDistance = (function (mapnificent){
ctx.globalCompositeOperation = "source-over";
}
var count = 0;
- ctx.fillStyle = "rgba(75,75,75,0.8)";
+ ctx.fillStyle = darkOverlayColor;
for(var index in startPositions){
if (!startPositions[index].ready){continue;}
if(count == 1 && intersection){
@@ -49,6 +49,9 @@ var urbandistanceWorker = (function(){
calculateTimes(station.reachableStations[i].stationId, nextMinutes,
station.reachableStations[i].line, station.reachableStations[i].stay);
}
+ // for(var i=0;station.blockIndizes.length;i++){
+ //
+ // }
return true;
};
@@ -66,6 +69,7 @@ var urbandistanceWorker = (function(){
stations = event.data.stations;
lines = event.data.lines;
startPos = event.data.position;
+ blockGrid = event.data.blockGrid;
estimatedMinuteLimit = event.data.estimatedMinuteLimit;
var fromStations = event.data.fromStations
, distances = event.data.distances

0 comments on commit 12bc685

Please sign in to comment.