OpenLayers OpenLayers

Changeset 7328

Show
Ignore:
Timestamp:
06/06/08 16:20:12 (6 months ago)
Author:
tschaub
Message:

updated example

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • sandbox/tschaub/olon/examples/olon.html

    r7323 r7328  
    11<html xmlns="http://www.w3.org/1999/xhtml"> 
    22  <head> 
     3    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> 
     4    <link rel="stylesheet" href="style.css" type="text/css" /> 
    35    <style type="text/css"> 
    4         #map { 
    5             width: 400px; 
    6             height: 400px; 
    7             border: 1px solid gray; 
    8         } 
    9         #col { 
    10             position: absolute; 
    11             top: 1.75em; 
    12             left: 425px; 
    13         } 
    146        #output { 
    15             width: 400px; 
    16             height: 350px; 
    17         } 
    18         p { 
    19             margin: 1em 0; 
    20             width: 800px; 
     7            width: 512px; 
     8            height: 150px; 
    219        } 
    2210    </style> 
    2311    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAeDjUod8ItM9dBg5_lz0esxTk5UTxNMOJaMwpeYJby65YwI0-cxSmHf2_ZfIP7bDb_moMph5qZy25YA" type="text/javascript"></script> 
    24     <!-- 
    25     <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script> 
    26     --> 
    2712    <script src="../lib/OpenLayers.js"></script> 
     13    <script src="persist/persist.js"></script> 
    2814    <script type="text/javascript"> 
    29         var lon = 5; 
    30         var lat = 40; 
    31         var zoom = 5; 
    32         var map, controls, panel, switcher; 
     15        var map, panel, switcher, store; 
    3316 
    34         function init(){ 
     17        function init() { 
     18            store = new Persist.Store("OLON Example"); 
    3519            var options = { 
    3620                projection: "EPSG:900913", 
    …… 
    3822                maxResolution: 156543.0339, 
    3923                maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 
    40                                                  20037508, 20037508.34) 
     24                                                 20037508, 20037508) 
    4125            }; 
    4226            map = new OpenLayers.Map('map', options); 
     27            restoreState(initMap); 
     28        } 
     29         
     30        function initMap() { 
    4331 
    44             if(!restoreState()) { 
    45      
    46                 // create Google Mercator layers 
    47                 var gmap = new OpenLayers.Layer.Google( 
    48                     "Google Streets", 
    49                     {'sphericalMercator': true} 
    50                 ); 
    51      
    52                 // create WMS layer 
    53                 var wms = new OpenLayers.Layer.WMS( 
    54                     "World Map", 
    55                     "http://world.freemap.in/tiles/", 
    56                     {'layers': 'factbook-overlay', 'format':'png'}, 
    57                     { 
    58                         'reproject': false, 'opacity': 0.4, 
    59                         'isBaseLayer': false,'wrapDateLine': true 
    60                     } 
    61                 ); 
    62      
    63                 // create a vector layer for drawing 
    64                 var vector = new OpenLayers.Layer.Vector("Editable Vectors"); 
    65                  
    66                 map.addLayers([gmap, wms, vector]); 
    67                 panel = new OpenLayers.Control.EditingToolbar(vector); 
    68                 map.addControl(panel); 
    69                 switcher = new OpenLayers.Control.LayerSwitcher(); 
    70                 map.addControl(switcher); 
    71                 map.zoomToMaxExtent(); 
    72             } 
     32            // create Google Mercator layers 
     33            var gmap = new OpenLayers.Layer.Google( 
     34                "Google Streets", 
     35                {'sphericalMercator': true} 
     36            ); 
    7337 
     38            // create WMS layer 
     39            var wms = new OpenLayers.Layer.WMS( 
     40                "World Map", 
     41                "http://world.freemap.in/tiles/", 
     42                {'layers': 'factbook-overlay', 'format':'png'}, 
     43                { 
     44                    'reproject': false, 'opacity': 0.4, 
     45                    'isBaseLayer': false,'wrapDateLine': true 
     46                } 
     47            ); 
     48 
     49            // create a vector layer for drawing 
     50            var vector = new OpenLayers.Layer.Vector("Editable Vectors"); 
     51             
     52            map.addLayers([gmap, wms, vector]); 
     53            panel = new OpenLayers.Control.EditingToolbar(vector); 
     54            // this should be in EditingToolbar 
     55            panel.defaultControl = panel.controls[0]; 
     56            map.addControl(panel); 
     57            switcher = new OpenLayers.Control.LayerSwitcher(); 
     58            map.addControl(switcher); 
     59            map.zoomToMaxExtent(); 
    7460        } 
    7561         
    …… 
    7763         
    7864        function saveState() { 
    79             var str = olon.write(map); 
    80             if(str.length < 3950) { 
    81                 createCookie("olmap", str, 10); 
    82                 document.getElementById('output').value = "saved:\n\n" + str; 
    83             } else { 
    84                 document.getElementById('output').value = "too long:\n\n" + str; 
    85             } 
     65            panel.deactivate(); 
     66            store.set("olon", olon.write(map), function(ok, str) { 
     67                if(ok) { 
     68                    report("saved:\n\n" + str); 
     69                } else { 
     70                    report("failed to save map"); 
     71                } 
     72            }); 
     73            panel.activate(); 
    8674        } 
    87         function restoreState() { 
    88             var restored = false; 
    89             var str = readCookie("olmap"); 
    90             if(str) { 
    91                 deserializeMap(str); 
    92                 restored = true; 
    93                 document.getElementById('output').value = "restored:\n\n" + str; 
    94             } else { 
    95                 document.getElementById('output').value = 'no state saved'; 
    96             } 
    97             return restored; 
     75        function restoreState(failure) { 
     76            store.get("olon", function(ok, str) { 
     77                if(ok && str) { 
     78                    if(typeof str == "object") { 
     79                        str = str.value; 
     80                    } 
     81                    deserializeMap(str); 
     82                    report("restored:\n\n" + str); 
     83                } else { 
     84                    report("no state saved"); 
     85                    if(failure) { 
     86                        failure(); 
     87                    } 
     88                } 
     89            }); 
    9890        } 
    99  
    100         function createCookie(name, value, days) { 
    101             var expires = ""; 
    102             if(days) { 
    103                 var date = new Date(); 
    104                 date.setTime(date.getTime()+(days*24*60*60*1000)); 
    105                 expires = "; expires="+date.toGMTString(); 
    106             } 
    107             document.cookie = name + "=" + value + expires + "; path=/"; 
    108         } 
    109         function readCookie(name) { 
    110             var value = null; 
    111             var nameEQ = name + "="; 
    112             var ca = document.cookie.split(';'); 
    113             for(var i=0; i<ca.length; i++) { 
    114                 var c = ca[i].replace(/^s+/, ''); 
    115                 if(c.indexOf(nameEQ) == 0) { 
    116                     value = c.substring(nameEQ.length, c.length); 
    117                     break; 
    118                 } 
    119             } 
    120             return value; 
    121         } 
    122         function eraseCookie(name) { 
    123             createCookie(name,"",-1); 
     91         
     92        function report(msg) { 
     93            document.getElementById('output').value = msg; 
    12494        } 
    12595 
    12696        function serializeMap() { 
    127             var str = olon.write(map, true); 
    128             document.getElementById('output').value = str; 
     97            panel.deactivate(); 
     98            report(olon.write(map, true)); 
     99            panel.activate(); 
    129100        } 
    130101 
    …… 
    152123            var vector = map.layers[2]; 
    153124            panel = new OpenLayers.Control.EditingToolbar(vector); 
     125            // this should be in EditingToolbar 
     126            panel.defaultControl = panel.controls[0]; 
    154127            map.addControl(panel); 
    155128 
    …… 
    159132            } 
    160133        } 
     134 
    161135        function clearSaved() { 
    162             eraseCookie("olmap"); 
    163             document.getElementById('output').value = "cookie erased"; 
     136            store.remove("olon", function(ok, val) { 
     137                report("store cleared"); 
     138            }); 
    164139        } 
    165140        function clearFeatures() { 
    …… 
    170145  </head> 
    171146  <body onload="init()"> 
    172     <h3>OpenLayers Object Notation</h3> 
    173     <div id="map"></div> 
    174     <div id="col"> 
     147    <h1 id="title">OpenLayers Object Notation</h1> 
     148    <div id="map" class="smallmap"></div> 
     149    <div> 
    175150        <a href="javascript: void saveState();">save state</a> | 
    176151        <a href="javascript: void restoreState();">restore state</a> | 
    …… 
    180155        <a href="javascript: void clearFeatures();">clear features</a><br /> 
    181156    </div> 
    182     <p>This example show how a map can be serialized using OpenLayers Object Notation. 
    183     The serialized map can be saved somewhere (like a cookie if it's under 4KB), and 
    184     deserialized to restore the state of a map.  Serializing features on a vector layer 
    185     is possible, but creates a string that is typically too large for cookie storage</p> 
    186     <p>Navigate to some location, turn layers on/off, click save state.  Close this page 
    187     and reopen it (or just refresh) to see the state restored.</p> 
     157    <div id="docs"> 
     158        <p>This example show how a map can be serialized using OpenLayers 
     159        Object Notation. The serialized map can be saved somewhere, and 
     160        deserialized to restore the state of a map.</p> 
     161        <p>Navigate to some location, turn layers on/off, click save state. 
     162        Close this page and reopen it (or just refresh) to see the state 
     163        restored.</p> 
     164    </div> 
    188165  </body> 
    189166</html>