Changes between Version 8 and Version 9 of ZooWebSite/Demo/GdalProfileJs

Timestamp:

Dec 1, 2010, 12:02:08 PM (13 years ago)

Author:

nickboz

Comment:

--

ZooWebSite/Demo/GdalProfileJs

@@ -2 +2 @@
 #!html
 <!-- Add this in your header -->
+<style>
+.olHandlerBoxZoomBox {
+    border: 3px solid #F60 !important;
+    position: absolute !important;
+    background-color: white !important;
+    opacity: 0.50 !important;
+    font-size: 1px !important;
+    filter: alpha(opacity=50) !important;
+}
+
+.olControlNavigationHistory  {
+        background-image:none !important;
+        background-repeat:no-repeat;
+        height:24px !important;
+        width:24px !important;
+}
+
+.zoom_in {background-image:url(/../images/zoom_in.png) !important;}
+.pan {background-image:url(/../images/pan.png) !important;}
+.zoom_out {background-image:url(/../images/zoom-out.png) !important;}
+.createprofile{background-image:url(/../images/get-profile.png) !important;}
+.deleteprofile{background-image:url(/../images/delete.png) !important;}
+
+
+
+.fg-button {outline:0;margin:10px;margin-bottom:0; padding: 7px 10px; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
+.fg-button .ui-icon { position: absolute; top: 2px;  left: 2px; margin:0; }
+                        
+a.fg-button { float:left; }
+                
+button.fg-button { width:auto; overflow:visible; }
+                        
+.fg-button-icon-left { padding-left: 0; }
+.fg-button-icon-right { padding-right: 0; }
+.fg-button-icon-left .ui-icon { right: auto; left: 0 margin-left: 0; }
+.fg-button-icon-right .ui-icon { left: auto; right: 0; margin-left: 0; }
+                        
+.fg-button-icon-solo { display:block; width:8px; text-indent: -9999px; }         .fg-buttonset { float:left; }
+.fg-buttonset .fg-button { float: left; }
+.fg-buttonset-single .fg-button, 
+.fg-buttonset-multi .fg-button { margin-right: -1px;}
+                        
+.fg-toolbar {background:#858585;height:48px;width:98%;padding:0px; margin: 10px auto;z-index:10000;  }
+.fg-toolbarfoot { background:#333333; position:absolute;bottom:10px;left:10px;z-index:10000; }
+.fg-toolbar .fg-buttonset { margin-right:1.5em; padding-left: 1px; }
+.fg-toolbar .fg-button { font-size: 1em;  }
+</style>
+
 <script type="text/javascript" src="/openlayers/lib/OpenLayers.js"></script>
 <script type="text/javascript" src="/js/highcharts.js"></script>
-<script type="text/javascript" src="/js/jquery-ui-1.8.custom.min.js"></script>
-<script type="text/javascript" src="/js/query.qtip-1.0.0-rc3.min.js"></script>
+<script type="text/javascript" src="/zoo-demo/js/jquery-ui-1.8.custom.min.js"></script>
+<script type="text/javascript" src="/zoo-demo/js/query.qtip-1.0.0-rc3.min.js"></script>
 <script type="text/javascript">
 <![CDATA[
@@ -63 +111 @@
             map.addLayers([layer, layerLS, lineLayer, pointLayer, select, hover, multi]);
             
-            
+             mapControls = {
+                pan: new OpenLayers.Control.Pan({title:"Pan"}),
+                zoomin: new OpenLayers.Control.ZoomBox({title:"Zoom in box", out: false}),
+                zoomout: new OpenLayers.Control.ZoomBox({title:"Zoom out box", out: true})
+                 };
+       
+        for(var key in mapControls) {
+                        control = mapControls[key];
+                        map.addControl(control);
+        }
+
             control = new OpenLayers.Control.GetFeature({
                 //box: true,
@@ -88 +146 @@
             map.zoomToExtent(new OpenLayers.Bounds( -2.0041701,  41.9958302, 8.0041698,  52.0041701));
         }
+
+function toggleControl(element) {
+    for(key in mapControls) {
+        var control = mapControls[key];
+        //alert ($(element).is('.ui-state-active'));
+        if(element.name == key && $(element).is('.ui-state-active')) {
+            control.activate();
+        } else {
+            control.deactivate();
+        }
+    }
+}
+
+$(function(){
+        $(".fg-button:not(.ui-state-disabled)")
+        .hover(
+                function(){ 
+                        $(this).addClass("ui-state-hover"); 
+                },
+                function(){ 
+                        $(this).removeClass("ui-state-hover"); 
+                }
+        )
+        .mousedown(function(){
+                        $(this).parents('.fg-buttonset-single:first').find(".fg-button.ui-state-active").removeClass("ui-state-active");
+                        if( $(this).is('.ui-state-active.fg-button-toggleable, .fg-buttonset-multi .ui-state-active') ){ $(this).removeClass("ui-state-active"); }
+                        else { $(this).addClass("ui-state-active"); }   
+        })
+        .mouseup(function(){
+                if(! $(this).is('.fg-button-toggleable, .fg-buttonset-single .fg-button,  .fg-buttonset-multi .fg-button') ){
+                        $(this).removeClass("ui-state-active");
+                }
+        });
+});     
+
+$(document).ready(function(){
+
+        $('#btnPrev[title], #btnNext[title], a[title]').qtip({ 
+                style: { 
+                        name: 'dark', 
+                        tip: true,
+                        border:{width:2,color:'#fe8701',radius:3},
+                        width:{min:120}
+                }
+        });
+});
+
 
         function simpleProcessing1(aProcess) {