Revision: 4118 Author: hans URL: http://bknr.net/trac/changeset/4118
Snapshot before designer gets the work.
U trunk/projects/bos/payment-website/static/poi-ms.css U trunk/projects/bos/payment-website/static/poi-ms.html U trunk/projects/bos/payment-website/static/poi-ms.js U trunk/projects/bos/web/simple-sat-map.lisp
Modified: trunk/projects/bos/payment-website/static/poi-ms.css =================================================================== --- trunk/projects/bos/payment-website/static/poi-ms.css 2008-12-08 15:15:24 UTC (rev 4117) +++ trunk/projects/bos/payment-website/static/poi-ms.css 2008-12-08 22:05:57 UTC (rev 4118) @@ -4,17 +4,29 @@
ul#media-list li { position: relative; + height: 64px; + margin-left: 62px; +} + +ul#media-list li img { + position: absolute; + left: -62px; + top: 2px; +} + +ul#poi-list li { + position: relative; height: 44px; margin-left: 42px; }
-ul#media-list li img { +ul#poi-list li img { position: absolute; left: -42px; top: 2px; }
-ul#media-list .active { +ul#media-list .active, ul#poi-list .active { background-color: #0f0; }
Modified: trunk/projects/bos/payment-website/static/poi-ms.html =================================================================== --- trunk/projects/bos/payment-website/static/poi-ms.html 2008-12-08 15:15:24 UTC (rev 4117) +++ trunk/projects/bos/payment-website/static/poi-ms.html 2008-12-08 22:05:57 UTC (rev 4118) @@ -30,10 +30,6 @@ <img src="/infosystem/bilder/uebersichtskarte_klein.gif" width="118" height="62"/> </a> </div> - <select id="poi-selector" size="1"> - <option value="overview">Übersicht</option> - <option value="sponsors">Sponsoren</option> - </select> <div id="left-bar"> </div> </div>
Modified: trunk/projects/bos/payment-website/static/poi-ms.js =================================================================== --- trunk/projects/bos/payment-website/static/poi-ms.js 2008-12-08 15:15:24 UTC (rev 4117) +++ trunk/projects/bos/payment-website/static/poi-ms.js 2008-12-08 22:05:57 UTC (rev 4118) @@ -28,7 +28,7 @@ var mediaHandlers = { image: { icon: function (medium) { - return IMG({ src: '/image/' + medium.id + '/thumbnail,,40,40', width: 40, height: 40 }) + return IMG({ src: '/image/' + medium.id + '/thumbnail,,60,60', width: 60, height: 60 }) }, makeViewer: function (medium) { return IMG({ src: '/image/' + medium.id, @@ -38,7 +38,7 @@ }, panorama: { icon: function (medium) { - return IMG({ src: '/static/panorama-icon.gif', width: 40, height: 40 }) + return IMG({ src: '/static/panorama-icon.gif', width: 60, height: 60 }) }, makeViewer: function (medium) { return APPLET({ id: 'applet', @@ -52,7 +52,7 @@ }, movie: { icon: function (medium) { - return IMG({ src: '/static/movie-icon.gif', width: 40, height: 40 }) + return IMG({ src: '/static/movie-icon.gif', width: 60, height: 60 }) }, makeViewer: function (medium) { /* can't use DOM objects like below because IE does not grok it @@ -128,6 +128,9 @@ }
function showPOI(poi) { + if (poi.data) { + poi = poi.data; + }
$('#left-bar') .empty() @@ -140,11 +143,9 @@ map(function (medium) { if (mediaHandlers[medium.mediumType]) { $('#media-list') - .append($(A({ href: '#' }, - LI(null, + .append($(LI(null, + A({ href: '#' }, mediaHandlers[medium.mediumType].icon(medium), - (new Date(medium.timestamp)).renderDate(), - BR(), B(null, medium.title || medium.name)))) .bind('click', medium, showMedium)); } @@ -168,11 +169,22 @@ function showOverview() { $('#content-body') .empty() - .append(H2(null, NLS('Google Map'))); + .append(H2(null, NLS('Übersicht')));
$('#left-bar') - .empty(); + .empty() + .append(UL({ id: 'poi-list' }));
+ for (var i in pois) { + var poi = pois[i]; + $('#poi-list') + .append($(LI(null, + A({ href: '#' }, + IMG({ src: poi.mapIcon }), + B(poi.title)))) + .bind('click', poi, showPOI)); + } + mainMap.overview(); }
@@ -188,7 +200,7 @@ this.layers = {};
this.makeLayer = function (name) { - var tileLayer = new GTileLayer(copyrightCollection, 0, 12); + var tileLayer = new GTileLayer(copyrightCollection, 0, 14); tileLayer.getTileUrl = function(point, level) { if (level < 15) { var path = pointToPath(point, level); @@ -202,7 +214,7 @@ return tileLayer; }
- var projection = new GMercatorProjection(12); + var projection = new GMercatorProjection(14); var customMap = new GMapType( [ this.makeLayer('sat-2002'), this.makeLayer('contracts') ], @@ -223,8 +235,8 @@ } }
- this.map.enableContinuousZoom(); - this.map.enableScrollWheelZoom(); +// this.map.enableContinuousZoom(); +// this.map.enableScrollWheelZoom();
this.mapClicked = function (overlay, latlng, overlaylatlng) { log('map clicked, overlay: ' + overlay + ' latlng: ' + latlng + ' overlaylatlng: ' + overlaylatlng); @@ -241,7 +253,7 @@ this.show(); $('#map').removeClass('small'); $('#map').addClass('large'); - this.addControls(); +// this.addControls(); this.map.setCenter(projection.fromPixelToLatLng(new GPoint(7000, 6350), 6), 3, customMap); this.map.checkResize(); } @@ -272,9 +284,25 @@ return projection.fromPixelToLatLng(new GPoint(x, y), 6); }
+ var poiBaseIcon = new GIcon(G_DEFAULT_ICON); + + poiBaseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png"; + poiBaseIcon.iconSize = new GSize(20, 34); + poiBaseIcon.shadowSize = new GSize(37, 34); + poiBaseIcon.iconAnchor = new GPoint(9, 34); + poiBaseIcon.infoWindowAnchor = new GPoint(9, 2); + + var index = 0; for (var i in pois) { - var marker = new GMarker(pointToLatLng(pois[i].x, pois[i].y)); - GEvent.addListener(marker, "click", partial(showPOI, pois[i])); + var poi = pois[i]; + var letter = String.fromCharCode("A".charCodeAt(0) + index++); + var letteredIcon = new GIcon(poiBaseIcon); + + poi.mapIcon = + letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png"; + + var marker = new GMarker(pointToLatLng(poi.x, poi.y), { icon: letteredIcon }); + GEvent.addListener(marker, "click", partial(showPOI, poi)); this.map.addOverlay(marker); }
@@ -326,8 +354,8 @@
map(function (sponsor) { $('#sponsor-list') - .append($(A({ href: '#' }, - LI(null, + .append($(LI(null, + A({ href: '#' }, IMG({ src: '/images/flags/' + sponsor.country.toLowerCase() + '.gif'}), (new Date(sponsor.contracts[0].timestamp)).renderDate(), BR(), @@ -363,9 +391,7 @@ for (var i in data.pois) { var poi = data.pois[i]; pois[poi.id] = poi; - $('#poi-selector').append(OPTION({ value: poi.id }, poi.title)); } - $('#poi-selector').bind('change', null, selectPage);
mainMap = new Map();
Modified: trunk/projects/bos/web/simple-sat-map.lisp =================================================================== --- trunk/projects/bos/web/simple-sat-map.lisp 2008-12-08 15:15:24 UTC (rev 4117) +++ trunk/projects/bos/web/simple-sat-map.lisp 2008-12-08 22:05:57 UTC (rev 4118) @@ -8,9 +8,18 @@ ;; directions. It is then stored in a quad tree, with each node ;; having one image and four children.
-(defparameter *levels* 6) -(defparameter *tree-size* 16384) -(defparameter *tile-size* 256) +(defparameter *tree-levels* 12 + "Total number of levels in the tree.") + +(defparameter *tree-size* 16384 + "Width and height of the tree's base image.") + +(defparameter *tile-size* 256 + "Width and height of the tiles in the tree.") + +(defvar *image-levels* (floor (- (log *tree-size* 2) (log *tile-size* 2))) + "Number of levels in the tree with images attached. Below that, images are zoomed.") + (defparameter *tile-pow* (floor (log *tile-size* 2)))
(define-persistent-class tree () @@ -35,7 +44,7 @@ ((make-quad (x y level) (apply #'make-instance 'node :x x :y y :level level - (when (< level *levels*) + (when (< level *image-levels*) (let* ((next-level (1+ level)) (next-tile-size (/ *tree-size* (expt 2 next-level)))) (list :children @@ -55,6 +64,7 @@ (y :read) (level :read) (images :read :initform (make-hash-table)) + (contracts :read :initform nil) (children :read :initform nil)))
(defun node-pixel-size (node) @@ -86,7 +96,7 @@ (cl-gd:with-image* (256 256 t) (setf (cl-gd:save-alpha-p) t) (let ((transparent (cl-gd:find-color 255 255 255 :alpha 127)) - (factor (expt 2 (- *levels* (node-level node))))) + (factor (expt 2 (- *image-levels* (node-level node))))) (cl-gd:do-rows (y) (cl-gd:do-pixels-in-row (x) (let ((m2 (find-m2 (+ (node-x node) @@ -138,7 +148,7 @@ (bknr.images:make-store-image :image tile :name image-name :if-exists :kill))) - (when (< level *levels*) + (when (< level *image-levels*) (let ((next-tile-source-size (/ tile-source-size 2)) (next-level (1+ level))) (destructuring-bind (one two three four) (node-children node) @@ -167,12 +177,12 @@ (node (tree-root tree)) (path (or (bknr.web:query-param "path") ""))) (dotimes (i (min (length path) - *levels*)) + *image-levels*)) (setf node (nth (parse-integer path :start i :end (1+ i)) (node-children node)))) - (when (> (length path) *levels*) + (when (> (length path) *image-levels*) (setf (hunchentoot:aux-request-value 'zoom-path) - (subseq path *levels*))) + (subseq path *image-levels*))) (or (node-image node layer) (when (find layer (tree-layers tree)) (transparent-image)))))
-
BKNR Commits