jquery-ollayercontrol-plugin/example.html at master · geo-data/jquery-ollayercontrol-plugin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>JQuery olLayerControl Plugin Example</title>
    <style type="text/css">
#map {
  width: 512px;
  height: 256px;
  border: solid grey 1px;
}

#layer-control {
  position: absolute;
  z-index: 1000;
  padding: 0.5em;
  border: #FA852D 2px solid;
  border-radius: 25px;
  -moz-border-radius: 25px; /* Firefox 3.6 and earlier */
  box-shadow: 5px 5px 10px #888888;
  background-color: rgba(250,133,45,0.75);
  margin: 0.5em;
}

#toggle-layer-control {
  margin-bottom: 0.3em;
}

h3 {
  margin-top: 0;
  margin-bottom: 0.5em;
  text-decoration: underline;
}

.layersDiv .dataLbl {
  margin-bottom: 0.3em;
  font-weight: bold;
}

.dataLayersDiv .labelSpan {
  font-style: italic;
}

    </style>
    <script language="JavaScript" src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script language="JavaScript" src="http://dev.openlayers.org/releases/OpenLayers-2.11/OpenLayers.js" type="text/javascript"></script>
    <script language="JavaScript" src="./jquery.olLayerControl.js" type="text/javascript"></script>
    <script language="JavaScript" type="text/javascript">
var map;

$(document).ready(function onReady() {
    map = new OpenLayers.Map('map', { controls: [] });
    map.addControl(new OpenLayers.Control.Navigation());

    var ol_wms = new OpenLayers.Layer.WMS(
        "OpenLayers WMS",
        "http://vmap0.tiles.osgeo.org/wms/vmap0",
        {layers: 'basic'}, {'displayInLayerSwitcher':false}
    );

    var gwc = new OpenLayers.Layer.WMS(
        "Global Imagery",
        "http://maps.opengeo.org/geowebcache/service/wms",
        {layers: "bluemarble"},
        {
            tileOrigin: new OpenLayers.LonLat(-180, -90),
            isBaseLayer: false
        }
    );

    var dm_wms = new OpenLayers.Layer.WMS(
        "Canadian Data",
        "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
        {layers: "bathymetry,land_fn,park,drain_fn,drainage," +
         "prov_bound,fedlimit,rail,road,popplace",
         transparent: "true", format: "image/png" }
    );

    gwc.setVisibility(false);
    dm_wms.setVisibility(false);

    map.addLayers([ol_wms, gwc, dm_wms]);
    if (!map.getCenter()) map.zoomToMaxExtent();

    // instantiate the layer control using the plugin
    $('#layer-control')
        .olLayerControl(map)
        .fadeIn('normal', function fadeIn(){
            console.log('done');
        });

    // set up the button for toggling the layer control visibility
    $('#toggle-layer-control').click(function onClick() {
        $('#layer-control').toggle('fast');
    });
});
    </script>
  </head>
  <body>
    <h1>JQuery olLayerControl Plugin Example</h1>
    <p>
      This example creates an OpenLayers LayerControl object using the
      JQuery olLayerControl plugin. It shows how the styling of the
      layer control can be controlled using CSS.
    </p>
    <button id="toggle-layer-control" type="button">Toggle layer control</button>
    <div id="map">
      <div id="layer-control" style="display:none">
        <h3>Layer Control</h3>
      </div>
    </div>
    <hr/>
  </body>
</html>