friseurteam map modal, colors

2014-06-22 21:57:36 +02:00 · 2014-06-22 21:57:36 +02:00 · 94f579d488
commit 94f579d488
parent 0c5b9568fb
5 changed files with 190 additions and 25 deletions
--- a/friseurteam/page/default_page/default_page.css
+++ b/friseurteam/page/default_page/default_page.css
@ -5,6 +5,14 @@ body{
    font-family: Arial;
 }

+a {
+    text-decoration: none;
+    font-size: 90%;
+    font-weight: bold;
+    vertical-align: middle;
+    color: #FFB037;
+}
+
 #footer{
    width: 100%;
    color: white;
@ -22,11 +30,16 @@ body{
    float: right;
 }

+#map_link {
+    height: 110px;
+    cursor: pointer;
+}

 #content{
    float: left;
-    background-color: #F4CCD2;
-    opacity: 0.8;
+    background-color: #F996AC;
+    background-color: rgba(249, 150, 172, 0.9);
+    opacity: 0.95;
    width: 61.8%;
    min-height: 400px;
    max-height: 400px;
@ -35,20 +48,28 @@ body{
 }
 #menu {
    background-color: #990015;
-    opacity: 0.95;
    clear: both;
 }

 #content_frame {
-    width: 100%;
    margin: 0;
    padding: 0;
+    width: 100%;
+}
+
+#content_frame_frame {
+    margin-left: auto;
+    margin-right: auto;
+    padding: 0;
+    text-align: justify;
+    font-size: 105%;
+    width: 80%;
 }

 #info {
    width: 38.2%;
    float: right;
-    background-color: rgba(246, 93, 114, 0.8);
+    background-color: rgba(246, 53, 95, 0.8);
    font-weight: bold;
    //font-family: Verdana;
    height: 200px; 
@ -64,7 +85,7 @@ body{
 }

 #logo {
-    background: url(http://mojotrollz.eu/web/friseurteam/api.php?call=files&cat=page&id=header_friseurteam2.png) no-repeat #FFF;
+    background: url(http://mojotrollz.eu/web/friseurteam/api.php?call=files&cat=page&id=header_friseurteam2.png) no-repeat #FCF8F9;
    background-size: contain;
    height: 200px;
    opacity: 1;
@ -83,31 +104,38 @@ body{
    padding-top: 5px;
 }

+#menu div a{
+    display: block;
+    height: 30px;
+    color: white;
+}
+
+#menu div:hover{
+    background: #EFF0F2;
+}
+
+#menu div:hover a{
+    color: #3C85D6;
+}
+
 #menu_1{
-    background:     whitesmoke;}
+    background:     #3C85D6;}
 #menu_2{
-    background:     #C3001B;}
+    background:     #023F83;}
 #menu_3{
-    background:     tomato;}
+    background:     #91B8E4;}
 #angebot{
    float: left;
    color:     white;
    font-weight: bold;
    text-align: center;
    width: 38.2%;
-    background-color: #990015;
+    background-color: #023F83;
    height: 30px;
    padding-top: 5px;
    font-size: 12px;
 }

-a {
-    text-decoration: none;
-    font-size: 90%;
-    font-weight: bold;
-    vertical-align: middle;
-    color: wheat;
-}
 #menu_ul {
    margin: 0;
    padding: 0;
@ -121,7 +149,7 @@ a {
 #galleria_container {
    float: left;
    width: 38.2%;
-    background-color: rgba(255, 255, 255, 0.5);
+    background-color: rgba(185, 0, 40, 0.8);
    border-radius: 0 0 5px 0;
 }

--- a/friseurteam/page/default_page/default_page.js
+++ b/friseurteam/page/default_page/default_page.js
@ -2,4 +2,8 @@ $(document).ready(function() {
    $('#menu a').click(function(){
        $('#content').load('./?page='+$(this).attr('page'));
    });
+    $('#map_link').click(function(){
+        $('#map_modal').modal();
+        drawmap();
+    });
 });
