Permalink
Browse files

cosmetic ui changes, readme text, about text

  • Loading branch information...
1 parent b6440c6 commit e3eda2b7a1560639abe94621a18414d23e82427b @stefanw committed Jun 10, 2010
Showing with 14 additions and 177 deletions.
  1. +4 −4 README.mkd
  2. +6 −16 index.html
  3. +0 −141 media/js/elabel.js
  4. +4 −16 media/layers/urbandistance.js
View
@@ -1,14 +1,14 @@
Mapnificent
-========
+===========
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).
-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.
-
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.
A documentation on how to write layers for Mapnificent is available at docs/index.html
[A blog article how mapnificent was created and how it compares to mapumental](http://blog.stefanwehrmeyer.com/post/449810520/mapnificent)
-Mapnificent currently uses [ELabel by Mike Williams](http://econym.org.uk/gmap/elabel.htm) and jQuery/jQuery UI. It only works with Google Maps.
+[Slides of a talk given at JS User Group Berlin](http://stefanwehrmeyer.com/talks/slides/mapnificent_jsugberlin.pdf)
+
+Mapnificent currently uses jQuery/jQuery UI and only works with Google Maps. Looking forward to an OSM fork.
View
@@ -21,6 +21,7 @@
<body>
<header class="sidenav">
<h1 id="about-header"><img style="vertical-align:middle;margin:10px 0 0;" src="media/img/mapnificent.png" alt="Mapnificent"/></h1>
+ <h2 style="position:relative;top:-25px;left:100px">Berlin</h2>
<nav class="nav">
<ul>
<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
<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 in a given time.</p>
+ <p>Mapnificent shows you the area you can reach with public transport from any point in a given time.</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>
@@ -54,10 +55,10 @@ <h2>Impressum</h2>
<div id="message" class="shortoverlay" style="display:none"></div>
<script src="media/js/mapnificent.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
- if($.cookie("seenVideo") == null){
- $("#video").show();
- $.cookie("seenVideo", "yes", { path: '/', expires: 28 });
- }
+ // if($.cookie("seenVideo") == null){
+ // $("#video").show();
+ // $.cookie("seenVideo", "yes", { path: '/', expires: 28 });
+ // }
var MAPNIFICENT_LAYER = {};
var MAPNIFICENT_LAYERDATA = {};
var mapnificent = Mapnificent();
@@ -75,19 +76,8 @@ <h2>Impressum</h2>
});
});
</script>
-<!-- <script src="media/js/elabel.js" type="text/javascript" charset="utf-8"></script> -->
<script src="media/layers/urbandistance.json" type="text/javascript" charset="utf-8"></script>
<script src="media/layers/urbandistance.js" type="text/javascript" charset="utf-8"></script>
-<!-- <script src="media/layers/trafficForecast.js" type="text/javascript" charset="utf-8"></script> -->
-<!-- <script src="media/layers/konjunkturmap.json" type="text/javascript" charset="utf-8"></script>
- <script src="media/layers/konjunkturmap.js" type="text/javascript" charset="utf-8"></script>
- <script src="media/layers/apartmentprices.json" type="text/javascript" charset="utf-8"></script>
- <script src="media/layers/apartmentprices.js" type="text/javascript" charset="utf-8"></script>
- <script src="media/layers/residentialareas.js" type="text/javascript" charset="utf-8"></script>
- <script src="media/layers/crimezones.json" type="text/javascript" charset="utf-8"></script>
- <script src="media/layers/crimezones.js" type="text/javascript" charset="utf-8"></script>
- <script src="media/layers/webmapservice.json" type="text/javascript" charset="utf-8"></script>
- <script src="media/layers/webmapservice.js" type="text/javascript" charset="utf-8"></script> -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
View
@@ -1,141 +0,0 @@
-// ELabel.js
-//
-// This Javascript is provided by Mike Williams
-// Community Church Javascript Team
-// http://www.bisphamchurch.org.uk/
-// http://econym.org.uk/gmap/
-//
-// This work is licenced under a Creative Commons Licence
-// http://creativecommons.org/licenses/by/2.0/uk/
-//
-// Version 0.2 the .copy() parameters were wrong
-// version 1.0 added .show() .hide() .setContents() .setPoint() .setOpacity() .overlap
-// version 1.1 Works with GMarkerManager in v2.67, v2.68, v2.69, v2.70 and v2.71
-// version 1.2 Works with GMarkerManager in v2.72, v2.73, v2.74 and v2.75
-// version 1.3 add .isHidden()
-// version 1.4 permit .hide and .show to be used before addOverlay()
-// version 1.5 fix positioning bug while label is hidden
-// version 1.6 added .supportsHide()
-// version 1.7 fix .supportsHide()
-// version 1.8 remove the old GMarkerManager support due to clashes with v2.143
-
-
- function ELabel(point, html, classname, pixelOffset, percentOpacity, overlap) {
- // Mandatory parameters
- this.point = point;
- this.html = html;
-
- // Optional parameters
- this.classname = classname||"";
- this.pixelOffset = pixelOffset||new GSize(0,0);
- if (percentOpacity) {
- if(percentOpacity<0){percentOpacity=0;}
- if(percentOpacity>100){percentOpacity=100;}
- }
- this.percentOpacity = percentOpacity;
- this.overlap=overlap||false;
- this.hidden = false;
- }
-
- ELabel.prototype = new google.maps.Overlay();
-
- ELabel.prototype.initialize = function(map) {
- var div = document.createElement("div");
- div.style.position = "absolute";
- /* Modifications ahead: also be able to not use innerHTML */
- if(typeof(this.html) !== "string"){
- var second_div = document.createElement("div");
- second_div.className = this.classname;
- second_div.appendChild(this.html)
- div.appendChild(second_div);
- } else {
- div.innerHTML = '<div class="' + this.classname + '">' + this.html + '</div>' ;
- }
- map.getPane(G_MAP_FLOAT_SHADOW_PANE).appendChild(div);
- this.map_ = map;
- this.div_ = div;
- if (this.percentOpacity) {
- if(typeof(div.style.filter)=='string'){div.style.filter='alpha(opacity:'+this.percentOpacity+')';}
- if(typeof(div.style.KHTMLOpacity)=='string'){div.style.KHTMLOpacity=this.percentOpacity/100;}
- if(typeof(div.style.MozOpacity)=='string'){div.style.MozOpacity=this.percentOpacity/100;}
- if(typeof(div.style.opacity)=='string'){div.style.opacity=this.percentOpacity/100;}
- }
- if (this.overlap) {
- var z = GOverlay.getZIndex(this.point.lat());
- this.div_.style.zIndex = z;
- }
- if (this.hidden) {
- this.hide();
- }
- };
-
- ELabel.prototype.remove = function() {
- this.div_.parentNode.removeChild(this.div_);
- };
-
- ELabel.prototype.copy = function() {
- return new ELabel(this.point, this.html, this.classname, this.pixelOffset, this.percentOpacity, this.overlap);
- };
-
- ELabel.prototype.redraw = function(force) {
- var p = this.map_.fromLatLngToDivPixel(this.point);
- var h = parseInt(this.div_.clientHeight);
- this.div_.style.left = (p.x + this.pixelOffset.width) + "px";
- this.div_.style.top = (p.y +this.pixelOffset.height - h) + "px";
- };
-
- ELabel.prototype.show = function() {
- if (this.div_) {
- this.div_.style.display="";
- this.redraw();
- }
- this.hidden = false;
- };
-
- ELabel.prototype.hide = function() {
- if (this.div_) {
- this.div_.style.display="none";
- }
- this.hidden = true;
- };
-
- ELabel.prototype.isHidden = function() {
- return this.hidden;
- };
-
- ELabel.prototype.supportsHide = function() {
- return true;
- };
-
- ELabel.prototype.setContents = function(html) {
- this.html = html;
- this.div_.innerHTML = '<div class="' + this.classname + '">' + this.html + '</div>' ;
- this.redraw(true);
- };
-
- ELabel.prototype.setPoint = function(point) {
- this.point = point;
- if (this.overlap) {
- var z = GOverlay.getZIndex(this.point.lat());
- this.div_.style.zIndex = z;
- }
- this.redraw(true);
- };
-
- ELabel.prototype.setOpacity = function(percentOpacity) {
- if (percentOpacity) {
- if(percentOpacity<0){percentOpacity=0;}
- if(percentOpacity>100){percentOpacity=100;}
- }
- this.percentOpacity = percentOpacity;
- if (this.percentOpacity) {
- if(typeof(this.div_.style.filter)=='string'){this.div_.style.filter='alpha(opacity:'+this.percentOpacity+')';}
- if(typeof(this.div_.style.KHTMLOpacity)=='string'){this.div_.style.KHTMLOpacity=this.percentOpacity/100;}
- if(typeof(this.div_.style.MozOpacity)=='string'){this.div_.style.MozOpacity=this.percentOpacity/100;}
- if(typeof(this.div_.style.opacity)=='string'){this.div_.style.opacity=this.percentOpacity/100;}
- }
- };
-
- ELabel.prototype.getPoint = function() {
- return this.point;
- };
@@ -153,29 +153,17 @@ MAPNIFICENT_LAYER.urbanDistance = (function (mapnificent){
'<div id="'+that.idname+'-positionContainer"></div>'+
'');
var inter = "";
- if(mapnificent.hasCompositing){
- inter = '<label for="'+that.idname+'-intersection">Intersect: </label><input type="checkbox" id="'+that.idname+'-intersection"/>';
+ if(!mapnificent.hasCompositing){
+ inter = ' disabled="disabled"';
}
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"/>'+
- inter+
+ '<label for="'+that.idname+'-intersection">Intersect: </label><input'+inter+' type="checkbox" id="'+that.idname+'-intersection"/>'+
'</div>'+
'');
-// '<span>Area reachable in max. '+
-// '<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>'+
-// '<div id="'+that.idname+'-slider" class="slider"></div>'+
-/* jQuery("#"+that.idname+'-slider').slider({ min: 0, max: 180,
- slide: updateSlider,
- stop: updateSlider,
- value: minuteValue
- });
- jQuery("#"+that.idname+'-slider').slider("disable");
- jQuery("#"+that.idname+'-timeSpan').text(minuteValue);
- jQuery('.'+that.idname+'-goby').change(updateGoby);
- jQuery('#'+that.idname+'-gotime').change(updateGoby);*/
- jQuery('#'+that.idname+'-intersection').change(function(e){
+ jQuery('#'+that.idname+'-intersection').click(function(e){
if(!mapnificent.hasCompositing){
mapnificent.showMessage("Your browser does not support intersections, try Firefox or Opera!");
$(this).attr("checked", null);

0 comments on commit e3eda2b

Please sign in to comment.