Changeset 8285 in genesis for nodes/nodemap.html


Ignore:
Timestamp:
Aug 10, 2010, 12:11:07 PM (15 years ago)
Author:
rick
Message:

Some serious effort in making it look useable

File:
1 edited

Legend:

Unmodified
Added
Removed

  • nodes/nodemap.html

    r8283 r8285  
    99      }
    1010    </style>
    11     <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA9XNhd8q0UdwNC7YSO4YZghSPUCi5aRYVveCcVYxzezM4iaj_gxQ9t-UajFL70jfcpquH5l1IJ-Zyyw'></script>
     11  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=ABQIAAAAKRiFs2kXKhTkKZkE_ms9rhTdBXm62xfhQU7Dk6ZBFSzYdmSteRQWjLqZhwX8afHvGpd4N3iKql6w8g" type="text/javascript"></script>
    1212
    1313    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    … …  
    6060                extractStyles: true,
    6161                extractAttributes: true,
    62                 maxDepth: 2
     62                maxDepth: 5
    6363              }
    6464            });
    6565        map.addLayer(kml);
    6666
     67        select = new OpenLayers.Control.SelectFeature(kml);
     68        kml.events.on( {
     69               "featureselected": onKMLFeatureSelect,
     70               "featureunselected": onKMLFeatureUnselect
     71        });
     72        map.addControl(select);
     73        select.activate();
    6774
    6875        var vectors = new OpenLayers.Layer.Vector("Vector Layer")
    … …  
    7582        map.addControl(new OpenLayers.Control.ScaleLine());
    7683        map.addControl(new OpenLayers.Control.KeyboardDefaults());
     84        map.addControl(new OpenLayers.Control.ZoomBox());
    7785
    7886        //var in_options = {
    … …  
    162170      }
    163171
     172      function onPopupClose(evt) {
     173          select.unselectAll();
     174      }
     175
     176
     177      function onKMLFeatureSelect(event) {
     178        var feature = event.feature;
     179        var content = "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description;
     180        popup = new OpenLayers.Popup.FramedCloud("chicken",
     181                                 feature.geometry.getBounds().getCenterLonLat(),
     182                                 new OpenLayers.Size(100,100),
     183                                 content,
     184                                 null, true, onPopupClose);
     185        feature.popup = popup;
     186        map.addPopup(popup);
     187      }
     188
     189      function onKMLFeatureUnselect(event) {
     190        var feature = event.feature;
     191        if(feature.popup) {
     192          map.removePopup(feature.popup);
     193          feature.popup.destroy();
     194          delete feature.popup;
     195        }
     196      }
    164197
    165198      function handleMeasurements(event) {
    … …  
    199232      }
    200233
     234      function toggleInfo() {
     235        var e = document.getElementById('infofield');
     236        if (e.style.visibility == "hidden") {
     237          e.style.visibility = "visible";
     238        } else {
     239          e.style.visibility = "hidden";
     240        };
     241      }
     242
    201243      // http://openlayers.org/dev/examples/strategy-cluster-threshold.html
    202244    </script>
    … …  
    204246  <body onload="init();">
    205247    <div id="basicMap">
    206     <div id="controller" style="position: absolute; top: 10px; left : 80px; z-index:1004">
    207         <img id="ruler" src="ruler_off.png" onClick="toggleRulerControl()" />
    208         <img height="22" src="http://maps.google.com/mapfiles/kml/pal3/icon20.png" alt="Reset focus" onclick="defaultFocus()"/>
    209         <div id="output"></div>
    210     </div>
     248      <div id="controller" style="position: absolute; top: 10px; left : 80px; z-index:1004">
     249          <img id="ruler" src="ruler_off.png" onClick="toggleRulerControl()" />
     250          <img height="22" src="http://maps.google.com/mapfiles/kml/pal3/icon20.png" alt="Reset focus" onclick="defaultFocus()"/>
     251          <img height="22" src="http://maps.google.com/mapfiles/kml/pal3/icon36.png" alt="Information" onclick="toggleInfo()" />
     252          <div id="output"></div>
     253      </div>
     254      <div id="infofield" style="position: absolute; bottom: 40px; left : 10px; z-index:1004; background-color: red; visibility: hidden">
     255        <ul>
     256          <li>holding down shift, whilst dragging the mouse to do box zooming</li>
     257          <li>Keyboard Navigation is enabled</li>
     258        </ul>
     259      </div>
    211260    </div>
    212261  </body>
Note: See TracChangeset for help on using the changeset viewer.