Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
  • 4 commits
  • 3 files changed
  • 0 comments
  • 1 contributor
4  index.html
@@ -141,7 +141,7 @@
141 141
 
142 142
   
143 143
 
144  
-    <div id="map" style="z-index:1; position:relative; margin-top: 0px;">
  144
+    <div id="map" style="z-index:1; position:relative; margin-top: 0px;" class='hide'>
145 145
       <div class="alert alert-info" style="z-index:1; position:absolute; margin-top: +40px; width: 96.5%;">
146 146
         <button class="close" data-dismiss="alert" data-dismiss="alert">×</button>
147 147
         You want a custom plot? Go <a data-toggle="modal" href="#newplot">Plot > New Plot</a> :)
@@ -149,7 +149,7 @@
149 149
     </div>
150 150
 
151 151
 
152  
-      <div id='graph_loading' class="hero-unit hide">
  152
+      <div id='graph_loading' class="hero-unit">
153 153
           <h2>Rendering Map</h2>
154 154
           <p>Please wait while the map is being rendered.</p>
155 155
           <hr>
10  js/complexcity.js
@@ -2,11 +2,11 @@
2 2
 // NOTE: time unit is second and distance unit is meter
3 3
 
4 4
 define([
5  
-	"/js/lib/modestmaps.js",
  5
+	"order!/js/lib/modestmaps.js",
  6
+    "order!/js/modestmaps.markers.js",
6 7
     "js/confighelpers.js",
7 8
     "/js/nodes.js",
8  
-    "/js/spotlight.js",
9  
-    "/js/modestmaps.markers.js"
  9
+    "/js/spotlight.js"
10 10
 	], function() {
11 11
 
12 12
 var 
@@ -117,7 +117,9 @@ function plotMap(graph) {
117 117
                 selectedNodes = new NodeLayer(false);
118 118
                 map.addLayer(selectedNodes);
119 119
 
120  
-                markers = new MM.MarkerLayer();
  120
+                var markers;
  121
+                markers = new MarkerLayer();
  122
+                
121 123
                 map.addLayer(markers);
122 124
 
123 125
                 nodes = graph.nodes
444  js/modestmaps.markers.js
... ...
@@ -1,245 +1,235 @@
1  
-// namespacing!
2  
-if (!com) {
3  
-    var com = {};
4  
-}
5  
-if (!com.modestmaps) {
6  
-    com.modestmaps = {};
7  
-}
8 1
 
9  
-(function(MM) {
  2
+/**
  3
+ * The MarkerLayer doesn't do any tile stuff, so it doesn't need to
  4
+ * inherit from MM.Layer. The constructor takes only an optional parent
  5
+ * element.
  6
+ *
  7
+ * Usage:
  8
+ *
  9
+ * // create the map with some constructor parameters
  10
+ * var map = new MM.Map(...);
  11
+ * // create a new MarkerLayer instance and add it to the map
  12
+ * var layer = new MM.MarkerLayer();
  13
+ * map.addLayer(layer);
  14
+ * // create a marker element
  15
+ * var marker = document.createElement("a");
  16
+ * marker.innerHTML = "Stamen";
  17
+ * // add it to the layer at the specified geographic location
  18
+ * layer.addMarker(marker, new MM.Location(37.764, -122.419));
  19
+ * // center the map on the marker's location
  20
+ * map.setCenterZoom(marker.location, 13);
  21
+ *
  22
+ */
  23
+ var MarkerLayer = function(parent) {
  24
+    this.parent = parent || document.createElement('div');
  25
+    this.parent.style.cssText = 'position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 0';
  26
+    this.markers = [];
  27
+    this.resetPosition();
  28
+};
  29
+
  30
+MarkerLayer.prototype = {
  31
+    // a list of our markers
  32
+    markers: null,
  33
+    // the absolute position of the parent element
  34
+    position: null,
  35
+
  36
+    // the last coordinate we saw on the map
  37
+    lastCoord: null,
  38
+    draw: function() {
  39
+        // these are our previous and next map center coordinates
  40
+        var prev = this.lastCoord,
  41
+            next = this.map.pointCoordinate({x: 0, y: 0});
  42
+        // if we've recorded the map's previous center...
  43
+        if (prev) {
  44
+            // if the zoom hasn't changed, find the delta in screen
  45
+            // coordinates and pan the parent element
  46
+            if (prev.zoom == next.zoom) {
  47
+                var p1 = this.map.coordinatePoint(prev),
  48
+                    p2 = this.map.coordinatePoint(next),
  49
+                    dx = p1.x - p2.x,
  50
+                    dy = p1.y - p2.y;
  51
+                // console.log("panned:", [dx, dy]);
  52
+                this.onPanned(dx, dy);
  53
+            // otherwise, reposition all the markers
  54
+            } else {
  55
+                this.onZoomed();
  56
+            }
  57
+        // otherwise, reposition all the markers
  58
+        } else {
  59
+            this.onZoomed();
  60
+        }
  61
+        // remember the previous center
  62
+        this.lastCoord = next.copy();
  63
+    },
  64
+
  65
+    // when zoomed, reset the position and reposition all markers
  66
+    onZoomed: function() {
  67
+        this.resetPosition();
  68
+        this.repositionAllMarkers();
  69
+    },
  70
+
  71
+    // when panned, offset the position by the provided screen coordinate x
  72
+    // and y values
  73
+    onPanned: function(dx, dy) {
  74
+        this.position.x += dx;
  75
+        this.position.y += dy;
  76
+        this.parent.style.left = ~~(this.position.x + .5) + "px";
  77
+        this.parent.style.top = ~~(this.position.y + .5) + "px";
  78
+    },
  79
+
  80
+    // remove all markers
  81
+    removeAllMarkers: function() {
  82
+        while (this.markers.length > 0) {
  83
+            this.removeMarker(this.markers[0]);
  84
+        }
  85
+    },
10 86
 
11 87
     /**
12  
-     * The MarkerLayer doesn't do any tile stuff, so it doesn't need to
13  
-     * inherit from MM.Layer. The constructor takes only an optional parent
14  
-     * element.
  88
+     * Coerce the provided value into a Location instance. The following
  89
+     * values are supported:
15 90
      *
16  
-     * Usage:
17  
-     *
18  
-     * // create the map with some constructor parameters
19  
-     * var map = new MM.Map(...);
20  
-     * // create a new MarkerLayer instance and add it to the map
21  
-     * var layer = new MM.MarkerLayer();
22  
-     * map.addLayer(layer);
23  
-     * // create a marker element
24  
-     * var marker = document.createElement("a");
25  
-     * marker.innerHTML = "Stamen";
26  
-     * // add it to the layer at the specified geographic location
27  
-     * layer.addMarker(marker, new MM.Location(37.764, -122.419));
28  
-     * // center the map on the marker's location
29  
-     * map.setCenterZoom(marker.location, 13);
  91
+     * 1. MM.Location instances
  92
+     * 2. Object literals with numeric "lat" and "lon" properties
  93
+     * 3. A string in the form "lat,lon"
  94
+     * 4. GeoJSON objects with "Point" geometries
30 95
      *
  96
+     * This function throws an exception on error.
31 97
      */
32  
-    MM.MarkerLayer = function(parent) {
33  
-        this.parent = parent || document.createElement('div');
34  
-        this.parent.style.cssText = 'position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 0';
35  
-        this.markers = [];
36  
-        this.resetPosition();
37  
-    };
38  
-
39  
-    MM.MarkerLayer.prototype = {
40  
-        // a list of our markers
41  
-        markers: null,
42  
-        // the absolute position of the parent element
43  
-        position: null,
44  
-
45  
-        // the last coordinate we saw on the map
46  
-        lastCoord: null,
47  
-        draw: function() {
48  
-            // these are our previous and next map center coordinates
49  
-            var prev = this.lastCoord,
50  
-                next = this.map.pointCoordinate({x: 0, y: 0});
51  
-            // if we've recorded the map's previous center...
52  
-            if (prev) {
53  
-                // if the zoom hasn't changed, find the delta in screen
54  
-                // coordinates and pan the parent element
55  
-                if (prev.zoom == next.zoom) {
56  
-                    var p1 = this.map.coordinatePoint(prev),
57  
-                        p2 = this.map.coordinatePoint(next),
58  
-                        dx = p1.x - p2.x,
59  
-                        dy = p1.y - p2.y;
60  
-                    // console.log("panned:", [dx, dy]);
61  
-                    this.onPanned(dx, dy);
62  
-                // otherwise, reposition all the markers
  98
+    coerceLocation: function(feature) {
  99
+        switch (typeof feature) {
  100
+            case "string":
  101
+                // "lat,lon" string
  102
+                return MM.Location.fromString(feature);
  103
+
  104
+            case "object":
  105
+                // GeoJSON
  106
+                if (typeof feature.geometry === "object") {
  107
+                    var geom = feature.geometry;
  108
+                    switch (geom.type) {
  109
+                        // Point geometries => MM.Location
  110
+                        case "Point":
  111
+                            // coerce the lat and lon values, just in case
  112
+                            var lon = Number(geom.coordinates[0]),
  113
+                                lat = Number(geom.coordinates[1]);
  114
+                            return new MM.Location(lat, lon);
  115
+                    }
  116
+                    throw 'Unable to get the location of GeoJSON "' + geom.type + '" geometry!';
  117
+                } else if (feature instanceof MM.Location ||
  118
+                    (typeof feature.lat !== "undefined" && typeof feature.lon !== "undefined")) {
  119
+                    return feature;
63 120
                 } else {
64  
-                    this.onZoomed();
  121
+                    throw 'Unknown location object; no "lat" and "lon" properties found!';
65 122
                 }
66  
-            // otherwise, reposition all the markers
67  
-            } else {
68  
-                this.onZoomed();
69  
-            }
70  
-            // remember the previous center
71  
-            this.lastCoord = next.copy();
72  
-        },
73  
-
74  
-        // when zoomed, reset the position and reposition all markers
75  
-        onZoomed: function() {
76  
-            this.resetPosition();
77  
-            this.repositionAllMarkers();
78  
-        },
79  
-
80  
-        // when panned, offset the position by the provided screen coordinate x
81  
-        // and y values
82  
-        onPanned: function(dx, dy) {
83  
-            this.position.x += dx;
84  
-            this.position.y += dy;
85  
-            this.parent.style.left = ~~(this.position.x + .5) + "px";
86  
-            this.parent.style.top = ~~(this.position.y + .5) + "px";
87  
-        },
88  
-
89  
-        // remove all markers
90  
-        removeAllMarkers: function() {
91  
-            while (this.markers.length > 0) {
92  
-                this.removeMarker(this.markers[0]);
93  
-            }
94  
-        },
95  
-
96  
-        /**
97  
-         * Coerce the provided value into a Location instance. The following
98  
-         * values are supported:
99  
-         *
100  
-         * 1. MM.Location instances
101  
-         * 2. Object literals with numeric "lat" and "lon" properties
102  
-         * 3. A string in the form "lat,lon"
103  
-         * 4. GeoJSON objects with "Point" geometries
104  
-         *
105  
-         * This function throws an exception on error.
106  
-         */
107  
-        coerceLocation: function(feature) {
108  
-            switch (typeof feature) {
109  
-                case "string":
110  
-                    // "lat,lon" string
111  
-                    return MM.Location.fromString(feature);
112  
-
113  
-                case "object":
114  
-                    // GeoJSON
115  
-                    if (typeof feature.geometry === "object") {
116  
-                        var geom = feature.geometry;
117  
-                        switch (geom.type) {
118  
-                            // Point geometries => MM.Location
119  
-                            case "Point":
120  
-                                // coerce the lat and lon values, just in case
121  
-                                var lon = Number(geom.coordinates[0]),
122  
-                                    lat = Number(geom.coordinates[1]);
123  
-                                return new MM.Location(lat, lon);
124  
-                        }
125  
-                        throw 'Unable to get the location of GeoJSON "' + geom.type + '" geometry!';
126  
-                    } else if (feature instanceof MM.Location ||
127  
-                        (typeof feature.lat !== "undefined" && typeof feature.lon !== "undefined")) {
128  
-                        return feature;
129  
-                    } else {
130  
-                        throw 'Unknown location object; no "lat" and "lon" properties found!';
131  
-                    }
132  
-                    break;
  123
+                break;
133 124
 
134  
-                case "undefined":
135  
-                    throw 'Location "undefined"';
136  
-            }
137  
-        },
138  
-
139  
-        /**
140  
-         * Add an HTML element as a marker, located at the position of the
141  
-         * provided GeoJSON feature, Location instance (or {lat,lon} object
142  
-         * literal), or "lat,lon" string.
143  
-         */
144  
-        addMarker: function(marker, feature) {
145  
-            if (!marker || !feature) {
146  
-                return null;
147  
-            }
148  
-            // convert the feature to a Location instance
149  
-            marker.location = this.coerceLocation(feature);
150  
-            // remember the tile coordinate so we don't have to reproject every time
151  
-            marker.coord = this.map.locationCoordinate(marker.location);
152  
-            // position: absolute
153  
-            marker.style.position = "absolute";
154  
-            // update the marker's position
155  
-            this.repositionMarker(marker);
156  
-            // append it to the DOM
157  
-            this.parent.appendChild(marker);
158  
-            // add it to the list
159  
-            this.markers.push(marker);
160  
-            return marker;
161  
-        },
162  
-
163  
-        /**
164  
-         * Remove the element marker from the layer and the DOM.
165  
-         */
166  
-        removeMarker: function(marker) {
167  
-            var index = this.markers.indexOf(marker);
168  
-            if (index > -1) {
169  
-                this.markers.splice(index, 1);
170  
-            }
171  
-            if (marker.parentNode == this.parent) {
172  
-                this.parent.removeChild(marker);
173  
-            }
174  
-            return marker;
175  
-        },
176  
-
177  
-        // reset the absolute position of the layer's parent element
178  
-        resetPosition: function() {
179  
-            this.position = new MM.Point(0, 0);
180  
-            this.parent.style.left = this.parent.style.top = "0px";
181  
-        },
182  
-
183  
-        // reposition a single marker element
184  
-        repositionMarker: function(marker) {
185  
-            if (marker.coord) {
186  
-                var pos = this.map.coordinatePoint(marker.coord);
187  
-                // offset by the layer parent position if x or y is non-zero
188  
-                if (this.position.x || this.position.y) {
189  
-                    pos.x -= this.position.x;
190  
-                    pox.y -= this.position.y;
191  
-                }
192  
-                marker.style.left = ~~(pos.x + .5) + "px";
193  
-                marker.style.top = ~~(pos.y + .5) + "px";
194  
-            } else {
195  
-                // TODO: throw an error?
196  
-            }
197  
-        },
  125
+            case "undefined":
  126
+                throw 'Location "undefined"';
  127
+        }
  128
+    },
198 129
 
199  
-        // Reposition al markers
200  
-        repositionAllMarkers: function() {
201  
-            var len = this.markers.length;
202  
-            for (var i = 0; i < len; i++) {
203  
-                this.repositionMarker(this.markers[i]);
204  
-            }
  130
+    /**
  131
+     * Add an HTML element as a marker, located at the position of the
  132
+     * provided GeoJSON feature, Location instance (or {lat,lon} object
  133
+     * literal), or "lat,lon" string.
  134
+     */
  135
+    addMarker: function(marker, feature) {
  136
+        if (!marker || !feature) {
  137
+            return null;
205 138
         }
206  
-    };
207  
-
208  
-    // Array.indexOf polyfill courtesy of Mozilla MDN:
209  
-    // https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/indexOf
210  
-    if (!Array.prototype.indexOf) {
211  
-        Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) {
212  
-            "use strict";
213  
-            if (this === void 0 || this === null) {
214  
-                throw new TypeError();
215  
-            }
216  
-            var t = Object(this);
217  
-            var len = t.length >>> 0;
218  
-            if (len === 0) {
219  
-                return -1;
220  
-            }
221  
-            var n = 0;
222  
-            if (arguments.length > 0) {
223  
-                n = Number(arguments[1]);
224  
-                if (n !== n) { // shortcut for verifying if it's NaN
225  
-                    n = 0;
226  
-                } else if (n !== 0 && n !== Infinity && n !== -Infinity) {
227  
-                    n = (n > 0 || -1) * Math.floor(Math.abs(n));
228  
-                }
229  
-            }
230  
-            if (n >= len) {
231  
-                return -1;
  139
+        // convert the feature to a Location instance
  140
+        marker.location = this.coerceLocation(feature);
  141
+        // remember the tile coordinate so we don't have to reproject every time
  142
+        marker.coord = this.map.locationCoordinate(marker.location);
  143
+        // position: absolute
  144
+        marker.style.position = "absolute";
  145
+        // update the marker's position
  146
+        this.repositionMarker(marker);
  147
+        // append it to the DOM
  148
+        this.parent.appendChild(marker);
  149
+        // add it to the list
  150
+        this.markers.push(marker);
  151
+        return marker;
  152
+    },
  153
+
  154
+    /**
  155
+     * Remove the element marker from the layer and the DOM.
  156
+     */
  157
+    removeMarker: function(marker) {
  158
+        var index = this.markers.indexOf(marker);
  159
+        if (index > -1) {
  160
+            this.markers.splice(index, 1);
  161
+        }
  162
+        if (marker.parentNode == this.parent) {
  163
+            this.parent.removeChild(marker);
  164
+        }
  165
+        return marker;
  166
+    },
  167
+
  168
+    // reset the absolute position of the layer's parent element
  169
+    resetPosition: function() {
  170
+        this.position = new MM.Point(0, 0);
  171
+        this.parent.style.left = this.parent.style.top = "0px";
  172
+    },
  173
+
  174
+    // reposition a single marker element
  175
+    repositionMarker: function(marker) {
  176
+        if (marker.coord) {
  177
+            var pos = this.map.coordinatePoint(marker.coord);
  178
+            // offset by the layer parent position if x or y is non-zero
  179
+            if (this.position.x || this.position.y) {
  180
+                pos.x -= this.position.x;
  181
+                pox.y -= this.position.y;
232 182
             }
233  
-            var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
234  
-            for (; k < len; k++) {
235  
-                if (k in t && t[k] === searchElement) {
236  
-                    return k;
237  
-                }
  183
+            marker.style.left = ~~(pos.x + .5) + "px";
  184
+            marker.style.top = ~~(pos.y + .5) + "px";
  185
+        } else {
  186
+            // TODO: throw an error?
  187
+        }
  188
+    },
  189
+
  190
+    // Reposition al markers
  191
+    repositionAllMarkers: function() {
  192
+        var len = this.markers.length;
  193
+        for (var i = 0; i < len; i++) {
  194
+            this.repositionMarker(this.markers[i]);
  195
+        }
  196
+    }
  197
+};
  198
+
  199
+// Array.indexOf polyfill courtesy of Mozilla MDN:
  200
+// https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/indexOf
  201
+if (!Array.prototype.indexOf) {
  202
+    Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) {
  203
+        "use strict";
  204
+        if (this === void 0 || this === null) {
  205
+            throw new TypeError();
  206
+        }
  207
+        var t = Object(this);
  208
+        var len = t.length >>> 0;
  209
+        if (len === 0) {
  210
+            return -1;
  211
+        }
  212
+        var n = 0;
  213
+        if (arguments.length > 0) {
  214
+            n = Number(arguments[1]);
  215
+            if (n !== n) { // shortcut for verifying if it's NaN
  216
+                n = 0;
  217
+            } else if (n !== 0 && n !== Infinity && n !== -Infinity) {
  218
+                n = (n > 0 || -1) * Math.floor(Math.abs(n));
238 219
             }
  220
+        }
  221
+        if (n >= len) {
239 222
             return -1;
240 223
         }
  224
+        var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
  225
+        for (; k < len; k++) {
  226
+            if (k in t && t[k] === searchElement) {
  227
+                return k;
  228
+            }
  229
+        }
  230
+        return -1;
241 231
     }
  232
+}
242 233
 
243  
-    //console.log('Markers Loaded');
  234
+//console.log('Markers Loaded');
244 235
 
245  
-})(com.modestmaps);

No commit comments for this range

Something went wrong with that request. Please try again.