From 94f579d48841f3895d8b750c0895d0aa69619478 Mon Sep 17 00:00:00 2001 From: rylon Date: Sun, 22 Jun 2014 21:57:36 +0200 Subject: [PATCH] friseurteam map modal, colors --- .../page/default_page/default_page.css | 64 +++++++--- friseurteam/page/default_page/default_page.js | 4 + .../page/default_page/default_page.php | 13 +- friseurteam/page/default_page/friseurteam.tpl | 20 ++- friseurteam/page/default_page/map.js | 114 ++++++++++++++++++ 5 files changed, 190 insertions(+), 25 deletions(-) create mode 100644 friseurteam/page/default_page/map.js diff --git a/friseurteam/page/default_page/default_page.css b/friseurteam/page/default_page/default_page.css index 0296c26..7513902 100644 --- 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; } diff --git a/friseurteam/page/default_page/default_page.js b/friseurteam/page/default_page/default_page.js index 2a11bba..08c216b 100644 --- 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(); + }); }); \ No newline at end of file diff --git a/friseurteam/page/default_page/default_page.php b/friseurteam/page/default_page/default_page.php index 84f885d..6d9512a 100644 --- 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 ''. - // - // + return ''. + ''. + ''. + ''. ''. - ' '; + ''. + ''; } public function html() { $vars = array(); @@ -20,6 +22,7 @@ class default_page extends SYSTEM\PAGE\Page { } public static function css(){ - return ''; + return ''. + ''; } } \ No newline at end of file diff --git a/friseurteam/page/default_page/friseurteam.tpl b/friseurteam/page/default_page/friseurteam.tpl index 1b88ace..26170da 100644 --- a/friseurteam/page/default_page/friseurteam.tpl +++ b/friseurteam/page/default_page/friseurteam.tpl @@ -7,13 +7,29 @@ ${css} +
- +

@@ -31,7 +47,7 @@
Angebot: Haareschneiden kostenlos
-
${default_content}
+
${default_content}
${default_gallery}
diff --git a/friseurteam/page/default_page/map.js b/friseurteam/page/default_page/map.js new file mode 100644 index 0000000..5940b7c --- /dev/null +++ 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; + } +} \ No newline at end of file