--- a/friseurteam/page/default_page/default_page.php
+++ b/friseurteam/page/default_page/default_page.php
@ -2,11 +2,13 @@

 class default_page extends SYSTEM\PAGE\Page {
    public static function js(){
-        return '<script type="text/javascript" src="'.\SYSTEM\WEBPATH(new PLIB(),'jquery/jquery-1.9.1.min.js').'"></script>'.
-               // <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
-              //  <script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
+        return  '<script type="text/javascript" src="'.\SYSTEM\WEBPATH(new PLIB(),'jquery/jquery-1.9.1.min.js').'"></script>'.
+                '<script type="text/javascript" src="'.\SYSTEM\WEBPATH(new PLIB(),'bootstrap/js/bootstrap.min.js').'"></script>'.
+                '<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>'.
+                '<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>'.
                '<script type="text/javascript" src="'.\SYSTEM\WEBPATH(new PPAGE(),'default_page/js/galleria/galleria-1.2.9.min.js').'"></script>'.
-               ' <script type="text/javascript" src="'.\SYSTEM\WEBPATH(new PPAGE(),'default_page/default_page.js').'"></script>';
+                '<script type="text/javascript" src="'.\SYSTEM\WEBPATH(new PPAGE(),'default_page/default_page.js').'"></script>'.
+                '<script type="text/javascript" src="'.\SYSTEM\WEBPATH(new PPAGE(),'default_page/map.js').'"></script>';
    }
    public function html() {
        $vars = array();
@ -20,6 +22,7 @@ class default_page extends SYSTEM\PAGE\Page {
    }
    
    public static function css(){
-        return '<link rel="stylesheet" href="'.\SYSTEM\WEBPATH(new PPAGE(),'default_page/default_page.css').'" type="text/css" />';
+        return '<link rel="stylesheet" href="'.\SYSTEM\WEBPATH(new PLIB(),'bootstrap/css/bootstrap.min.css').'" type="text/css" />'.
+               '<link rel="stylesheet" href="'.\SYSTEM\WEBPATH(new PPAGE(),'default_page/default_page.css').'" type="text/css" />';
    }
 }
--- a/friseurteam/page/default_page/friseurteam.tpl
+++ b/friseurteam/page/default_page/friseurteam.tpl
@ -7,13 +7,29 @@
        ${css}
    </head>
    <body>
+        <div id="map_modal" class="modal fade">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                        <h5 class="modal-title">Anfahrt: Darmstaedter Strasse 30 - 64673 Zwingenberg</h5>
+                    </div>
+                    <div class="modal-body">
+                        <div id="map" style="width: 500px; height: 500px; display: none;"></div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
+                    </div>
+                </div><!-- /.modal-content -->
+            </div><!-- /.modal-dialog -->
+        </div><!-- /.modal -->
        
        <div id="main">
            <div id="top_container">
                <div id="logo"><div id="info_text">${page_kontakt_info}</div></div>
                <div id="info">
                    <div class="info_margin">
-                        <a href="#"><img src="./api.php?call=files&cat=page&id=marker-02.png" height="110" style="border:4px solid pink"/></a>
+                        <img id="map_link" src="./api.php?call=files&cat=page&id=marker-02.png" style="border:4px solid pink"/>
                        <div>
                            <br/>
                            <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.friseurteam-zwingenberg.de&amp;layout=button_count&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:20px; margin: 0; padding: 0; width: 140px;" allowTransparency="true"></iframe>
@ -31,7 +47,7 @@
            </div>
            <div id="angebot">Angebot: Haareschneiden kostenlos</div>
            <div id="content_frame">
-                <div id="content"><div id="content_frame_frame" style="padding-left: 25px;">${default_content}</div></div>
+                <div id="content"><div id="content_frame_frame">${default_content}</div></div>
                <div id="galleria_container"><div id="galleria">${default_gallery}</div></div>
            </div>
            <div id="footer">${page_copyright}</div>
--- a/friseurteam/page/default_page/map.js
+++ b/friseurteam/page/default_page/map.js
@ -0,0 +1,114 @@
+var map;
+var osm;
+var cycle;
+var markers;
+
+// Position und Zoomstufe der Karte
+var lon = 8.672434;
+var lat = 49.398752;
+var zoom = 11;
+
+var map_div = 'map';
+var map_lang = 'de';
+
+function drawmap() {
+    OpenLayers.Lang.setCode(map_lang);
+    map = new OpenLayers.Map(map_div, {
+        projection: new OpenLayers.Projection("EPSG:900913"),
+        displayProjection: new OpenLayers.Projection("EPSG:4326"),
+        controls: [
+            new OpenLayers.Control.Navigation(),
+            //new OpenLayers.Control.LayerSwitcher(),
+            new OpenLayers.Control.PanZoomBar(),
+        ],
+        //maxExtent:
+        //    new OpenLayers.Bounds(-20037508.34,-20037508.34,
+        //                            20037508.34, 20037508.34),
+        numZoomLevels: 18,
+        maxResolution: 156543,
+        units: 'meters'
+    });
+    
+
+    osm = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
+    cycle = new OpenLayers.Layer.OSM.CycleMap("Cycle Map");
+
+    markers = new OpenLayers.Layer.Markers("Websites", { projection: new OpenLayers.Projection("EPSG:4326"), 
+                                                         visibility: true, displayInLayerSwitcher: false, hover: true });
+
+    map.addLayers([ osm, cycle, markers]);
+    addMarker(markers, lon, lat, 1);
+    jumpTo(lon, lat, zoom);
+    $('#'+map_div).show();
+}
+
+function jumpTo(lon, lat, zoom) {
+    var x = Lon2Merc(lon);
+    var y = Lat2Merc(lat);
+    map.setCenter(new OpenLayers.LonLat(x, y), zoom);
+    return false;
+}
+function Lon2Merc(lon) {
+    return 20037508.34 * lon / 180;
+}
+ 
+function Lat2Merc(lat) {
+    var PI = 3.14159265358979323846;
+    lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);
+    return 20037508.34 * lat / 180;
+}
+ 
+function addMarker(layer, lon, lat, projectid) {
+ 
+    var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));
+    var feature = new OpenLayers.Feature(layer, ll); 
+    feature.closeBox = true;
+    //feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(300, 180)} );
+    //feature.data.popupContentHTML = popupContentHTML;
+    //feature.data.overflow = "hidden";
+ 
+    var marker = new OpenLayers.Marker(ll);
+    marker.feature = feature;
+ 
+    /*var markerClick = function(evt) {
+        /*if (this.popup == null) {
+            this.popup = this.createPopup(this.closeBox);
+            map.addPopup(this.popup);
+            this.popup.show();
+        } else {
+            this.popup.toggle();
+        }
+        console.log(popupStore);
+        OpenLayers.Event.stop(evt);
+    };*/
+    
+    var markerHover = function(evt){
+        loadPageDetails(projectid);
+        showSidebar();
+    }
+    
+    //marker.events.register('featurehighlighted', null, markerHover);
+    marker.events.register("mouseover", feature, markerHover);
+ 
+    layer.addMarker(marker);
+    //map.addPopup(feature.createPopup(feature.closeBox));
+}
+ 
+function getCycleTileURL(bounds) {
+   var res = this.map.getResolution();
+   var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
+   var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
+   var z = this.map.getZoom();
+   var limit = Math.pow(2, z);
+ 
+   if (y < 0 || y >= limit)
+   {
+     return null;
+   }
+   else
+   {
+     x = ((x % limit) + limit) % limit;
+ 
+     return this.url + z + "/" + x + "/" + y + "." + this.type;
+   }
+}