OpenLayers OpenLayers

Changeset 7561

Show
Ignore:
Timestamp:
07/25/08 16:21:17 (1 month ago)
Author:
architect
Message:

Updated map config

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • sandbox/architect/index.php

    r7550 r7561  
    1212    <script type="text/javascript" src="openlayers/OpenLayers.js"></script> 
    1313    <script type="text/javascript" src="scripts/mootools12.js"></script> 
     14 
    1415    <!-- Include general OLArchitect Specific Libraries --> 
    1516    <script type="text/javascript" src="scripts/sortable.js"></script> 
    1617    <script type="text/javascript" src="scripts/util.js"></script> 
    1718    <script type="text/javascript" src="scripts/config.js"></script> 
     19    <script type="text/javascript" src="scripts/dragdrop.js"></script> 
     20     
    1821    <!-- Include the individual config files --> 
    1922    <script type="text/javascript" src="scripts/mapConfig.js"></script> 
    …… 
    5154        <a href="#">Home</a> | My Account | New Map | Browse Maps | Community | <a href="http://vasir.net/blog/olarchitect">Blog</a> 
    5255    </div> 
    53      
    54     <div id="mainContentContainer"> 
    55         <!--Start ToolBox Container--> 
    56         <div id="toolBoxenContainer"> 
    57             <div id="toolBox1Container" class="toolBoxClass"> 
    58                 <div id="toolBox1Header" class="containerHeader"> 
    59                     General Configuration 
    60                 </div> 
    61                 <div id="toolBox1Content" class="toolBoxContent"> 
    62                     <!-- MAP CONFIG --> 
    63                     <!-- MAPS --> 
    64                     <div id="toolBox1MapContainer"> 
    65                         <div class="tb1lcHeader"> 
    66                             Map Configuration 
    67                             <div id="toggleMapList"> 
    68                                 <img id="toggleMapListImg" src="images/divmin.png" alt="Toggle OLArchitect Map List"/> 
     56    <div id="mcWrapper"> 
     57        <div id="mainContentContainer"> 
     58            <!--Start ToolBox Container--> 
     59            <div id="toolBoxenContainer"> 
     60                <div id="toolBox1Container" class="toolBoxClass"> 
     61                    <div id="toolBox1Header" class="containerHeader"> 
     62                        General Configuration 
     63                    </div> 
     64                    <div id="toolBox1Content" class="toolBoxContent"> 
     65                        <!-- MAP CONFIG --> 
     66                        <!-- MAPS --> 
     67                        <div id="toolBox1MapContainer"> 
     68                            <div class="tb1lcHeader"> 
     69                                Map Configuration 
     70                                <div id="toggleMapList"> 
     71                                    <img id="toggleMapListImg" src="images/divmin.png" alt="Toggle OLArchitect Map List"/> 
     72                                </div> 
     73                            </div> 
     74                            <div id="innerMapListContent"> 
     75                                <div id="tb1NewMap"> 
     76                                    <input type="text" id="tb1NewMapForm" value="Map Name" size=17 />  
     77                                    Theme: <script type="text/javascript"> 
     78                                        $('tb1NewMap').innerHTML += createSelectList('tb1MapListThemeDropdown', 'Theme Picklist', ' ', getThemeMenu()); 
     79                                    </script> 
     80                                    <br /> 
     81                                    <input type="button" id="tb1NewMapButton" value="Configure Map" /> 
     82                                </div> 
    6983                            </div> 
    7084                        </div> 
    71                         <div id="innerMapListContent"> 
    72                             <div id="tb1NewMap"> 
    73                                 <input type="text" id="tb1NewMapForm" value="Map Name" size=17 /><br /> 
    74                                 Theme: <script type="text/javascript"> 
    75                                     $('tb1NewMap').innerHTML += createSelectList('tb1MapListThemeDropdown', 'Theme Picklist', ' ', getThemeMenu()); 
    76                                 </script> 
     85                        <!-- END MAPS --> 
     86                        <br /> 
     87                     
     88                        <!-- LAYERS --> 
     89                        <div id="toolBox1LayerContainer"> 
     90                            <div class="tb1lcHeader"> 
     91                                Layer Configuration   
     92                                <div id="toggleLayerList"> 
     93                                    <img id="toggleLayerListImg" src="images/divmin.png" alt="Toggle OLArchitect Layer List"/> 
     94                                </div> 
     95                            </div> 
     96                            <div id="innerLayerListContent"> 
     97                                <!--list--> 
     98                                <div id="tb1LayerListArea"> 
     99                                    <ol id="layerListItems"> 
     100                                    </ol> 
     101                                </div> 
     102                                <!-- end list --> 
     103                                <div id="listData" class="displayInline"></div> 
     104                                <div id="tb1NewLayer"> 
     105                                    <input type="text" id="tb1NewLayerForm" value="Layer Name" size=13 /> 
     106                                    <script type="text/javascript"> 
     107                                        $('tb1NewLayer').innerHTML += createSelectList('tb1LayerListDropdown', 'Layer Picklist', ' ', getLayerListMenu()); 
     108                                    </script> 
     109                                    <br /> 
     110                                    <input type="button" id="tb1NewLayerButton" value="Create Layer" /> 
     111                                </div> 
     112                            </div> 
     113                        </div> 
     114                        <!-- END LAYERS --> 
     115                     
     116                        <br /> 
     117                     
     118                        <!-- Controls --> 
     119                        <div id="toolBox1ControlContainer"> 
     120                            <div class="tb1lcHeader"> 
     121                                Control Configuration 
     122                                <div id="toggleControlList"> 
     123                                    <img id="toggleControlListImg" src="images/divmin.png" alt="Toggle OLArchitect Control List"/> 
     124                                </div> 
     125                            </div> 
     126                            <div id="innerControlListContent"> 
     127                                <!--list--> 
     128                                <div id="tb1ControlListArea"> 
     129                                    <ol id="controlListItems"> 
     130                                    </ol> 
     131                                </div> 
     132                                <!-- end list --> 
     133                                <div id="controlListData" class="displayInline"></div> 
     134                                <div id="tb1NewControl"> 
     135                                    <script type="text/javascript"> 
     136                                        $('tb1NewControl').innerHTML += createSelectList('tb1ControlListDropdown', 'Control Picklist', 'controlCheckForPanel(); ',getControlListMenu()); 
     137                                    </script> 
     138                                    <div id="tb1NewControlSelects" class="displayInline"> 
     139                                    </div> 
     140                                    <br /> 
     141                                    <input type="button" id="tb1NewControlButton" value="Create Control" /> 
     142                                </div> 
     143                                                         
    77144                                <br /> 
    78                                 <input type="button" id="tb1NewMapButton" value="Configure Map" /> 
    79                             </div> 
    80                         </div> 
    81                     </div> 
    82                     <!-- END MAPS --> 
    83                     <br /> 
    84                      
    85                     <!-- LAYERS --> 
    86                     <div id="toolBox1LayerContainer"> 
    87                         <div class="tb1lcHeader"> 
    88                             Layer Configuration   
    89                             <div id="toggleLayerList"> 
    90                                 <img id="toggleLayerListImg" src="images/divmin.png" alt="Toggle OLArchitect Layer List"/> 
    91                             </div> 
    92                         </div> 
    93                         <div id="innerLayerListContent"> 
    94                             <!--list--> 
    95                             <div id="tb1LayerListArea"> 
    96                                 <ol id="layerListItems"> 
    97                                 </ol> 
    98                             </div> 
    99                             <!-- end list --> 
    100                             <div id="listData" class="displayInline"></div> 
    101                             <div id="tb1NewLayer"> 
    102                                 <input type="text" id="tb1NewLayerForm" value="Layer Name" size=13 /> 
    103                                 <script type="text/javascript"> 
    104                                     $('tb1NewLayer').innerHTML += createSelectList('tb1LayerListDropdown', 'Layer Picklist', ' ', getLayerListMenu()); 
    105                                 </script> 
    106                                 <br /> 
    107                                 <input type="button" id="tb1NewLayerButton" value="Create Layer" /> 
    108                             </div> 
    109                         </div> 
    110                     </div> 
    111                     <!-- END LAYERS --> 
    112                      
    113                     <br /> 
    114                      
    115                     <!-- Controls --> 
    116                     <div id="toolBox1ControlContainer"> 
    117                         <div class="tb1lcHeader"> 
    118                             Control Configuration 
    119                             <div id="toggleControlList"> 
    120                                 <img id="toggleControlListImg" src="images/divmin.png" alt="Toggle OLArchitect Control List"/> 
    121                             </div> 
    122                         </div> 
    123                         <div id="innerControlListContent"> 
    124                             <!--list--> 
    125                             <div id="tb1ControlListArea"> 
    126                                 <ol id="controlListItems"> 
    127                                 </ol> 
    128                             </div> 
    129                             <!-- end list --> 
    130                             <div id="controlListData" class="displayInline"></div> 
    131                             <div id="tb1NewControl"> 
    132                                 <script type="text/javascript"> 
    133                                     $('tb1NewControl').innerHTML += createSelectList('tb1ControlListDropdown', 'Control Picklist', 'controlCheckForPanel(); ',getControlListMenu()); 
    134                                 </script> 
    135                                 <div id="tb1NewControlSelects" class="displayInline"> 
    136                                 </div> 
    137                                 <br /> 
    138                                 <input type="button" id="tb1NewControlButton" value="Create Control" /> 
    139                             </div> 
    140                                                          
    141                             <br /> 
    142145                             
    143                             <!--Panel list--> 
    144                             <div id="tb1Panels"> 
    145                                 <!--Panels go here --> 
    146                             </div> 
    147                             <!-- end list --> 
    148                             <div id="tb1NewPanel"> 
    149                                 <br /> 
    150                                 <input type="text" id="tb1NewPanelForm" value="Panel Name" size=13 /> 
    151                                 <input type="button" id="tb1NewPanelButton" value="Create Panel" /> 
    152                             </div> 
     146                               <!--Panel list--> 
     147                               <div id="tb1Panels"> 
     148                                   <!--Panels go here --> 
     149                               </div> 
     150                               <!-- end list --> 
     151                               <div id="tb1NewPanel"> 
     152                                   <br /> 
     153                                   <input type="text" id="tb1NewPanelForm" value="Panel Name" size=13 /> 
     154                                   <input type="button" id="tb1NewPanelButton" value="Create Panel" /> 
     155                               </div> 
    153156                             
    154157                             
     158                            </div> 
    155159                        </div> 
     160                        <!-- END CONTROLS --> 
    156161                    </div> 
    157                     <!-- END CONTROLS --> 
     162                </div> 
     163             
     164                <br /> 
     165                <!-- TOOLBOX 2 --> 
     166                <div id="toolBox2Container" class="toolBoxClass"> 
     167                    <div id="toolBox2Header" class="containerHeader"> 
     168                        Settings 
     169                    </div> 
     170                    <div id="toolBox2Content" class="toolBoxContent"></div> 
    158171                </div> 
    159172            </div> 
    160              
    161             <br /> 
    162             <!-- TOOLBOX 2 --> 
    163             <div id="toolBox2Container" class="toolBoxClass"> 
    164                 <div id="toolBox2Header" class="containerHeader"> 
    165                     Settings 
     173            <!--End ToolBox Container--> 
     174         
     175            <!--Start Map Container--> 
     176            <div id="mapContainer"> 
     177         
     178                <div id="draggableDivContainer"> 
     179                    <div id="draggableDiv">Drag</div> 
     180                    <div id="draggableDivResize"></div> 
    166181                </div> 
    167                 <div id="toolBox2Content" class="toolBoxContent"></div> 
    168             </div> 
     182                  
     183 
     184         
     185            </div>   
     186            <!--End Map Container--> 
    169187        </div> 
    170         <!--End ToolBox Container--> 
    171          
    172         <!--Start Map Container--> 
    173         <div id="mapContainer"> 
    174         </div>   
    175         <!--End Map Container--> 
    176188    </div> 
    177189     

  • sandbox/architect/scripts/mapConfig.js

    r7550 r7561  
    5656    $('tb2blcCommon').innerHTML += "<br /> Theme " +  createSelectList('layoutMapConfigTheme', 'theme', '', getThemeMenu()); 
    5757    $('tb2blcCommon').innerHTML += "<br /><br />"; 
    58     $('tb2blcCommon').innerHTML += "<strong>Center</strong><br/> Lon" + createInputTextBox('layoutMapConfigLon','lon', '', 2) + " Lat" + createInputTextBox('layoutMapConfigLat','lat', '', 2) + "<br /> Zoom" + createInputTextBox('layoutMapConfigZoom','zoom', '', 2) + " Dragging" + createSelectList('layoutControlConfigDragging', 'dragging', '', getNullMenu()); 
     58     
     59    $('tb2blcCommon').innerHTML +="<strong>Display</strong><br/>Div Name " + createInputTextBox('layoutMapConfigDiv','div', 'map', 10) 
     60     
     61    $('tb2blcCommon').innerHTML += "<br/>Fullscreen Mode " + createSelectList('mapConfigFallthrough', 'fullScreen', '', getFalseMenu());     
     62     
     63    $('tb2blcCommon').innerHTML +="<br/><br/>Number of Zoom Levels " + createInputTextBox('layoutMapConfigZoomLevels','numZoomLevels', '', 2); 
     64 
     65    $('tb2blcCommon').innerHTML +="<br/>Projection " + createInputTextBox('layoutMapConfigProjection','projection', '', 15); 
     66     
     67    $('tb2blcCommon').innerHTML += "<br/><br/><strong>Center</strong><br/> Lon" + createInputTextBox('layoutMapConfigLon','lon', '', 2) + " Lat" + createInputTextBox('layoutMapConfigLat','lat', '', 2) + "<br /> Zoom" + createInputTextBox('layoutMapConfigZoom','zoom', '', 2) + " Dragging" + createSelectList('layoutControlConfigDragging', 'dragging', '', getNullMenu()); 
    5968     
    6069    $('tb2blcCommon').innerHTML += "<br/><br/><strong>Extents</strong><br/><strong>Max Extent</strong><br/> MinX" + createInputTextBox('layoutMapConfigMaxExtenMinX','MaxExtentMinX', '', 2) + " MinY" + createInputTextBox('layoutMapConfigMaxExtentMinY','MaxExtentMinY', '', 2) + "<br/>MaxX" + createInputTextBox('layoutMapConfigMaxExtentMaxX','MaxExtentMaxX', '', 2) + " MaxY" + createInputTextBox('layoutMapConfigMaxExtentMaxY','MaxExtentMaxY', '', 2); 
    6170     
    62     $('tb2blcCommon').innerHTML += "<br/><strong>Min Extent</strong><br/> Lon" + createInputTextBox('layoutMapConfigLon','lon', '', 2) + " Lat" + createInputTextBox('layoutMapConfigLat','lat', '', 2) + "<br /> Zoom" + createInputTextBox('layoutMapConfigZoom','zoom', '', 2) + " Dragging" + createSelectList('layoutControlConfigDragging', 'dragging', '', getNullMenu()); 
     71    $('tb2blcCommon').innerHTML += "<br/><strong>Min Extent</strong><br />MinX" + createInputTextBox('layoutMapConfigMinExtenMinX','MinExtentMinX', '', 2) + " MinY" + createInputTextBox('layoutMapConfigMinExtentMinY','MinExtentMinY', '', 2) + "<br/>MaxX" + createInputTextBox('layoutMapConfigMinExtentMaxX','MinExtentMaxX', '', 2) + " MaxY" + createInputTextBox('layoutMapConfigMaxExtentMinY','MaxExtentMinY', '', 2); 
     72    $('tb2blcCommon').innerHTML +="<br/><strong>Rescritced Extent</strong> " + createInputTextBox('layoutMapConfigRestrictedExtent','restrictedExtent', '', 2); 
    6373     
     74    $('tb2blcCommon').innerHTML +="<br/><br/>Units " + createSelectList('layoutMapConfigUnits','units', "",  getUnits()); 
     75     
     76    $('tb2blcCommon').innerHTML +="<br/><br/>Max Resolution " + createInputTextBox('layoutMapConfigMaxResolution','maxResolution', '', 2); 
     77    $('tb2blcCommon').innerHTML +="<br/>Min Resolution " + createInputTextBox('layoutMapConfigMinResolution','minResolution', '', 2); 
     78    $('tb2blcCommon').innerHTML +="<br/>Resolutions " + createInputTextBox('layoutMapConfigResolutions','resolutions', '', 30); 
     79     
     80    $('tb2blcCommon').innerHTML +="<br/><br/>Max Scale " + createInputTextBox('layoutMapConfigMaxScale','maxScale', '', 2); 
     81    $('tb2blcCommon').innerHTML +="<br/>Min Scale " + createInputTextBox('layoutMapConfigMinScale','minScale', '', 2); 
     82     
     83    $('tb2blcCommon').innerHTML +="<br/><br/>Tile Size " + createInputTextBox('layoutMapConfigTileSize','tileSize', '', 5); 
     84     
     85    $('tb2blcCommon').innerHTML +="<br/><br/>Fall Through " + createSelectList('mapConfigFallthrough', 'fallThrough', '', getTrueMenu());    
     86} 
    6487 
     88 
     89 
     90/*======================= 
     91|  saveMapConfig(isMapNew) 
     92| 
     93|called when the save button is pressed 
     94| 
     95|isMapNew is either "new" or "edit" - new, if the new layer button has been clicked; edit, if a layer is going to be modified 
     96=========================*/ 
     97function saveMapConfig(){ 
     98         
     99     
     100    if($('layoutmapConfigTitle') != null || $('layoutmapConfigTitle') != undefined) 
     101        var mapName = $('layoutMapConfigTitle').value;   
     102    else 
     103        var mapName = 'Default Map' 
     104     
     105    /*loop through options, get by class listValueUpdated and valueUpdated 
     106    saved all the changed class options*/ 
     107    map.title = mapName; //Set the name in the map object to the value of toolbox 2's name form 
     108    var updatedLists = $$('.listValueUpdated, .valueUpdated') //Get all the elements that have been updated 
     109    for (var i = 0; i < updatedLists.length; i++){ 
     110        var list = updatedLists[i].name; //The name attribute of the element 
     111        if(updatedLists[i].selectedIndex != undefined) //If the current item is a select list 
     112            var val = updatedLists[i].options[updatedLists[i].selectedIndex].value; //The value attribute of the element 
     113        else if(updatedLists[i].value != undefined) 
     114            var val = updatedLists[i].value; //The current item is a text box 
     115        map[list] = val //Add the properties to the current map layer 
     116    } 
     117    /*Update the name and layer type*/ 
     118    map.CLASS_NAME = 'OpenLayers.Control.Map'    
     119     
     120         
     121    /*Clear the layer editing options*/ 
     122    //add the empty html to the toolbox 
     123    $('toolBox2Content').innerHTML = getEmptyToolBox2HTML("none", "map");  
     124     
     125    /*Highlist the layer in the layer list that was saved*/ 
     126    $('tb1NewMap').highlight('#567D8C', '#9D9483');  
    65127} 

  • sandbox/architect/style.css

    r7550 r7561  
    1414--------------------------------------------------------------------*/ 
    1515body, html{ 
    16     background-color:#567D8C; 
     16    background-color:#bcb8ad; 
    1717    color:#efefef; 
    1818    font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif; 
    …… 
    147147|   Main Content  
    148148=========================*/ 
     149#mcWrapper{ 
     150    background-color:#bcb8ad; 
     151} 
    149152#mainContentContainer{ 
    150     background-color:#bcb8ad; 
    151     padding:10px 1.5em 20px 370px; 
     153    margin:0px auto; 
     154    padding:10px 1.5em 0px 0px; 
     155    position:relative; 
    152156    text-align:left; 
     157    width:1000px; 
    153158} 
    154159    /*======================= 
    …… 
    420425        background-color:#8C8372; 
    421426        border:1px solid #415e69; 
    422         height:700px; 
     427        left:370px; 
     428        height:500px; 
     429        position:relative; 
     430        width:630px; 
    423431    } 
    424432     
    …… 
    427435=========================*/ 
    428436#bottomContainer { 
    429     background-color:#567D8C; 
    430437    padding:5px; 
    431438    text-align:right; 
    …… 
    438445|   Div Classes 
    439446=========================*/ 
    440  
     447#draggableDivContainer { 
     448    background-color:#504B42; 
     449    height:50px;     
     450    left:0px; 
     451    position:relative; 
     452    top:0px;     
     453    width:50px; 
     454} 
     455  
     456#draggableDiv { 
     457    background:#628D9D; 
     458    cursor:move; 
     459    height:20px;     
     460    left:0px; 
     461    position:absolute; 
     462    top:0px; 
     463    width:100%;  
     464} 
     465 
     466#draggableDivResize { 
     467    background-color:#efefef; 
     468    bottom:0px; 
     469    cursor:se-resize; 
     470    height:15px; 
     471    position:absolute; 
     472    right:0px; 
     473    width:15px; 
     474} 
    441475 
    442476/*=======================