Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

cosmetic ui changes, readme text, about text

  • Loading branch information...
commit e3eda2b7a1560639abe94621a18414d23e82427b 1 parent b6440c6
Stefan Wehrmeyer authored June 10, 2010
8  README.mkd
Source Rendered
... ...
@@ -1,14 +1,14 @@
1 1
 Mapnificent
2  
-========
  2
+===========
3 3
 
4 4
 Mapnificent is a framework for overlaying geographical data on Google Maps using Canvas and JavaScript. No Flash or Tile-Servers. A live example with the really cool "Urban Distance" layer (inspired by [http://mapumental.channel4.com](Mapumental)) and other small layers can be found on [http://www.mapnificent.de](Mapnificent.de).
5 5
 
6  
-The framework is only known to work for small layers, e.g. the size of a not-so-small city like Berlin. Bigger layers might not work, because Mapnificent has many code parts which think the earth is actually flat.
7  
-
8 6
 The framework is currently released under [Creative Commons by-nc-sa](http://creativecommons.org/licenses/by-nc-sa/3.0). The license might get more free in the future.
9 7
 
10 8
 A documentation on how to write layers for Mapnificent is available at docs/index.html
11 9
 
12 10
 [A blog article how mapnificent was created and how it compares to mapumental](http://blog.stefanwehrmeyer.com/post/449810520/mapnificent)
13 11
 
14  
-Mapnificent currently uses [ELabel by Mike Williams](http://econym.org.uk/gmap/elabel.htm) and jQuery/jQuery UI. It only works with Google Maps.
  12
+[Slides of a talk given at JS User Group Berlin](http://stefanwehrmeyer.com/talks/slides/mapnificent_jsugberlin.pdf)
  13
+
  14
+Mapnificent currently uses jQuery/jQuery UI and only works with Google Maps. Looking forward to an OSM fork.
22  index.html
@@ -21,6 +21,7 @@
21 21
     <body>
22 22
         <header class="sidenav">
23 23
             <h1 id="about-header"><img style="vertical-align:middle;margin:10px 0 0;" src="media/img/mapnificent.png" alt="Mapnificent"/></h1>
  24
+            <h2 style="position:relative;top:-25px;left:100px">Berlin</h2>
24 25
             <nav class="nav">
25 26
                 <ul>
26 27
                     <li><a class="toggle" href="#about">About / Impressum</a></li>
@@ -30,7 +31,7 @@ <h1 id="about-header"><img style="vertical-align:middle;margin:10px 0 0;" src="m
30 31
         <section id="about" class="vcard contentoverlay">
31 32
             <a class="close toggle" href="#about">close</a>
32 33
             <h2 class="center">It's <img style="vertical-align:middle;margin:10px 0 0;" src="media/img/mapnificent.png" alt="Mapnificent"/></h2>
33  
-            <p>Mapnificent shows you the area you can reach with public transport in a given time.</p>
  34
+            <p>Mapnificent shows you the area you can reach with public transport from any point in a given time.</p>
34 35
             <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>
35 36
             <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>
36 37
             <h2>Impressum</h2>
@@ -54,10 +55,10 @@ <h2 class="center">It's <img style="vertical-align:middle;margin:10px 0 0;" src=
54 55
         <div id="message" class="shortoverlay" style="display:none"></div>
55 56
         <script src="media/js/mapnificent.js" type="text/javascript" charset="utf-8"></script>
56 57
         <script type="text/javascript" charset="utf-8">
57  
-            if($.cookie("seenVideo") == null){
58  
-                $("#video").show();
59  
-                $.cookie("seenVideo", "yes", { path: '/', expires: 28 });
60  
-            }
  58
+            // if($.cookie("seenVideo") == null){
  59
+            //     $("#video").show();
  60
+            //     $.cookie("seenVideo", "yes", { path: '/', expires: 28 });
  61
+            // }
61 62
             var MAPNIFICENT_LAYER = {};
62 63
             var MAPNIFICENT_LAYERDATA = {};
63 64
             var mapnificent = Mapnificent();
@@ -75,19 +76,8 @@ <h2 class="center">It's <img style="vertical-align:middle;margin:10px 0 0;" src=
75 76
                 });
76 77
             });
77 78
         </script>
78  
-<!--        <script src="media/js/elabel.js" type="text/javascript" charset="utf-8"></script> -->
79 79
         <script src="media/layers/urbandistance.json" type="text/javascript" charset="utf-8"></script>
80 80
         <script src="media/layers/urbandistance.js" type="text/javascript" charset="utf-8"></script>
81  
-<!--        <script src="media/layers/trafficForecast.js" type="text/javascript" charset="utf-8"></script> -->
82  
-<!--        <script src="media/layers/konjunkturmap.json" type="text/javascript" charset="utf-8"></script>
83  
-        <script src="media/layers/konjunkturmap.js" type="text/javascript" charset="utf-8"></script>
84  
-        <script src="media/layers/apartmentprices.json" type="text/javascript" charset="utf-8"></script>
85  
-        <script src="media/layers/apartmentprices.js" type="text/javascript" charset="utf-8"></script>
86  
-        <script src="media/layers/residentialareas.js" type="text/javascript" charset="utf-8"></script>
87  
-        <script src="media/layers/crimezones.json" type="text/javascript" charset="utf-8"></script>
88  
-        <script src="media/layers/crimezones.js" type="text/javascript" charset="utf-8"></script>
89  
-        <script src="media/layers/webmapservice.json" type="text/javascript" charset="utf-8"></script>
90  
-        <script src="media/layers/webmapservice.js" type="text/javascript" charset="utf-8"></script> -->
91 81
         <script type="text/javascript">
92 82
         var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
93 83
         document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
141  media/js/elabel.js
... ...
@@ -1,141 +0,0 @@
1  
-// ELabel.js 
2  
-//
3  
-//   This Javascript is provided by Mike Williams
4  
-//   Community Church Javascript Team
5  
-//   http://www.bisphamchurch.org.uk/   
6  
-//   http://econym.org.uk/gmap/
7  
-//
8  
-//   This work is licenced under a Creative Commons Licence
9  
-//   http://creativecommons.org/licenses/by/2.0/uk/
10  
-//
11  
-// Version 0.2      the .copy() parameters were wrong
12  
-// version 1.0      added .show() .hide() .setContents() .setPoint() .setOpacity() .overlap
13  
-// version 1.1      Works with GMarkerManager in v2.67, v2.68, v2.69, v2.70 and v2.71
14  
-// version 1.2      Works with GMarkerManager in v2.72, v2.73, v2.74 and v2.75
15  
-// version 1.3      add .isHidden()
16  
-// version 1.4      permit .hide and .show to be used before addOverlay()
17  
-// version 1.5      fix positioning bug while label is hidden
18  
-// version 1.6      added .supportsHide()
19  
-// version 1.7      fix .supportsHide()
20  
-// version 1.8      remove the old GMarkerManager support due to clashes with v2.143
21  
-
22  
-
23  
-      function ELabel(point, html, classname, pixelOffset, percentOpacity, overlap) {
24  
-        // Mandatory parameters
25  
-        this.point = point;
26  
-        this.html = html;
27  
-        
28  
-        // Optional parameters
29  
-        this.classname = classname||"";
30  
-        this.pixelOffset = pixelOffset||new GSize(0,0);
31  
-        if (percentOpacity) {
32  
-          if(percentOpacity<0){percentOpacity=0;}
33  
-          if(percentOpacity>100){percentOpacity=100;}
34  
-        }        
35  
-        this.percentOpacity = percentOpacity;
36  
-        this.overlap=overlap||false;
37  
-        this.hidden = false;
38  
-      } 
39  
-      
40  
-      ELabel.prototype = new google.maps.Overlay();
41  
-
42  
-      ELabel.prototype.initialize = function(map) {
43  
-        var div = document.createElement("div");
44  
-        div.style.position = "absolute";
45  
-        /* Modifications ahead: also be able to not use innerHTML */
46  
-        if(typeof(this.html) !== "string"){
47  
-            var second_div = document.createElement("div");
48  
-            second_div.className = this.classname;
49  
-            second_div.appendChild(this.html)
50  
-            div.appendChild(second_div);
51  
-        } else {
52  
-            div.innerHTML = '<div class="' + this.classname + '">' + this.html + '</div>' ;
53  
-        }
54  
-        map.getPane(G_MAP_FLOAT_SHADOW_PANE).appendChild(div);
55  
-        this.map_ = map;
56  
-        this.div_ = div;
57  
-        if (this.percentOpacity) {        
58  
-          if(typeof(div.style.filter)=='string'){div.style.filter='alpha(opacity:'+this.percentOpacity+')';}
59  
-          if(typeof(div.style.KHTMLOpacity)=='string'){div.style.KHTMLOpacity=this.percentOpacity/100;}
60  
-          if(typeof(div.style.MozOpacity)=='string'){div.style.MozOpacity=this.percentOpacity/100;}
61  
-          if(typeof(div.style.opacity)=='string'){div.style.opacity=this.percentOpacity/100;}
62  
-        }
63  
-        if (this.overlap) {
64  
-          var z = GOverlay.getZIndex(this.point.lat());
65  
-          this.div_.style.zIndex = z;
66  
-        }
67  
-        if (this.hidden) {
68  
-          this.hide();
69  
-        }
70  
-      };
71  
-
72  
-      ELabel.prototype.remove = function() {
73  
-        this.div_.parentNode.removeChild(this.div_);
74  
-      };
75  
-
76  
-      ELabel.prototype.copy = function() {
77  
-        return new ELabel(this.point, this.html, this.classname, this.pixelOffset, this.percentOpacity, this.overlap);
78  
-      };
79  
-
80  
-      ELabel.prototype.redraw = function(force) {
81  
-        var p = this.map_.fromLatLngToDivPixel(this.point);
82  
-        var h = parseInt(this.div_.clientHeight);
83  
-        this.div_.style.left = (p.x + this.pixelOffset.width) + "px";
84  
-        this.div_.style.top = (p.y +this.pixelOffset.height - h) + "px";
85  
-      };
86  
-
87  
-      ELabel.prototype.show = function() {
88  
-        if (this.div_) {
89  
-          this.div_.style.display="";
90  
-          this.redraw();
91  
-        }
92  
-        this.hidden = false;
93  
-      };
94  
-      
95  
-      ELabel.prototype.hide = function() {
96  
-        if (this.div_) {
97  
-          this.div_.style.display="none";
98  
-        }
99  
-        this.hidden = true;
100  
-      };
101  
-      
102  
-      ELabel.prototype.isHidden = function() {
103  
-        return this.hidden;
104  
-      };
105  
-      
106  
-      ELabel.prototype.supportsHide = function() {
107  
-        return true;
108  
-      };
109  
-
110  
-      ELabel.prototype.setContents = function(html) {
111  
-        this.html = html;
112  
-        this.div_.innerHTML = '<div class="' + this.classname + '">' + this.html + '</div>' ;
113  
-        this.redraw(true);
114  
-      };
115  
-      
116  
-      ELabel.prototype.setPoint = function(point) {
117  
-        this.point = point;
118  
-        if (this.overlap) {
119  
-          var z = GOverlay.getZIndex(this.point.lat());
120  
-          this.div_.style.zIndex = z;
121  
-        }
122  
-        this.redraw(true);
123  
-      };
124  
-      
125  
-      ELabel.prototype.setOpacity = function(percentOpacity) {
126  
-        if (percentOpacity) {
127  
-          if(percentOpacity<0){percentOpacity=0;}
128  
-          if(percentOpacity>100){percentOpacity=100;}
129  
-        }        
130  
-        this.percentOpacity = percentOpacity;
131  
-        if (this.percentOpacity) {        
132  
-          if(typeof(this.div_.style.filter)=='string'){this.div_.style.filter='alpha(opacity:'+this.percentOpacity+')';}
133  
-          if(typeof(this.div_.style.KHTMLOpacity)=='string'){this.div_.style.KHTMLOpacity=this.percentOpacity/100;}
134  
-          if(typeof(this.div_.style.MozOpacity)=='string'){this.div_.style.MozOpacity=this.percentOpacity/100;}
135  
-          if(typeof(this.div_.style.opacity)=='string'){this.div_.style.opacity=this.percentOpacity/100;}
136  
-        }
137  
-      };
138  
-
139  
-      ELabel.prototype.getPoint = function() {
140  
-        return this.point;
141  
-      };
20  media/layers/urbandistance.js
@@ -153,29 +153,17 @@ MAPNIFICENT_LAYER.urbanDistance = (function (mapnificent){
153 153
                 '<div id="'+that.idname+'-positionContainer"></div>'+
154 154
             '');
155 155
         var inter = "";
156  
-        if(mapnificent.hasCompositing){
157  
-            inter = '<label for="'+that.idname+'-intersection">Intersect: </label><input type="checkbox" id="'+that.idname+'-intersection"/>';
  156
+        if(!mapnificent.hasCompositing){
  157
+            inter = ' disabled="disabled"';
158 158
         }
159 159
         container.after(''+
160 160
             '<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);">'+
161 161
             '<label for="'+that.idname+'-colored">Colored: </label><input type="checkbox" id="'+that.idname+'-colored"/>'+
162  
-            inter+
  162
+            '<label for="'+that.idname+'-intersection">Intersect: </label><input'+inter+' type="checkbox" id="'+that.idname+'-intersection"/>'+
163 163
             '</div>'+
164 164
         '');
165  
-//            '<span>Area reachable in max. '+
166  
-//            '<strong id="'+that.idname+'-timeSpan"></strong> minutes <small>(no guarantee)</small> </span><span id="'+that.idname+'-hint" style="color:#0b0;">Click in the grey area to set a new position.</span>'+
167  
-//           '<div id="'+that.idname+'-slider" class="slider"></div>'+
168 165
 
169  
-/*        jQuery("#"+that.idname+'-slider').slider({ min: 0, max: 180,
170  
-               slide: updateSlider,
171  
-               stop: updateSlider, 
172  
-               value: minuteValue
173  
-            });
174  
-        jQuery("#"+that.idname+'-slider').slider("disable");
175  
-        jQuery("#"+that.idname+'-timeSpan').text(minuteValue);
176  
-        jQuery('.'+that.idname+'-goby').change(updateGoby);
177  
-        jQuery('#'+that.idname+'-gotime').change(updateGoby);*/
178  
-        jQuery('#'+that.idname+'-intersection').change(function(e){
  166
+        jQuery('#'+that.idname+'-intersection').click(function(e){
179 167
             if(!mapnificent.hasCompositing){
180 168
                 mapnificent.showMessage("Your browser does not support intersections, try Firefox or Opera!");
181 169
                 $(this).attr("checked", null);

0 notes on commit e3eda2b

Please sign in to comment.
Something went wrong with that request. Please try again.