Compare commits
7 Commits
release-2.
...
release-2.
| Author | SHA1 | Date | |
|---|---|---|---|
|
b3217a7a68 | ||
|
|
07fd731e7f | ||
|
|
d25037210a | ||
|
|
0b0d04b637 | ||
|
|
aeff2e62df | ||
|
|
6162cbafec | ||
|
|
7884e9527f |
@@ -74,7 +74,6 @@ Group: OpenLayers {
|
||||
File: DrawFeature (no auto-title, OpenLayers/Control/DrawFeature.js)
|
||||
File: EditingToolbar (no auto-title, OpenLayers/Control/EditingToolbar.js)
|
||||
File: GetFeature (no auto-title, OpenLayers/Control/GetFeature.js)
|
||||
File: Graticule (OpenLayers/Control/Graticule.js)
|
||||
File: KeyboardDefaults (no auto-title, OpenLayers/Control/KeyboardDefaults.js)
|
||||
File: LayerSwitcher (no auto-title, OpenLayers/Control/LayerSwitcher.js)
|
||||
File: Measure (no auto-title, OpenLayers/Control/Measure.js)
|
||||
@@ -97,7 +96,6 @@ Group: OpenLayers {
|
||||
File: SelectFeature (no auto-title, OpenLayers/Control/SelectFeature.js)
|
||||
File: Snapping (no auto-title, OpenLayers/Control/Snapping.js)
|
||||
File: Split (no auto-title, OpenLayers/Control/Split.js)
|
||||
File: WMSGetFeatureInfo (OpenLayers/Control/WMSGetFeatureInfo.js)
|
||||
File: ZoomBox (no auto-title, OpenLayers/Control/ZoomBox.js)
|
||||
File: ZoomIn (no auto-title, OpenLayers/Control/ZoomIn.js)
|
||||
File: ZoomOut (no auto-title, OpenLayers/Control/ZoomOut.js)
|
||||
@@ -126,13 +124,6 @@ Group: OpenLayers {
|
||||
Group: Format {
|
||||
|
||||
File: Format (no auto-title, OpenLayers/Format.js)
|
||||
File: ArcXML (no auto-title, OpenLayers/Format/ArcXML.js)
|
||||
File: ArcXML.Features (no auto-title, OpenLayers/Format/ArcXML/Features.js)
|
||||
File: Atom (no auto-title, OpenLayers/Format/Atom.js)
|
||||
File: CSWGetDomain.DEFAULTS (no auto-title, OpenLayers/Format/CSWGetDomain.js)
|
||||
File: CSWGetDomain.v2_0_2 (no auto-title, OpenLayers/Format/CSWGetDomain/v2_0_2.js)
|
||||
File: CSWGetRecords.DEFAULTS (no auto-title, OpenLayers/Format/CSWGetRecords.js)
|
||||
File: CSWGetRecords.v2_0_2 (no auto-title, OpenLayers/Format/CSWGetRecords/v2_0_2.js)
|
||||
|
||||
Group: Filter {
|
||||
|
||||
@@ -142,9 +133,6 @@ Group: OpenLayers {
|
||||
File: v1_1_0 (OpenLayers/Format/Filter/v1_1_0.js)
|
||||
} # Group: Filter
|
||||
|
||||
File: GeoJSON (no auto-title, OpenLayers/Format/GeoJSON.js)
|
||||
File: GeoRSS (no auto-title, OpenLayers/Format/GeoRSS.js)
|
||||
|
||||
Group: GML {
|
||||
|
||||
File: GML (no auto-title, OpenLayers/Format/GML.js)
|
||||
@@ -153,12 +141,6 @@ Group: OpenLayers {
|
||||
File: v3 (no auto-title, OpenLayers/Format/GML/v3.js)
|
||||
} # Group: GML
|
||||
|
||||
File: GPX (no auto-title, OpenLayers/Format/GPX.js)
|
||||
File: JSON (no auto-title, OpenLayers/Format/JSON.js)
|
||||
File: KML (no auto-title, OpenLayers/Format/KML.js)
|
||||
File: OSM (no auto-title, OpenLayers/Format/OSM.js)
|
||||
File: OWSCommon.v1_1_0 (OpenLayers/Format/OWSCommon/v1_1_0.js)
|
||||
|
||||
Group: SLD {
|
||||
|
||||
File: SLD (no auto-title, OpenLayers/Format/SLD.js)
|
||||
@@ -166,32 +148,6 @@ Group: OpenLayers {
|
||||
File: v1_0_0 (no auto-title, OpenLayers/Format/SLD/v1_0_0.js)
|
||||
} # Group: SLD
|
||||
|
||||
File: SOSCapabilities (OpenLayers/Format/SOSCapabilities.js)
|
||||
File: SOSCapabilities.v1_0_0 (OpenLayers/Format/SOSCapabilities/v1_0_0.js)
|
||||
File: SOSGetObservation (OpenLayers/Format/SOSGetObservation.js)
|
||||
File: Text (no auto-title, OpenLayers/Format/Text.js)
|
||||
File: WFS (no auto-title, OpenLayers/Format/WFS.js)
|
||||
|
||||
Group: WFSCapabilities {
|
||||
|
||||
File: WFSCapabilities (no auto-title, OpenLayers/Format/WFSCapabilities.js)
|
||||
File: v1 (no auto-title, OpenLayers/Format/WFSCapabilities/v1.js)
|
||||
File: v1_0_0 (no auto-title, OpenLayers/Format/WFSCapabilities/v1_0_0.js)
|
||||
File: v1_1_0 (no auto-title, OpenLayers/Format/WFSCapabilities/v1_1_0.js)
|
||||
} # Group: WFSCapabilities
|
||||
|
||||
File: WFSDescribeFeatureType (no auto-title, OpenLayers/Format/WFSDescribeFeatureType.js)
|
||||
|
||||
Group: WFST {
|
||||
|
||||
File: WFST (no auto-title, OpenLayers/Format/WFST.js)
|
||||
File: v1 (OpenLayers/Format/WFST/v1.js)
|
||||
File: v1_0_0 (OpenLayers/Format/WFST/v1_0_0.js)
|
||||
File: v1_1_0 (OpenLayers/Format/WFST/v1_1_0.js)
|
||||
} # Group: WFST
|
||||
|
||||
File: WKT (no auto-title, OpenLayers/Format/WKT.js)
|
||||
|
||||
Group: WMC {
|
||||
|
||||
File: WMC (no auto-title, OpenLayers/Format/WMC.js)
|
||||
@@ -200,25 +156,33 @@ Group: OpenLayers {
|
||||
File: v1_1_0 (no auto-title, OpenLayers/Format/WMC/v1_1_0.js)
|
||||
} # Group: WMC
|
||||
|
||||
Group: WMSCapabilities {
|
||||
Group: Format {
|
||||
|
||||
File: WMSCapabilities (no auto-title, OpenLayers/Format/WMSCapabilities.js)
|
||||
File: v1 (no auto-title, OpenLayers/Format/WMSCapabilities/v1.js)
|
||||
File: v1_1 (no auto-title, OpenLayers/Format/WMSCapabilities/v1_1.js)
|
||||
File: v1_1_0 (no auto-title, OpenLayers/Format/WMSCapabilities/v1_1_0.js)
|
||||
File: v1_1_1 (no auto-title, OpenLayers/Format/WMSCapabilities/v1_1_1.js)
|
||||
File: v1_3 (no auto-title, OpenLayers/Format/WMSCapabilities/v1_3.js)
|
||||
File: v1_3_0 (no auto-title, OpenLayers/Format/WMSCapabilities/v1_3_0.js)
|
||||
} # Group: WMSCapabilities
|
||||
File: GeoJSON (no auto-title, OpenLayers/Format/GeoJSON.js)
|
||||
File: GeoRSS (no auto-title, OpenLayers/Format/GeoRSS.js)
|
||||
File: GPX (no auto-title, OpenLayers/Format/GPX.js)
|
||||
File: JSON (no auto-title, OpenLayers/Format/JSON.js)
|
||||
File: KML (no auto-title, OpenLayers/Format/KML.js)
|
||||
File: OSM (no auto-title, OpenLayers/Format/OSM.js)
|
||||
File: Text (no auto-title, OpenLayers/Format/Text.js)
|
||||
File: WFS (no auto-title, OpenLayers/Format/WFS.js)
|
||||
File: WFSDescribeFeatureType (OpenLayers/Format/WFSDescribeFeatureType.js)
|
||||
|
||||
Group: WMSDescribeLayer {
|
||||
Group: WFST {
|
||||
|
||||
File: WMSDescribeLayer (no auto-title, OpenLayers/Format/WMSDescribeLayer.js)
|
||||
File: v1_1 (no auto-title, OpenLayers/Format/WMSDescribeLayer/v1_1.js)
|
||||
} # Group: WMSDescribeLayer
|
||||
File: WFST (no auto-title, OpenLayers/Format/WFST.js)
|
||||
File: v1 (OpenLayers/Format/WFST/v1.js)
|
||||
File: v1_0_0 (OpenLayers/Format/WFST/v1_0_0.js)
|
||||
File: v1_1_0 (OpenLayers/Format/WFST/v1_1_0.js)
|
||||
} # Group: WFST
|
||||
|
||||
File: WKT (no auto-title, OpenLayers/Format/WKT.js)
|
||||
File: WMSDescribeLayer (OpenLayers/Format/WMSDescribeLayer.js)
|
||||
File: WMSDescribeLayer.v1_1 (OpenLayers/Format/WMSDescribeLayer/v1_1.js)
|
||||
File: WMSGetFeatureInfo (OpenLayers/Format/WMSGetFeatureInfo.js)
|
||||
File: XML (no auto-title, OpenLayers/Format/XML.js)
|
||||
} # Group: Format
|
||||
|
||||
File: WMSGetFeatureInfo (no auto-title, OpenLayers/Format/WMSGetFeatureInfo.js)
|
||||
File: XML (no auto-title, OpenLayers/Format/XML.js)
|
||||
} # Group: Format
|
||||
|
||||
Group: Geometry {
|
||||
@@ -257,10 +221,6 @@ Group: OpenLayers {
|
||||
Group: Lang {
|
||||
|
||||
File: Lang (no auto-title, OpenLayers/Lang.js)
|
||||
File: ar (no auto-title, OpenLayers/Lang/ar.js)
|
||||
File: be-tarask (no auto-title, OpenLayers/Lang/be-tarask.js)
|
||||
File: bg (no auto-title, OpenLayers/Lang/bg.js)
|
||||
File: br (no auto-title, OpenLayers/Lang/br.js)
|
||||
File: ca (no auto-title, OpenLayers/Lang/ca.js)
|
||||
File: cs-CZ (no auto-title, OpenLayers/Lang/cs-CZ.js)
|
||||
File: da-DK (no auto-title, OpenLayers/Lang/da-DK.js)
|
||||
@@ -268,35 +228,12 @@ Group: OpenLayers {
|
||||
File: en (no auto-title, OpenLayers/Lang/en.js)
|
||||
File: en-CA (no auto-title, OpenLayers/Lang/en-CA.js)
|
||||
File: es (no auto-title, OpenLayers/Lang/es.js)
|
||||
File: el (no auto-title, OpenLayers/Lang/el.js)
|
||||
File: fi (no auto-title, OpenLayers/Lang/fi.js)
|
||||
File: fr (no auto-title, OpenLayers/Lang/fr.js)
|
||||
File: fur (no auto-title, OpenLayers/Lang/fur.js)
|
||||
File: gl (no auto-title, OpenLayers/Lang/gl.js)
|
||||
File: gsw (no auto-title, OpenLayers/Lang/gsw.js)
|
||||
File: hr (no auto-title, OpenLayers/Lang/hr.js)
|
||||
File: hsb (no auto-title, OpenLayers/Lang/hsb.js)
|
||||
File: hu (no auto-title, OpenLayers/Lang/hu.js)
|
||||
File: ia (no auto-title, OpenLayers/Lang/ia.js)
|
||||
File: id (no auto-title, OpenLayers/Lang/id.js)
|
||||
File: io (no auto-title, OpenLayers/Lang/io.js)
|
||||
File: is (no auto-title, OpenLayers/Lang/is.js)
|
||||
File: it (no auto-title, OpenLayers/Lang/it.js)
|
||||
File: ja (no auto-title, OpenLayers/Lang/ja.js)
|
||||
File: km (no auto-title, OpenLayers/Lang/km.js)
|
||||
File: ksh (no auto-title, OpenLayers/Lang/ksh.js)
|
||||
File: nds (no auto-title, OpenLayers/Lang/nds.js)
|
||||
File: nb (no auto-title, OpenLayers/Lang/nb.js)
|
||||
File: nl (no auto-title, OpenLayers/Lang/nl.js)
|
||||
File: nn (no auto-title, OpenLayers/Lang/nn.js)
|
||||
File: oc (no auto-title, OpenLayers/Lang/oc.js)
|
||||
File: pt (no auto-title, OpenLayers/Lang/pt.js)
|
||||
File: pt-BR (no auto-title, OpenLayers/Lang/pt-BR.js)
|
||||
File: ru (no auto-title, OpenLayers/Lang/ru.js)
|
||||
File: sk (no auto-title, OpenLayers/Lang/sk.js)
|
||||
File: sv-SE (no auto-title, OpenLayers/Lang/sv-SE.js)
|
||||
File: te (no auto-title, OpenLayers/Lang/te.js)
|
||||
File: vi (no auto-title, OpenLayers/Lang/vi.js)
|
||||
File: zh-CN (no auto-title, OpenLayers/Lang/zh-CN.js)
|
||||
File: zh-TW (no auto-title, OpenLayers/Lang/zh-TW.js)
|
||||
} # Group: Lang
|
||||
@@ -305,7 +242,6 @@ Group: OpenLayers {
|
||||
|
||||
File: Layer (no auto-title, OpenLayers/Layer.js)
|
||||
File: ArcGIS93Rest (no auto-title, OpenLayers/Layer/ArcGIS93Rest.js)
|
||||
File: ArcIMS (no auto-title, OpenLayers/Layer/ArcIMS.js)
|
||||
File: Boxes (no auto-title, OpenLayers/Layer/Boxes.js)
|
||||
File: EventPane (no auto-title, OpenLayers/Layer/EventPane.js)
|
||||
File: FixedZoomLevels (no auto-title, OpenLayers/Layer/FixedZoomLevels.js)
|
||||
@@ -328,15 +264,13 @@ Group: OpenLayers {
|
||||
File: TileCache (no auto-title, OpenLayers/Layer/TileCache.js)
|
||||
File: TMS (no auto-title, OpenLayers/Layer/TMS.js)
|
||||
File: Vector (no auto-title, OpenLayers/Layer/Vector.js)
|
||||
File: Vector.RootContainer (no auto-title, OpenLayers/Layer/Vector/RootContainer.js)
|
||||
File: RootContainer (OpenLayers/Layer/Vector/RootContainer.js)
|
||||
File: VirtualEarth (no auto-title, OpenLayers/Layer/VirtualEarth.js)
|
||||
File: WFS (no auto-title, OpenLayers/Layer/WFS.js)
|
||||
File: WMS (no auto-title, OpenLayers/Layer/WMS.js)
|
||||
File: WMS.Untiled (no auto-title, OpenLayers/Layer/WMS/Untiled.js)
|
||||
File: WMS.Post (no auto-title, OpenLayers/Layer/WMS/Post.js)
|
||||
File: WorldWind (no auto-title, OpenLayers/Layer/WorldWind.js)
|
||||
File: Yahoo (no auto-title, OpenLayers/Layer/Yahoo.js)
|
||||
File: XYZ (no auto-title, OpenLayers/Layer/XYZ.js)
|
||||
} # Group: Layer
|
||||
|
||||
File: Map (no auto-title, OpenLayers/Map.js)
|
||||
@@ -372,9 +306,9 @@ Group: OpenLayers {
|
||||
Group: WFS {
|
||||
|
||||
File: WFS (no auto-title, OpenLayers/Protocol/WFS.js)
|
||||
File: v1 (no auto-title, OpenLayers/Protocol/WFS/v1.js)
|
||||
File: v1_0_0 (no auto-title, OpenLayers/Protocol/WFS/v1_0_0.js)
|
||||
File: v1_1_0 (no auto-title, OpenLayers/Protocol/WFS/v1_1_0.js)
|
||||
File: v1 (OpenLayers/Protocol/WFS/v1.js)
|
||||
File: v1_0_0 (OpenLayers/Protocol/WFS/v1_0_0.js)
|
||||
File: v1_1_0 (OpenLayers/Protocol/WFS/v1_1_0.js)
|
||||
} # Group: WFS
|
||||
|
||||
} # Group: Protocol
|
||||
@@ -403,7 +337,6 @@ Group: OpenLayers {
|
||||
File: Cluster (no auto-title, OpenLayers/Strategy/Cluster.js)
|
||||
File: Fixed (no auto-title, OpenLayers/Strategy/Fixed.js)
|
||||
File: Paging (no auto-title, OpenLayers/Strategy/Paging.js)
|
||||
File: Refresh (OpenLayers/Strategy/Refresh.js)
|
||||
File: Save (OpenLayers/Strategy/Save.js)
|
||||
} # Group: Strategy
|
||||
|
||||
@@ -415,7 +348,6 @@ Group: OpenLayers {
|
||||
File: Tile (no auto-title, OpenLayers/Tile.js)
|
||||
File: Image (no auto-title, OpenLayers/Tile/Image.js)
|
||||
File: WFS (no auto-title, OpenLayers/Tile/WFS.js)
|
||||
File: IFrame (OpenLayers/Tile/Image/IFrame.js)
|
||||
} # Group: Tile
|
||||
|
||||
File: Tween (no auto-title, OpenLayers/Tween.js)
|
||||
|
||||
@@ -4,51 +4,47 @@ import sys
|
||||
sys.path.append("../tools")
|
||||
import mergejs
|
||||
|
||||
def build():
|
||||
have_compressor = None
|
||||
have_compressor = None
|
||||
try:
|
||||
import jsmin
|
||||
have_compressor = "jsmin"
|
||||
except ImportError:
|
||||
try:
|
||||
import jsmin
|
||||
have_compressor = "jsmin"
|
||||
except ImportError:
|
||||
try:
|
||||
import minimize
|
||||
have_compressor = "minimize"
|
||||
except Exception, E:
|
||||
print E
|
||||
pass
|
||||
import minimize
|
||||
have_compressor = "minimize"
|
||||
except Exception, E:
|
||||
print E
|
||||
pass
|
||||
|
||||
sourceDirectory = "../lib"
|
||||
configFilename = "full.cfg"
|
||||
outputFilename = "OpenLayers.js"
|
||||
sourceDirectory = "../lib"
|
||||
configFilename = "full.cfg"
|
||||
outputFilename = "OpenLayers.js"
|
||||
|
||||
if len(sys.argv) > 1:
|
||||
configFilename = sys.argv[1]
|
||||
extension = configFilename[-4:]
|
||||
if len(sys.argv) > 1:
|
||||
configFilename = sys.argv[1]
|
||||
extension = configFilename[-4:]
|
||||
|
||||
if extension != ".cfg":
|
||||
configFilename = sys.argv[1] + ".cfg"
|
||||
if extension != ".cfg":
|
||||
configFilename = sys.argv[1] + ".cfg"
|
||||
|
||||
if len(sys.argv) > 2:
|
||||
outputFilename = sys.argv[2]
|
||||
if len(sys.argv) > 2:
|
||||
outputFilename = sys.argv[2]
|
||||
|
||||
print "Merging libraries."
|
||||
merged = mergejs.run(sourceDirectory, None, configFilename)
|
||||
if have_compressor == "jsmin":
|
||||
print "Compressing using jsmin."
|
||||
minimized = jsmin.jsmin(merged)
|
||||
elif have_compressor == "minimize":
|
||||
print "Compressing using minimize."
|
||||
minimized = minimize.minimize(merged)
|
||||
else: # fallback
|
||||
print "Not compressing."
|
||||
minimized = merged
|
||||
print "Adding license file."
|
||||
minimized = file("license.txt").read() + minimized
|
||||
print "Merging libraries."
|
||||
merged = mergejs.run(sourceDirectory, None, configFilename)
|
||||
if have_compressor == "jsmin":
|
||||
print "Compressing using jsmin."
|
||||
minimized = jsmin.jsmin(merged)
|
||||
elif have_compressor == "minimize":
|
||||
print "Compressing using minimize."
|
||||
minimized = minimize.minimize(merged)
|
||||
else: # fallback
|
||||
print "Not compressing."
|
||||
minimized = merged
|
||||
print "Adding license file."
|
||||
minimized = file("license.txt").read() + minimized
|
||||
|
||||
print "Writing to %s." % outputFilename
|
||||
file(outputFilename, "w").write(minimized)
|
||||
print "Writing to %s." % outputFilename
|
||||
file(outputFilename, "w").write(minimized)
|
||||
|
||||
print "Done."
|
||||
|
||||
if __name__ == '__main__':
|
||||
build()
|
||||
print "Done."
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
OpenLayers.js -- OpenLayers Map Viewer Library
|
||||
|
||||
Copyright 2005-2010 MetaCarta, Inc., released under the Clear BSD license.
|
||||
Copyright 2005-2008 MetaCarta, Inc., released under the Clear BSD license.
|
||||
Please see http://svn.openlayers.org/trunk/openlayers/license.txt
|
||||
for the full text of the license.
|
||||
|
||||
|
||||
@@ -74,7 +74,6 @@ Group: OpenLayers {
|
||||
File: DrawFeature (no auto-title, OpenLayers/Control/DrawFeature.js)
|
||||
File: EditingToolbar (no auto-title, OpenLayers/Control/EditingToolbar.js)
|
||||
File: GetFeature (no auto-title, OpenLayers/Control/GetFeature.js)
|
||||
File: Graticule (OpenLayers/Control/Graticule.js)
|
||||
File: KeyboardDefaults (no auto-title, OpenLayers/Control/KeyboardDefaults.js)
|
||||
File: LayerSwitcher (no auto-title, OpenLayers/Control/LayerSwitcher.js)
|
||||
File: Measure (no auto-title, OpenLayers/Control/Measure.js)
|
||||
@@ -97,7 +96,6 @@ Group: OpenLayers {
|
||||
File: SelectFeature (no auto-title, OpenLayers/Control/SelectFeature.js)
|
||||
File: Snapping (no auto-title, OpenLayers/Control/Snapping.js)
|
||||
File: Split (no auto-title, OpenLayers/Control/Split.js)
|
||||
File: WMSGetFeatureInfo (OpenLayers/Control/WMSGetFeatureInfo.js)
|
||||
File: ZoomBox (no auto-title, OpenLayers/Control/ZoomBox.js)
|
||||
File: ZoomIn (no auto-title, OpenLayers/Control/ZoomIn.js)
|
||||
File: ZoomOut (no auto-title, OpenLayers/Control/ZoomOut.js)
|
||||
@@ -126,13 +124,6 @@ Group: OpenLayers {
|
||||
Group: Format {
|
||||
|
||||
File: Format (no auto-title, OpenLayers/Format.js)
|
||||
File: ArcXML (no auto-title, OpenLayers/Format/ArcXML.js)
|
||||
File: ArcXML.Features (no auto-title, OpenLayers/Format/ArcXML/Features.js)
|
||||
File: Atom (no auto-title, OpenLayers/Format/Atom.js)
|
||||
File: CSWGetDomain.DEFAULTS (no auto-title, OpenLayers/Format/CSWGetDomain.js)
|
||||
File: CSWGetDomain.v2_0_2 (no auto-title, OpenLayers/Format/CSWGetDomain/v2_0_2.js)
|
||||
File: CSWGetRecords.DEFAULTS (no auto-title, OpenLayers/Format/CSWGetRecords.js)
|
||||
File: CSWGetRecords.v2_0_2 (no auto-title, OpenLayers/Format/CSWGetRecords/v2_0_2.js)
|
||||
|
||||
Group: Filter {
|
||||
|
||||
@@ -142,9 +133,6 @@ Group: OpenLayers {
|
||||
File: v1_1_0 (OpenLayers/Format/Filter/v1_1_0.js)
|
||||
} # Group: Filter
|
||||
|
||||
File: GeoJSON (no auto-title, OpenLayers/Format/GeoJSON.js)
|
||||
File: GeoRSS (no auto-title, OpenLayers/Format/GeoRSS.js)
|
||||
|
||||
Group: GML {
|
||||
|
||||
File: GML (no auto-title, OpenLayers/Format/GML.js)
|
||||
@@ -153,12 +141,6 @@ Group: OpenLayers {
|
||||
File: v3 (no auto-title, OpenLayers/Format/GML/v3.js)
|
||||
} # Group: GML
|
||||
|
||||
File: GPX (no auto-title, OpenLayers/Format/GPX.js)
|
||||
File: JSON (no auto-title, OpenLayers/Format/JSON.js)
|
||||
File: KML (no auto-title, OpenLayers/Format/KML.js)
|
||||
File: OSM (no auto-title, OpenLayers/Format/OSM.js)
|
||||
File: OWSCommon.v1_1_0 (OpenLayers/Format/OWSCommon/v1_1_0.js)
|
||||
|
||||
Group: SLD {
|
||||
|
||||
File: SLD (no auto-title, OpenLayers/Format/SLD.js)
|
||||
@@ -166,32 +148,6 @@ Group: OpenLayers {
|
||||
File: v1_0_0 (no auto-title, OpenLayers/Format/SLD/v1_0_0.js)
|
||||
} # Group: SLD
|
||||
|
||||
File: SOSCapabilities (OpenLayers/Format/SOSCapabilities.js)
|
||||
File: SOSCapabilities.v1_0_0 (OpenLayers/Format/SOSCapabilities/v1_0_0.js)
|
||||
File: SOSGetObservation (OpenLayers/Format/SOSGetObservation.js)
|
||||
File: Text (no auto-title, OpenLayers/Format/Text.js)
|
||||
File: WFS (no auto-title, OpenLayers/Format/WFS.js)
|
||||
|
||||
Group: WFSCapabilities {
|
||||
|
||||
File: WFSCapabilities (no auto-title, OpenLayers/Format/WFSCapabilities.js)
|
||||
File: v1 (no auto-title, OpenLayers/Format/WFSCapabilities/v1.js)
|
||||
File: v1_0_0 (no auto-title, OpenLayers/Format/WFSCapabilities/v1_0_0.js)
|
||||
File: v1_1_0 (no auto-title, OpenLayers/Format/WFSCapabilities/v1_1_0.js)
|
||||
} # Group: WFSCapabilities
|
||||
|
||||
File: WFSDescribeFeatureType (no auto-title, OpenLayers/Format/WFSDescribeFeatureType.js)
|
||||
|
||||
Group: WFST {
|
||||
|
||||
File: WFST (no auto-title, OpenLayers/Format/WFST.js)
|
||||
File: v1 (OpenLayers/Format/WFST/v1.js)
|
||||
File: v1_0_0 (OpenLayers/Format/WFST/v1_0_0.js)
|
||||
File: v1_1_0 (OpenLayers/Format/WFST/v1_1_0.js)
|
||||
} # Group: WFST
|
||||
|
||||
File: WKT (no auto-title, OpenLayers/Format/WKT.js)
|
||||
|
||||
Group: WMC {
|
||||
|
||||
File: WMC (no auto-title, OpenLayers/Format/WMC.js)
|
||||
@@ -200,25 +156,33 @@ Group: OpenLayers {
|
||||
File: v1_1_0 (no auto-title, OpenLayers/Format/WMC/v1_1_0.js)
|
||||
} # Group: WMC
|
||||
|
||||
Group: WMSCapabilities {
|
||||
Group: Format {
|
||||
|
||||
File: WMSCapabilities (no auto-title, OpenLayers/Format/WMSCapabilities.js)
|
||||
File: v1 (no auto-title, OpenLayers/Format/WMSCapabilities/v1.js)
|
||||
File: v1_1 (no auto-title, OpenLayers/Format/WMSCapabilities/v1_1.js)
|
||||
File: v1_1_0 (no auto-title, OpenLayers/Format/WMSCapabilities/v1_1_0.js)
|
||||
File: v1_1_1 (no auto-title, OpenLayers/Format/WMSCapabilities/v1_1_1.js)
|
||||
File: v1_3 (no auto-title, OpenLayers/Format/WMSCapabilities/v1_3.js)
|
||||
File: v1_3_0 (no auto-title, OpenLayers/Format/WMSCapabilities/v1_3_0.js)
|
||||
} # Group: WMSCapabilities
|
||||
File: GeoJSON (no auto-title, OpenLayers/Format/GeoJSON.js)
|
||||
File: GeoRSS (no auto-title, OpenLayers/Format/GeoRSS.js)
|
||||
File: GPX (no auto-title, OpenLayers/Format/GPX.js)
|
||||
File: JSON (no auto-title, OpenLayers/Format/JSON.js)
|
||||
File: KML (no auto-title, OpenLayers/Format/KML.js)
|
||||
File: OSM (no auto-title, OpenLayers/Format/OSM.js)
|
||||
File: Text (no auto-title, OpenLayers/Format/Text.js)
|
||||
File: WFS (no auto-title, OpenLayers/Format/WFS.js)
|
||||
File: WFSDescribeFeatureType.js (OpenLayers/Format/WFSDescribeFeatureType.js)
|
||||
|
||||
Group: WMSDescribeLayer {
|
||||
Group: WFST {
|
||||
|
||||
File: WMSDescribeLayer (no auto-title, OpenLayers/Format/WMSDescribeLayer.js)
|
||||
File: v1_1 (no auto-title, OpenLayers/Format/WMSDescribeLayer/v1_1.js)
|
||||
} # Group: WMSDescribeLayer
|
||||
File: WFST (no auto-title, OpenLayers/Format/WFST.js)
|
||||
File: v1 (OpenLayers/Format/WFST/v1.js)
|
||||
File: v1_0_0 (OpenLayers/Format/WFST/v1_0_0.js)
|
||||
File: v1_1_0 (OpenLayers/Format/WFST/v1_1_0.js)
|
||||
} # Group: WFST
|
||||
|
||||
File: WKT (no auto-title, OpenLayers/Format/WKT.js)
|
||||
File: WMSDescribeLayer (OpenLayers/Format/WMSDescribeLayer.js)
|
||||
File: WMSDescribeLayer.v1_1 (OpenLayers/Format/WMSDescribeLayer/v1_1.js)
|
||||
File: WMSGetFeatureInfo (OpenLayers/Format/WMSGetFeatureInfo.js)
|
||||
File: XML (no auto-title, OpenLayers/Format/XML.js)
|
||||
} # Group: Format
|
||||
|
||||
File: WMSGetFeatureInfo (no auto-title, OpenLayers/Format/WMSGetFeatureInfo.js)
|
||||
File: XML (no auto-title, OpenLayers/Format/XML.js)
|
||||
} # Group: Format
|
||||
|
||||
Group: Geometry {
|
||||
@@ -257,10 +221,6 @@ Group: OpenLayers {
|
||||
Group: Lang {
|
||||
|
||||
File: Lang (no auto-title, OpenLayers/Lang.js)
|
||||
File: ar (no auto-title, OpenLayers/Lang/ar.js)
|
||||
File: be-tarask (no auto-title, OpenLayers/Lang/be-tarask.js)
|
||||
File: bg (no auto-title, OpenLayers/Lang/bg.js)
|
||||
File: br (no auto-title, OpenLayers/Lang/br.js)
|
||||
File: ca (no auto-title, OpenLayers/Lang/ca.js)
|
||||
File: cs-CZ (no auto-title, OpenLayers/Lang/cs-CZ.js)
|
||||
File: da-DK (no auto-title, OpenLayers/Lang/da-DK.js)
|
||||
@@ -268,35 +228,12 @@ Group: OpenLayers {
|
||||
File: en (no auto-title, OpenLayers/Lang/en.js)
|
||||
File: en-CA (no auto-title, OpenLayers/Lang/en-CA.js)
|
||||
File: es (no auto-title, OpenLayers/Lang/es.js)
|
||||
File: el (no auto-title, OpenLayers/Lang/el.js)
|
||||
File: fi (no auto-title, OpenLayers/Lang/fi.js)
|
||||
File: fr (no auto-title, OpenLayers/Lang/fr.js)
|
||||
File: fur (no auto-title, OpenLayers/Lang/fur.js)
|
||||
File: gl (no auto-title, OpenLayers/Lang/gl.js)
|
||||
File: gsw (no auto-title, OpenLayers/Lang/gsw.js)
|
||||
File: hr (no auto-title, OpenLayers/Lang/hr.js)
|
||||
File: hsb (no auto-title, OpenLayers/Lang/hsb.js)
|
||||
File: hu (no auto-title, OpenLayers/Lang/hu.js)
|
||||
File: ia (no auto-title, OpenLayers/Lang/ia.js)
|
||||
File: id (no auto-title, OpenLayers/Lang/id.js)
|
||||
File: io (no auto-title, OpenLayers/Lang/io.js)
|
||||
File: is (no auto-title, OpenLayers/Lang/is.js)
|
||||
File: it (no auto-title, OpenLayers/Lang/it.js)
|
||||
File: ja (no auto-title, OpenLayers/Lang/ja.js)
|
||||
File: km (no auto-title, OpenLayers/Lang/km.js)
|
||||
File: ksh (no auto-title, OpenLayers/Lang/ksh.js)
|
||||
File: nds (no auto-title, OpenLayers/Lang/nds.js)
|
||||
File: nb (no auto-title, OpenLayers/Lang/nb.js)
|
||||
File: nl (no auto-title, OpenLayers/Lang/nl.js)
|
||||
File: nn (no auto-title, OpenLayers/Lang/nn.js)
|
||||
File: oc (no auto-title, OpenLayers/Lang/oc.js)
|
||||
File: pt (no auto-title, OpenLayers/Lang/pt.js)
|
||||
File: pt-BR (no auto-title, OpenLayers/Lang/pt-BR.js)
|
||||
File: ru (no auto-title, OpenLayers/Lang/ru.js)
|
||||
File: sk (no auto-title, OpenLayers/Lang/sk.js)
|
||||
File: sv-SE (no auto-title, OpenLayers/Lang/sv-SE.js)
|
||||
File: te (no auto-title, OpenLayers/Lang/te.js)
|
||||
File: vi (no auto-title, OpenLayers/Lang/vi.js)
|
||||
File: zh-CN (no auto-title, OpenLayers/Lang/zh-CN.js)
|
||||
File: zh-TW (no auto-title, OpenLayers/Lang/zh-TW.js)
|
||||
} # Group: Lang
|
||||
@@ -305,7 +242,6 @@ Group: OpenLayers {
|
||||
|
||||
File: Layer (no auto-title, OpenLayers/Layer.js)
|
||||
File: ArcGIS93Rest (no auto-title, OpenLayers/Layer/ArcGIS93Rest.js)
|
||||
File: ArcIMS (no auto-title, OpenLayers/Layer/ArcIMS.js)
|
||||
File: Boxes (no auto-title, OpenLayers/Layer/Boxes.js)
|
||||
File: EventPane (no auto-title, OpenLayers/Layer/EventPane.js)
|
||||
File: FixedZoomLevels (no auto-title, OpenLayers/Layer/FixedZoomLevels.js)
|
||||
@@ -328,15 +264,13 @@ Group: OpenLayers {
|
||||
File: TileCache (no auto-title, OpenLayers/Layer/TileCache.js)
|
||||
File: TMS (no auto-title, OpenLayers/Layer/TMS.js)
|
||||
File: Vector (no auto-title, OpenLayers/Layer/Vector.js)
|
||||
File: Vector.RootContainer (no auto-title, OpenLayers/Layer/Vector/RootContainer.js)
|
||||
File: RootContainer (OpenLayers/Layer/Vector/RootContainer.js)
|
||||
File: VirtualEarth (no auto-title, OpenLayers/Layer/VirtualEarth.js)
|
||||
File: WFS (no auto-title, OpenLayers/Layer/WFS.js)
|
||||
File: WMS (no auto-title, OpenLayers/Layer/WMS.js)
|
||||
File: WMS.Untiled (no auto-title, OpenLayers/Layer/WMS/Untiled.js)
|
||||
File: WMS.Post (no auto-title, OpenLayers/Layer/WMS/Post.js)
|
||||
File: WorldWind (no auto-title, OpenLayers/Layer/WorldWind.js)
|
||||
File: Yahoo (no auto-title, OpenLayers/Layer/Yahoo.js)
|
||||
File: XYZ (no auto-title, OpenLayers/Layer/XYZ.js)
|
||||
} # Group: Layer
|
||||
|
||||
File: Map (no auto-title, OpenLayers/Map.js)
|
||||
@@ -372,9 +306,9 @@ Group: OpenLayers {
|
||||
Group: WFS {
|
||||
|
||||
File: WFS (no auto-title, OpenLayers/Protocol/WFS.js)
|
||||
File: v1 (no auto-title, OpenLayers/Protocol/WFS/v1.js)
|
||||
File: v1_0_0 (no auto-title, OpenLayers/Protocol/WFS/v1_0_0.js)
|
||||
File: v1_1_0 (no auto-title, OpenLayers/Protocol/WFS/v1_1_0.js)
|
||||
File: v1 (OpenLayers/Protocol/WFS/v1.js)
|
||||
File: v1_0_0 (OpenLayers/Protocol/WFS/v1_0_0.js)
|
||||
File: v1_1_0 (OpenLayers/Protocol/WFS/v1_1_0.js)
|
||||
} # Group: WFS
|
||||
|
||||
} # Group: Protocol
|
||||
@@ -403,7 +337,6 @@ Group: OpenLayers {
|
||||
File: Cluster (no auto-title, OpenLayers/Strategy/Cluster.js)
|
||||
File: Fixed (no auto-title, OpenLayers/Strategy/Fixed.js)
|
||||
File: Paging (no auto-title, OpenLayers/Strategy/Paging.js)
|
||||
File: Refresh (OpenLayers/Strategy/Refresh.js)
|
||||
File: Save (OpenLayers/Strategy/Save.js)
|
||||
} # Group: Strategy
|
||||
|
||||
@@ -415,7 +348,6 @@ Group: OpenLayers {
|
||||
File: Tile (no auto-title, OpenLayers/Tile.js)
|
||||
File: Image (no auto-title, OpenLayers/Tile/Image.js)
|
||||
File: WFS (no auto-title, OpenLayers/Tile/WFS.js)
|
||||
File: IFrame (OpenLayers/Tile/Image/IFrame.js)
|
||||
} # Group: Tile
|
||||
|
||||
File: Tween (no auto-title, OpenLayers/Tween.js)
|
||||
|
||||
@@ -1,196 +0,0 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>OpenLayers SLD based selection control</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<style type="text/css">
|
||||
.olControlSLDSelectBoxActive {
|
||||
cursor: crosshair;
|
||||
}
|
||||
.olControlSLDSelectPolygonActive {
|
||||
cursor: crosshair;
|
||||
}
|
||||
.olControlSLDSelectLineActive {
|
||||
cursor: crosshair;
|
||||
}
|
||||
.olControlSLDSelectPointActive {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map, controls, layers;
|
||||
|
||||
function init(){
|
||||
OpenLayers.ProxyHost= "proxy.cgi?url=";
|
||||
map = new OpenLayers.Map('map', {allOverlays: true, controls: []});
|
||||
var url = "http://demo.opengeo.org/geoserver/wms";
|
||||
layers = {
|
||||
states: new OpenLayers.Layer.WMS("State boundary", url,
|
||||
{layers: 'topp:tasmania_state_boundaries', format: 'image/gif', transparent: 'TRUE'},
|
||||
{singleTile: true}),
|
||||
roads: new OpenLayers.Layer.WMS("Roads", url,
|
||||
{layers: 'topp:tasmania_roads', format: 'image/gif', transparent: 'TRUE'},
|
||||
{singleTile: true}),
|
||||
waterbodies: new OpenLayers.Layer.WMS("Water bodies", url,
|
||||
{layers: 'topp:tasmania_water_bodies', format: 'image/gif', transparent: 'TRUE'},
|
||||
{singleTile: true}),
|
||||
cities: new OpenLayers.Layer.WMS("Cities", url,
|
||||
{layers: 'topp:tasmania_cities', format: 'image/gif', transparent: 'TRUE'},
|
||||
{singleTile: true})
|
||||
};
|
||||
|
||||
for (var key in layers) {
|
||||
map.addLayer(layers[key]);
|
||||
}
|
||||
|
||||
map.setCenter(new OpenLayers.LonLat(146.65748632815,-42.230763671875), 7);
|
||||
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
|
||||
controls = {
|
||||
navigation: new OpenLayers.Control.Navigation(),
|
||||
box: new OpenLayers.Control.SLDSelect(
|
||||
OpenLayers.Handler.RegularPolygon,
|
||||
{
|
||||
displayClass: 'olControlSLDSelectBox',
|
||||
layers: [layers['waterbodies']],
|
||||
handlerOptions: {irregular: true}
|
||||
}
|
||||
),
|
||||
polygon: new OpenLayers.Control.SLDSelect(
|
||||
OpenLayers.Handler.Polygon,
|
||||
{
|
||||
displayClass: 'olControlSLDSelectPolygon',
|
||||
layers: [layers['waterbodies']]
|
||||
}
|
||||
),
|
||||
line: new OpenLayers.Control.SLDSelect(
|
||||
OpenLayers.Handler.Path,
|
||||
{
|
||||
displayClass: 'olControlSLDSelectLine',
|
||||
layers: [layers['waterbodies']]
|
||||
}
|
||||
),
|
||||
point: new OpenLayers.Control.SLDSelect(
|
||||
OpenLayers.Handler.Click,
|
||||
{
|
||||
displayClass: 'olControlSLDSelectPoint',
|
||||
layers: [layers['waterbodies']]
|
||||
}
|
||||
),
|
||||
circle: new OpenLayers.Control.SLDSelect(
|
||||
OpenLayers.Handler.RegularPolygon,
|
||||
{
|
||||
displayClass: 'olControlSLDSelectBox',
|
||||
layers: [layers['waterbodies']],
|
||||
handlerOptions: {sides: 30}
|
||||
}
|
||||
)
|
||||
};
|
||||
|
||||
for(var key in controls) {
|
||||
map.addControl(controls[key]);
|
||||
}
|
||||
}
|
||||
|
||||
function toggleControl(element) {
|
||||
for(var key in controls) {
|
||||
var control = controls[key];
|
||||
if(element.value == key && element.checked) {
|
||||
control.activate();
|
||||
} else {
|
||||
control.deactivate();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSelectionLayer(element) {
|
||||
var selectLayers = [];
|
||||
var elements = element.value.split("_");
|
||||
for (var key in layers) {
|
||||
var layer = layers[key];
|
||||
for (var i=0, len=elements.length; i<len; i++) {
|
||||
var value = elements[i];
|
||||
if (value == key && element.checked) {
|
||||
selectLayers.push(layer);
|
||||
}
|
||||
}
|
||||
}
|
||||
for (var i=0, len=this.map.controls.length; i<len; i++) {
|
||||
var control = this.map.controls[i];
|
||||
if (control instanceof OpenLayers.Control.SLDSelect) {
|
||||
control.setLayers(selectLayers);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">SLD based selection on WMS layers</h1>
|
||||
|
||||
<div id="tags"></div>
|
||||
|
||||
<div id="shortdesc">Using Styled Layer Descriptors to make a selection on WMS layers</div>
|
||||
|
||||
<div id="map" style="width: 512; height: 256; border: 1px solid red;"></div>
|
||||
|
||||
<div id="docs">
|
||||
This example uses the OpenLayers.Control.SLDSelect to select features in a WMS
|
||||
layer. The features are highlighted using Styled Layer Descriptors (SLD). The
|
||||
control supports point, box, line and polygon selection modes by configuring the
|
||||
appriopriate handler.
|
||||
</div>
|
||||
|
||||
<div id="controls">
|
||||
<ul id="controlToggle"><b>Map Controls</b>
|
||||
<li>
|
||||
<input type="radio" name="control" value="navigation" id="noneToggle" onclick="toggleControl(this);" CHECKED>
|
||||
<label for="noneToggle">navigate</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="control" value="box" id="boxToggle" onclick="toggleControl(this);">
|
||||
<label for="boxToggle">SLD select with box</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="control" value="polygon" id="polygonToggle" onclick="toggleControl(this);">
|
||||
<label for="polygonToggle">SLD select with polygon</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="control" value="line" id="lineToggle" onclick="toggleControl(this);">
|
||||
<label for="lineToggle">SLD select with line</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="control" value="point" id="pointToggle" onclick="toggleControl(this);">
|
||||
<label for="pointToggle">SLD select with point</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="control" value="circle" id="circleToggle" onclick="toggleControl(this);">
|
||||
<label for="circleToggle">SLD select with circle</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="layers">
|
||||
<ul id="layerToggle"><b>Selection layer</b>
|
||||
<li>
|
||||
<input type="radio" name="layer" value="waterbodies" id="waterbodiesToggle" onclick="toggleSelectionLayer(this);" CHECKED>
|
||||
<label for="noneToggle">Water bodies</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="layer" value="cities" id="citiesToggle" onclick="toggleSelectionLayer(this);">
|
||||
<label for="citiesToggle">Cities</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="layer" value="roads" id="roadsToggle" onclick="toggleSelectionLayer(this);">
|
||||
<label for="roadsToggle">Roads</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="layer" value="roads_cities" id="roadsCitiesToggle" onclick="toggleSelectionLayer(this);">
|
||||
<label for="roadsCitiesToggle">Roads and cities</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,175 +0,0 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>OpenLayers Basic WMS Example via HTTP-POST protocol</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map;
|
||||
|
||||
function init(){
|
||||
var sld = '<StyledLayerDescriptor version="1.0.0">';
|
||||
sld+= '<NamedLayer>';
|
||||
sld+= '<Name>topp:tasmania_roads</Name>';
|
||||
sld+= '<UserStyle>';
|
||||
sld+= '<IsDefault>1</IsDefault>';
|
||||
sld+= '<FeatureTypeStyle>';
|
||||
sld+= '<Rule>';
|
||||
sld+= '<LineSymbolizer>';
|
||||
sld+= '<Stroke>';
|
||||
sld+= '<CssParameter name="stroke">';
|
||||
sld+= '<Literal>#787878</Literal>';
|
||||
sld+= '</CssParameter>';
|
||||
sld+= '<CssParameter name="stroke-width">';
|
||||
sld+= '<Literal>2</Literal>';
|
||||
sld+= '</CssParameter>';
|
||||
sld+= '</Stroke>';
|
||||
sld+= '</LineSymbolizer>';
|
||||
sld+= '</Rule>';
|
||||
sld+= '</FeatureTypeStyle>';
|
||||
sld+= '</UserStyle>';
|
||||
sld+= '</NamedLayer>';
|
||||
|
||||
sld+= '<NamedLayer>';
|
||||
sld+= '<Name>topp:tasmania_water_bodies</Name>';
|
||||
sld+= '<UserStyle>';
|
||||
sld+= '<IsDefault>1</IsDefault>';
|
||||
sld+= '<FeatureTypeStyle>';
|
||||
sld+= '<Rule>';
|
||||
sld+= '<LineSymbolizer>';
|
||||
sld+= '<Stroke>';
|
||||
sld+= '<CssParameter name="stroke">';
|
||||
sld+= '<Literal>#4F94CD</Literal>';
|
||||
sld+= '</CssParameter>';
|
||||
sld+= '<CssParameter name="stroke-width">';
|
||||
sld+= '<Literal>3</Literal>';
|
||||
sld+= '</CssParameter>';
|
||||
sld+= '</Stroke>';
|
||||
sld+= '</LineSymbolizer>';
|
||||
sld+= '<PolygonSymbolizer>';
|
||||
sld+= '<Fill>';
|
||||
sld+= '<CssParameter name="fill">';
|
||||
sld+= '<Literal>#63B8FF</Literal>';
|
||||
sld+= '</CssParameter>';
|
||||
sld+= '</Fill>';
|
||||
sld+= '</PolygonSymbolizer>';
|
||||
sld+= '</Rule>';
|
||||
sld+= '</FeatureTypeStyle>';
|
||||
sld+= '</UserStyle>';
|
||||
sld+= '</NamedLayer>';
|
||||
|
||||
sld+= '<NamedLayer>';
|
||||
sld+= '<Name>topp:tasmania_cities</Name>';
|
||||
sld+= '<UserStyle>';
|
||||
sld+= '<IsDefault>1</IsDefault>';
|
||||
sld+= '<FeatureTypeStyle>';
|
||||
sld+= '<Rule>';
|
||||
sld+= '<PointSymbolizer>';
|
||||
sld+= '<Graphic>';
|
||||
sld+= '<Mark>';
|
||||
sld+= '<WellKnownName>cross</WellKnownName>';
|
||||
sld+= '<Fill>';
|
||||
sld+= '<CssParameter name="fill">';
|
||||
sld+= '<Literal>#00FF00</Literal>';
|
||||
sld+= '</CssParameter>';
|
||||
sld+= '</Fill>';
|
||||
sld+= '</Mark>';
|
||||
sld+= '<Size>15</Size>';
|
||||
sld+= '</Graphic>';
|
||||
sld+= '</PointSymbolizer>';
|
||||
sld+= '<TextSymbolizer>';
|
||||
sld+= '<Label><PropertyName>CITY_NAME</PropertyName></Label>';
|
||||
sld+= '<Font>';
|
||||
sld+= '<SvgParameter name="font-size">15</SvgParameter>';
|
||||
sld+= '</Font>';
|
||||
sld+= '</TextSymbolizer>';
|
||||
sld+= '</Rule>';
|
||||
sld+= '</FeatureTypeStyle>';
|
||||
sld+= '</UserStyle>';
|
||||
sld+= '</NamedLayer>';
|
||||
|
||||
sld+= '<NamedLayer>';
|
||||
sld+= '<Name>topp:tasmania_state_boundaries</Name>';
|
||||
sld+= '<UserStyle>';
|
||||
sld+= '<IsDefault>1</IsDefault>';
|
||||
sld+= '<FeatureTypeStyle>';
|
||||
sld+= '<Rule>';
|
||||
sld+= '<PolygonSymbolizer>';
|
||||
sld+= '<Fill>';
|
||||
sld+= '<CssParameter name="fill">';
|
||||
sld+= '<Literal>#8B8989</Literal>';
|
||||
sld+= '</CssParameter>';
|
||||
sld+= '<CssParameter name="fill-opacity">';
|
||||
sld+= '<Literal>0.2</Literal>';
|
||||
sld+= '</CssParameter>';
|
||||
sld+= '</Fill>';
|
||||
sld+= '<Stroke>';
|
||||
sld+= '<CssParameter name="stroke">';
|
||||
sld+= '<Literal>#FF4040</Literal>';
|
||||
sld+= '</CssParameter>';
|
||||
sld+= '<CssParameter name="stroke-width">';
|
||||
sld+= '<Literal>2</Literal>';
|
||||
sld+= '</CssParameter>';
|
||||
sld+= '</Stroke>';
|
||||
sld+= '</PolygonSymbolizer>';
|
||||
sld+= '</Rule>';
|
||||
sld+= '</FeatureTypeStyle>';
|
||||
sld+= '</UserStyle>';
|
||||
sld+= '</NamedLayer>';
|
||||
|
||||
sld+= '</StyledLayerDescriptor>';
|
||||
|
||||
map = new OpenLayers.Map('map');
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
|
||||
var layer = new OpenLayers.Layer.WMS(
|
||||
"OpenLayers WMS",
|
||||
"http://labs.metacarta.com/wms/vmap0",
|
||||
{
|
||||
layers: 'basic'
|
||||
}
|
||||
);
|
||||
|
||||
var rcbw = new OpenLayers.Layer.WMS.Post("Roads, Cities, Boundaries, Water",
|
||||
"http://demo.opengeo.org/geoserver/wms",
|
||||
{
|
||||
'layers': 'topp:tasmania_roads,topp:tasmania_water_bodies,topp:tasmania_state_boundaries,topp:tasmania_cities',
|
||||
transparent: true,
|
||||
format: 'image/jpeg',
|
||||
sld_body: sld
|
||||
},
|
||||
{
|
||||
isBaseLayer: false,
|
||||
unsupportedBrowsers: []
|
||||
}
|
||||
);
|
||||
map.addLayers([layer, rcbw]);
|
||||
map.setCenter(new OpenLayers.LonLat(146.65748632815,-42.230763671875), 7);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Basic WMS Example via HTTP-POST protocol with a large SLD
|
||||
included</h1>
|
||||
|
||||
<div id="tags"></div>
|
||||
|
||||
<div id="shortdesc">Creating a WMS layer with a large SLD in the sld_body</div>
|
||||
|
||||
<div id="map" style="width: 512; height: 256; border: 1px solid red;"></div>
|
||||
|
||||
<div id="docs">
|
||||
This example uses a large SLD created on the client side to style a WMS
|
||||
layer. This example uses a WMS.Post layer which transfers data via the
|
||||
HTTP-POST protocol. <br>
|
||||
NOTE: Opera is not able to display transparent tiles with this layer,
|
||||
and in some Firefox browsers can appear ugly viewport-shaking effects
|
||||
while dragging arround. Use the 'unsupportedBrowsers' property to
|
||||
control which browsers should use plain image tiles (like Layer.WMS)
|
||||
instead. The default setting (["mozilla", "firefox", "opera"])
|
||||
excludes problematic browsers without removing the ability to use long
|
||||
request parameters, because all these browsers support long urls via
|
||||
GET.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,29 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenLayers All Overlays with Google and OSM</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../theme/default/google.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="all-overlays-google.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">All Overlays with Google and OSM</h1>
|
||||
<p id="shortdesc">
|
||||
Using the Google and OSM layers as overlays.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
<p>
|
||||
Using the allOverlays property on the map, the first layer added
|
||||
must initially be visible. This example demonstrates the use of
|
||||
a Google layer and an OSM layer treated as overlays.
|
||||
</p><p>
|
||||
See the <a href="all-overlays-google.js" target="_blank">
|
||||
all-overlays-google.js source</a> to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,19 +0,0 @@
|
||||
var map;
|
||||
|
||||
function init() {
|
||||
|
||||
map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
allOverlays: true
|
||||
});
|
||||
|
||||
var osm = new OpenLayers.Layer.OSM();
|
||||
var gmap = new OpenLayers.Layer.Google("Google Streets", {visibility: false});
|
||||
|
||||
// note that first layer must be visible
|
||||
map.addLayers([osm, gmap]);
|
||||
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
map.zoomToMaxExtent();
|
||||
|
||||
}
|
||||
@@ -44,7 +44,7 @@
|
||||
|
||||
layer = new OpenLayers.Layer.ArcIMS(
|
||||
"Global Sample Map",
|
||||
"http://sample.azavea.com/servlet/com.esri.esrimap.Esrimap",
|
||||
"http://sample.avencia.com/servlet/com.esri.esrimap.Esrimap",
|
||||
options
|
||||
);
|
||||
map.addLayer(layer);
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
};
|
||||
|
||||
layer = new OpenLayers.Layer.ArcIMS( "Global Sample Map",
|
||||
"http://sample.azavea.com/servlet/com.esri.esrimap.Esrimap", options );
|
||||
"http://sample.avencia.com/servlet/com.esri.esrimap.Esrimap", options );
|
||||
map.addLayer(layer);
|
||||
|
||||
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
|
||||
|
||||
@@ -53,8 +53,8 @@
|
||||
}
|
||||
|
||||
function add() {
|
||||
var url = 'http://www.openlayers.org/dev/img/marker.png';
|
||||
var sz = new OpenLayers.Size(21, 25);
|
||||
var url = 'http://boston.openguides.org/markers/AQUA.png';
|
||||
var sz = new OpenLayers.Size(10, 17);
|
||||
var calculateOffset = function(size) {
|
||||
return new OpenLayers.Pixel(-(size.w/2), -size.h);
|
||||
};
|
||||
|
||||
@@ -1,49 +0,0 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>OpenLayers Bing Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script>
|
||||
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script>
|
||||
|
||||
var map;
|
||||
|
||||
function init(){
|
||||
map = new OpenLayers.Map("map");
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
|
||||
var shaded = new OpenLayers.Layer.VirtualEarth("Shaded", {
|
||||
type: VEMapStyle.Shaded
|
||||
});
|
||||
var hybrid = new OpenLayers.Layer.VirtualEarth("Hybrid", {
|
||||
type: VEMapStyle.Hybrid
|
||||
});
|
||||
var aerial = new OpenLayers.Layer.VirtualEarth("Aerial", {
|
||||
type: VEMapStyle.Aerial
|
||||
});
|
||||
|
||||
map.addLayers([shaded, hybrid, aerial]);
|
||||
|
||||
map.setCenter(new OpenLayers.LonLat(-110, 45), 3);
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Bing Example</h1>
|
||||
|
||||
<div id="tags"></div>
|
||||
|
||||
<p id="shortdesc">
|
||||
Demonstrates the use of Bing layers.
|
||||
</p>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">This example demonstrates the ability to create layers using tiles from Bing maps.</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Canvas Renderer Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
|
||||
<script src="canvas.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Canvas Renderer Example</h1>
|
||||
<p id="shortdesc">
|
||||
Demonstrates the use of the canvas renderer with a vector layer.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
<p>
|
||||
This example shows a vector layer that uses the Canvas renderer
|
||||
where available. The order of the renderers given in the layer
|
||||
options is used to locate the first available renderer.
|
||||
</p>
|
||||
<p>
|
||||
See the <a href="canvas.js" target="_blank">canvas.js source</a>
|
||||
to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,62 +0,0 @@
|
||||
var map, layer, styleMap;
|
||||
OpenLayers.ProxyHost = "proxy.cgi?url=";
|
||||
|
||||
function init() {
|
||||
map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
projection: new OpenLayers.Projection("EPSG:900913"),
|
||||
displayProjection: new OpenLayers.Projection("EPSG:4326"),
|
||||
units: "m",
|
||||
maxResolution: 156543.0339,
|
||||
maxExtent: new OpenLayers.Bounds(
|
||||
-20037508, -20037508, 20037508, 20037508
|
||||
)
|
||||
});
|
||||
|
||||
var g = new OpenLayers.Layer.Google("Google Layer", {
|
||||
sphericalMercator: true
|
||||
});
|
||||
map.addLayers([g]);
|
||||
|
||||
// prepare to style the data
|
||||
styleMap = new OpenLayers.StyleMap({
|
||||
strokeColor: "black",
|
||||
strokeWidth: 2,
|
||||
strokeOpacity: 0.5,
|
||||
fillOpacity: 0.2
|
||||
});
|
||||
|
||||
// create a color table for state FIPS code
|
||||
var colors = ["red", "orange", "yellow", "green", "blue", "purple"];
|
||||
var code, fips = {};
|
||||
for(var i=1; i<=66; ++i) {
|
||||
code = "0" + i;
|
||||
code = code.substring(code.length - 2);
|
||||
fips[code] = {fillColor: colors[i % colors.length]};
|
||||
}
|
||||
// add unique value rules with your color lookup
|
||||
styleMap.addUniqueValueRules("default", "STATE_FIPS", fips);
|
||||
|
||||
// create a vector layer using the canvas renderer (where available)
|
||||
var wfs = new OpenLayers.Layer.Vector("States", {
|
||||
strategies: [new OpenLayers.Strategy.BBOX()],
|
||||
protocol: new OpenLayers.Protocol.WFS({
|
||||
version: "1.1.0",
|
||||
srsName: "EPSG:900913",
|
||||
url: "http://demo.opengeo.org/geoserver/wfs",
|
||||
featureType: "states",
|
||||
featureNS: "http://www.openplans.org/topp"
|
||||
}),
|
||||
styleMap: styleMap,
|
||||
renderers: ["Canvas", "SVG", "VML"]
|
||||
});
|
||||
map.addLayer(wfs);
|
||||
|
||||
// if you want to use Geographic coords, transform to ESPG:900913
|
||||
var ddBounds = new OpenLayers.Bounds(
|
||||
-73.839111,40.287907,-68.214111,44.441624
|
||||
);
|
||||
map.zoomToExtent(
|
||||
ddBounds.transform(map.displayProjection, map.getProjectionObject())
|
||||
);
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>OpenLayers Document Drag Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map, layer;
|
||||
function init(){
|
||||
map = new OpenLayers.Map( 'map', {controls: [
|
||||
new OpenLayers.Control.Navigation({documentDrag: true}),
|
||||
new OpenLayers.Control.PanZoom(),
|
||||
new OpenLayers.Control.ArgParser(),
|
||||
new OpenLayers.Control.Attribution()
|
||||
]} );
|
||||
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
|
||||
"http://labs.metacarta.com/wms/vmap0",
|
||||
{layers: 'basic'} );
|
||||
map.addLayer(layer);
|
||||
map.zoomToMaxExtent();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">OpenLayers Document Drag Example</h1>
|
||||
|
||||
<div id="tags"></div>
|
||||
|
||||
<div id="shortdesc">Keep on dragging even when the mouse cursor moves outside of the map</div>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
<div id="docs">
|
||||
This example shows how to make a map draggable outside of the map itself.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -11,15 +11,11 @@
|
||||
p {
|
||||
width: 512px;
|
||||
}
|
||||
|
||||
/* avoid pink tiles */
|
||||
.olImageLoadError {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map, drawControls;
|
||||
OpenLayers.Util.onImageLoadErrorColor = "transparent";
|
||||
function init(){
|
||||
map = new OpenLayers.Map('map');
|
||||
|
||||
|
||||
@@ -1,90 +0,0 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>OpenLayers Vector Behavior Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map;
|
||||
|
||||
function init(){
|
||||
map = new OpenLayers.Map('map');
|
||||
var wms = new OpenLayers.Layer.WMS(
|
||||
"OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0",
|
||||
{layers: 'basic'}
|
||||
);
|
||||
|
||||
var layer = new OpenLayers.Layer.Vector("POIs", {
|
||||
strategies: [new OpenLayers.Strategy.BBOX({resFactor: 1.1})],
|
||||
protocol: new OpenLayers.Protocol.HTTP({
|
||||
url: "textfile.txt",
|
||||
format: new OpenLayers.Format.Text()
|
||||
})
|
||||
});
|
||||
|
||||
map.addLayers([wms, layer]);
|
||||
map.zoomToMaxExtent();
|
||||
|
||||
// Interaction; not needed for initial display.
|
||||
selectControl = new OpenLayers.Control.SelectFeature(layer);
|
||||
map.addControl(selectControl);
|
||||
selectControl.activate();
|
||||
layer.events.on({
|
||||
'featureselected': onFeatureSelect,
|
||||
'featureunselected': onFeatureUnselect
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Needed only for interaction, not for the display.
|
||||
function onPopupClose(evt) {
|
||||
// 'this' is the popup.
|
||||
selectControl.unselect(this.feature);
|
||||
}
|
||||
function onFeatureSelect(evt) {
|
||||
feature = evt.feature;
|
||||
popup = new OpenLayers.Popup.FramedCloud("featurePopup",
|
||||
feature.geometry.getBounds().getCenterLonLat(),
|
||||
new OpenLayers.Size(100,100),
|
||||
"<h2>"+feature.attributes.title + "</h2>" +
|
||||
feature.attributes.description,
|
||||
null, true, onPopupClose);
|
||||
feature.popup = popup;
|
||||
popup.feature = feature;
|
||||
map.addPopup(popup);
|
||||
}
|
||||
function onFeatureUnselect(evt) {
|
||||
feature = evt.feature;
|
||||
if (feature.popup) {
|
||||
popup.feature = null;
|
||||
map.removePopup(feature.popup);
|
||||
feature.popup.destroy();
|
||||
feature.popup = null;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Dynamic POIs via a Text Layer</h1>
|
||||
<p id="shortdesc">
|
||||
Loading dynamic data from a text file.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
The vector layer shown uses the BBOX strategy, the HTTP protocol,
|
||||
and the Text format.
|
||||
This setup appends "?bbox=west,south,east,north" to every
|
||||
request. This allows you to configure the location as something
|
||||
like 'textfile.php', and take the '?bbox=' parameter to select
|
||||
data from a database or the like.
|
||||
<br /><br />
|
||||
There is nothing about this example that limits it to text files;
|
||||
you can do the same thing with KML, GeoJSON, etc.
|
||||
<br /><br />
|
||||
This is an alternative to something like the <a href="http://wiki.openstreetmap.org/index.php/OpenLayers_Dynamic_POI">OpenStreetMap "Dynamic POI"</a> example. The Layer is a standard vector layer, and interaction can be
|
||||
configured via the SelectFeature control, as you can see in the
|
||||
latter half of the code, which allows you to open a popup when
|
||||
a feature is selected.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -26,15 +26,16 @@
|
||||
);
|
||||
|
||||
var dm_wms = new OpenLayers.Layer.WMS(
|
||||
"Canadian Data",
|
||||
"DM Solutions Demo",
|
||||
"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"
|
||||
},
|
||||
{isBaseLayer: false, visibility: false}
|
||||
transparent: "true", format: "image/png"},
|
||||
{
|
||||
minResolution: 0.17578125,
|
||||
maxResolution: 0.703125
|
||||
}
|
||||
);
|
||||
|
||||
map.addLayers([ol_wms, jpl_wms, dm_wms]);
|
||||
|
||||
@@ -1,48 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenLayers Filter Strategy Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../theme/default/google.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script>OpenLayers.ImgPath = "../img/";</script>
|
||||
<script src="filter-strategy.js"></script>
|
||||
<style>
|
||||
.olControlAttribution {
|
||||
font-size: 9px;
|
||||
bottom: 2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Filter Strategy</h1>
|
||||
<p id="shortdesc">
|
||||
Demonstrates the filter strategy for limiting features passed to the layer.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<label for="span">time span (seconds)</label>
|
||||
<select id="span" name="span">
|
||||
<option value="15">15</option>
|
||||
<option value="30">30</option>
|
||||
<option value="60" selected>60</option>
|
||||
<option value="120">120</option>
|
||||
<option value="240">240</option>
|
||||
</select>
|
||||
<input type="button" id="start" value="start">
|
||||
<input type="button" id="stop" value="stop"><br><br>
|
||||
<div id="docs">
|
||||
<p>
|
||||
This example uses a filter strategy to limit the features that are passed
|
||||
to a layer. Features bound for this layer have a <code>when</code> attribute
|
||||
with date values. A filter strategy is constructed with a between filter
|
||||
that limits the span of dates shown. A simple animation cycles through
|
||||
the domain of the <code>when</code> values, calling <code>setFilter</code>
|
||||
on the strategy with an updated filter.
|
||||
</p><p>
|
||||
View the <a href="filter-strategy.js" target="_blank">filter-strategy.js</a>
|
||||
source to see how this is done
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,89 +0,0 @@
|
||||
var map, filter, filterStrategy;
|
||||
|
||||
var startDate = new Date(1272736800000); // lower bound of when values
|
||||
var endDate = new Date(1272737100000); // upper value of when values
|
||||
var step = 8; // sencods to advance each interval
|
||||
var interval = 0.125; // seconds between each step in the animation
|
||||
|
||||
function init() {
|
||||
|
||||
// add behavior to elements
|
||||
document.getElementById("start").onclick = startAnimation;
|
||||
document.getElementById("stop").onclick = stopAnimation;
|
||||
var spanEl = document.getElementById("span");
|
||||
|
||||
var mercator = new OpenLayers.Projection("EPSG:900913");
|
||||
var geographic = new OpenLayers.Projection("EPSG:4326");
|
||||
map = new OpenLayers.Map("map");
|
||||
|
||||
var osm = new OpenLayers.Layer.OSM();
|
||||
|
||||
filter = new OpenLayers.Filter.Comparison({
|
||||
type: OpenLayers.Filter.Comparison.BETWEEN,
|
||||
property: "when",
|
||||
lowerBoundary: startDate,
|
||||
upperBoundary: new Date(startDate.getTime() + (parseInt(spanEl.value, 10) * 1000))
|
||||
});
|
||||
|
||||
filterStrategy = new OpenLayers.Strategy.Filter({filter: filter});
|
||||
|
||||
var flights = new OpenLayers.Layer.Vector("Aircraft Locations", {
|
||||
projection: geographic,
|
||||
strategies: [new OpenLayers.Strategy.Fixed(), filterStrategy],
|
||||
protocol: new OpenLayers.Protocol.HTTP({
|
||||
url: "kml-track.kml",
|
||||
format: new OpenLayers.Format.KML({
|
||||
extractTracks: true
|
||||
//,extractStyles: true // use style from KML instead of styleMap below
|
||||
})
|
||||
}),
|
||||
styleMap: new OpenLayers.StyleMap({
|
||||
"default": new OpenLayers.Style({
|
||||
graphicName: "circle",
|
||||
pointRadius: 3,
|
||||
fillOpacity: 0.25,
|
||||
fillColor: "#ffcc66",
|
||||
strokeColor: "#ff9933",
|
||||
strokeWidth: 1
|
||||
})
|
||||
}),
|
||||
renderers: ["Canvas", "SVG", "VML"]
|
||||
});
|
||||
|
||||
map.addLayers([osm, flights]);
|
||||
map.setCenter(new OpenLayers.LonLat(-93.2735, 44.8349).transform(geographic, mercator), 8);
|
||||
|
||||
};
|
||||
|
||||
var animationTimer;
|
||||
var currentDate;
|
||||
function startAnimation() {
|
||||
if (animationTimer) {
|
||||
stopAnimation(true);
|
||||
}
|
||||
if (!currentDate) {
|
||||
currentDate = startDate;
|
||||
}
|
||||
var spanEl = document.getElementById("span");
|
||||
var next = function() {
|
||||
var span = parseInt(spanEl.value, 10);
|
||||
if (currentDate < endDate) {
|
||||
filter.lowerBoundary = currentDate;
|
||||
filter.upperBoundary = new Date(currentDate.getTime() + (span * 1000));
|
||||
filterStrategy.setFilter(filter);
|
||||
currentDate = new Date(currentDate.getTime() + (step * 1000))
|
||||
} else {
|
||||
stopAnimation(true);
|
||||
}
|
||||
}
|
||||
animationTimer = window.setInterval(next, interval * 1000);
|
||||
}
|
||||
|
||||
function stopAnimation(reset) {
|
||||
window.clearInterval(animationTimer);
|
||||
animationTimer = null;
|
||||
if (reset === true) {
|
||||
currentDate = null;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,21 +60,18 @@
|
||||
</div>
|
||||
|
||||
<p id="shortdesc">
|
||||
Shows how to use the GetFeature control to select features from a WMS layer.
|
||||
Shows how to use the GetFeature control to select features from a
|
||||
WMS layer. Click or drag a box to select features, use the Shift key to
|
||||
add features to the selection, use the Ctrl key to toggle a feature's
|
||||
selected status. Note that this control also has a hover option, which is
|
||||
enabled in this example. This gives you a visual feedback by loading the
|
||||
feature underneath the mouse pointer from the WFS, but causes a lot of
|
||||
GetFeature requests to be issued.
|
||||
</p>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
<div id="docs">
|
||||
<p>
|
||||
Click or drag a box to select features, use the Shift key to add
|
||||
features to the selection, use the Ctrl key to toggle a feature's
|
||||
selected status. Note that this control also has a hover option, which
|
||||
is enabled in this example. This gives you a visual feedback by loading
|
||||
the feature underneath the mouse pointer from the WFS, but causes a lot
|
||||
of GetFeature requests to be issued.
|
||||
</p>
|
||||
</div>
|
||||
<div id="docs"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -37,6 +37,7 @@
|
||||
text-align:left;
|
||||
font-size:100%;
|
||||
font-weight:bold;
|
||||
text-transform:uppercase;
|
||||
padding:.2em .2em;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,90 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>GetFeatureInfo Popup</title>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script>
|
||||
OpenLayers.ProxyHost = "proxy.cgi?url=";
|
||||
|
||||
var map, info;
|
||||
|
||||
function load() {
|
||||
map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
maxExtent: new OpenLayers.Bounds(143.834,-43.648,148.479,-39.573)
|
||||
});
|
||||
|
||||
var political = new OpenLayers.Layer.WMS("State Boundaries",
|
||||
"http://demo.opengeo.org/geoserver/wms",
|
||||
{'layers': 'topp:tasmania_state_boundaries', transparent: true, format: 'image/gif'},
|
||||
{isBaseLayer: true}
|
||||
);
|
||||
|
||||
var roads = new OpenLayers.Layer.WMS("Roads",
|
||||
"http://demo.opengeo.org/geoserver/wms",
|
||||
{'layers': 'topp:tasmania_roads', transparent: true, format: 'image/gif'},
|
||||
{isBaseLayer: false}
|
||||
);
|
||||
|
||||
var cities = new OpenLayers.Layer.WMS("Cities",
|
||||
"http://demo.opengeo.org/geoserver/wms",
|
||||
{'layers': 'topp:tasmania_cities', transparent: true, format: 'image/gif'},
|
||||
{isBaseLayer: false}
|
||||
);
|
||||
|
||||
var water = new OpenLayers.Layer.WMS("Bodies of Water",
|
||||
"http://demo.opengeo.org/geoserver/wms",
|
||||
{'layers': 'topp:tasmania_water_bodies', transparent: true, format: 'image/gif'},
|
||||
{isBaseLayer: false}
|
||||
);
|
||||
|
||||
var highlight = new OpenLayers.Layer.Vector("Highlighted Features", {
|
||||
displayInLayerSwitcher: false,
|
||||
isBaseLayer: false
|
||||
});
|
||||
|
||||
map.addLayers([political, roads, cities, water, highlight]);
|
||||
|
||||
info = new OpenLayers.Control.WMSGetFeatureInfo({
|
||||
url: 'http://demo.opengeo.org/geoserver/wms',
|
||||
title: 'Identify features by clicking',
|
||||
queryVisible: true,
|
||||
eventListeners: {
|
||||
getfeatureinfo: function(event) {
|
||||
map.addPopup(new OpenLayers.Popup.FramedCloud(
|
||||
"chicken",
|
||||
map.getLonLatFromPixel(event.xy),
|
||||
null,
|
||||
event.text,
|
||||
null,
|
||||
true
|
||||
));
|
||||
}
|
||||
}
|
||||
});
|
||||
map.addControl(info);
|
||||
info.activate();
|
||||
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
map.zoomToMaxExtent();
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="load()">
|
||||
<h1 id="title">Feature Info in Popup</h1>
|
||||
|
||||
<div id="tags"></div>
|
||||
|
||||
<p id="shortdesc">
|
||||
Demonstrates the WMSGetFeatureInfo control for fetching information
|
||||
about a position from WMS (via GetFeatureInfo request). Results
|
||||
are displayed in a popup.
|
||||
</p>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
<div id="docs"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,28 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenLayers Google (v3) Layer Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../theme/default/google.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="google-v3-alloverlays.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Google (v3) allOverlays Layer Example</h1>
|
||||
<p id="shortdesc">
|
||||
Demonstrate use the Google Maps v3 API with allOverlays set to true on the map.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
<p>
|
||||
You can also use Google layers as overlays, e.g. in a map with
|
||||
allOverlays set to true. Note some of the layers disappear as
|
||||
you zoom in to levels that are not supported by all layers. See the
|
||||
<a href="google-v3-alloverlays.js" target="_blank">google-v3-alloverlays.js source</a>
|
||||
to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,35 +0,0 @@
|
||||
var map;
|
||||
|
||||
function init() {
|
||||
map = new OpenLayers.Map('map', {allOverlays: true});
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
|
||||
// the SATELLITE layer has all 22 zoom level, so we add it first to
|
||||
// become the internal base layer that determines the zoom levels of the
|
||||
// map.
|
||||
var gsat = new OpenLayers.Layer.Google(
|
||||
"Google Satellite",
|
||||
{type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
|
||||
);
|
||||
var gphy = new OpenLayers.Layer.Google(
|
||||
"Google Physical",
|
||||
{type: google.maps.MapTypeId.TERRAIN, visibility: false}
|
||||
);
|
||||
var gmap = new OpenLayers.Layer.Google(
|
||||
"Google Streets", // the default
|
||||
{numZoomLevels: 20, visibility: false}
|
||||
);
|
||||
var ghyb = new OpenLayers.Layer.Google(
|
||||
"Google Hybrid",
|
||||
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 22, visibility: false}
|
||||
);
|
||||
|
||||
map.addLayers([gsat, gphy, gmap, ghyb]);
|
||||
|
||||
// Google.v3 uses EPSG:900913 as projection, so we have to
|
||||
// transform our coordinates
|
||||
map.setCenter(new OpenLayers.LonLat(10.2, 48.9).transform(
|
||||
new OpenLayers.Projection("EPSG:4326"),
|
||||
map.getProjectionObject()
|
||||
), 5);
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenLayers Google (v3) Layer Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../theme/default/google.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="google-v3.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Google (v3) Layer Example</h1>
|
||||
<p id="shortdesc">
|
||||
Demonstrate use the Google Maps v3 API.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
<p>
|
||||
If you use the Google Maps v3 API with a Google layer, you don't
|
||||
need to include an API key. This layer only works in the
|
||||
spherical mercator projection. See the
|
||||
<a href="google-v3.js" target="_blank">google-v3.js source</a>
|
||||
to see how this is done.
|
||||
<p>
|
||||
In order to position the Google attribution div in the default
|
||||
location, you must include the extra theme/default/google.css
|
||||
stylesheet.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,32 +0,0 @@
|
||||
var map;
|
||||
|
||||
function init() {
|
||||
map = new OpenLayers.Map('map');
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
|
||||
var gphy = new OpenLayers.Layer.Google(
|
||||
"Google Physical",
|
||||
{type: google.maps.MapTypeId.TERRAIN}
|
||||
);
|
||||
var gmap = new OpenLayers.Layer.Google(
|
||||
"Google Streets", // the default
|
||||
{numZoomLevels: 20}
|
||||
);
|
||||
var ghyb = new OpenLayers.Layer.Google(
|
||||
"Google Hybrid",
|
||||
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
|
||||
);
|
||||
var gsat = new OpenLayers.Layer.Google(
|
||||
"Google Satellite",
|
||||
{type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
|
||||
);
|
||||
|
||||
map.addLayers([gphy, gmap, ghyb, gsat]);
|
||||
|
||||
// Google.v3 uses EPSG:900913 as projection, so we have to
|
||||
// transform our coordinates
|
||||
map.setCenter(new OpenLayers.LonLat(10.2, 48.9).transform(
|
||||
new OpenLayers.Projection("EPSG:4326"),
|
||||
map.getProjectionObject()
|
||||
), 5);
|
||||
}
|
||||
@@ -28,7 +28,7 @@
|
||||
);
|
||||
var gsat = new OpenLayers.Layer.Google(
|
||||
"Google Satellite",
|
||||
{type: G_SATELLITE_MAP, numZoomLevels: 22}
|
||||
{type: G_SATELLITE_MAP, numZoomLevels: 20}
|
||||
);
|
||||
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
it is best to simply set your application to use the string "v=2" in
|
||||
the request, rather than tying your application to an explicit version.</p>
|
||||
<p>
|
||||
In order to position the Google attribution div in the default location,
|
||||
In order to position the Google attribution div in the default ocation,
|
||||
you must include the extra theme/default/google.css stylesheet.</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
// user custom graphicname
|
||||
|
||||
OpenLayers.Renderer.symbol.lightning = [0,0, 4,2, 6,0, 10,5, 6,3, 4,5, 0,0];
|
||||
OpenLayers.Renderer.symbol.rectangle = [0,0, 4,0, 4,10, 0,10, 0,0];
|
||||
OpenLayers.Renderer.symbol.rectangle = [0,0, 10,0, 10,4, 0,4, 0,0];
|
||||
|
||||
var map;
|
||||
|
||||
@@ -48,8 +48,7 @@
|
||||
},
|
||||
"select": {
|
||||
pointRadius: 20,
|
||||
fillOpacity: 1,
|
||||
rotation: 45
|
||||
fillOpacity: 1
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -1,111 +0,0 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>OpenLayers Graticule Example</title>
|
||||
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<style type="text/css">
|
||||
#map {
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
border: 1px solid black;
|
||||
float:left;
|
||||
}
|
||||
#map2 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border: 1px solid black;
|
||||
float:left;
|
||||
}
|
||||
</style>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="http://proj4js.org/lib/proj4js-compressed.js"></script>
|
||||
<script type="text/javascript">
|
||||
Proj4js.defs["EPSG:42304"]="+title=Atlas of Canada, LCC +proj=lcc +lat_1=49 +lat_2=77 +lat_0=49 +lon_0=-95 +x_0=0 +y_0=0 +ellps=GRS80 +datum=NAD83 +units=m +no_defs";
|
||||
|
||||
var graticuleCtl1, graticuleCtl2;
|
||||
var map1, map2;
|
||||
function init(){
|
||||
initLonLat();
|
||||
initProjected();
|
||||
}
|
||||
function initLonLat(){
|
||||
graticuleCtl1 = new OpenLayers.Control.Graticule({
|
||||
numPoints: 2,
|
||||
labelled: true
|
||||
});
|
||||
map1 = new OpenLayers.Map('map', {
|
||||
controls: [
|
||||
graticuleCtl1,
|
||||
new OpenLayers.Control.LayerSwitcher(),
|
||||
new OpenLayers.Control.PanZoomBar(),
|
||||
new OpenLayers.Control.Navigation()
|
||||
]
|
||||
});
|
||||
|
||||
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
|
||||
"http://labs.metacarta.com/wms/vmap0",
|
||||
{layers: 'basic'}, {wrapDateLine: true} );
|
||||
|
||||
map1.addLayers([ol_wms]);
|
||||
if (!map1.getCenter()) map1.zoomToMaxExtent();
|
||||
};
|
||||
|
||||
function initProjected(){
|
||||
var extent = new OpenLayers.Bounds(-2200000,-712631,3072800,3840000);
|
||||
graticuleCtl2 = new OpenLayers.Control.Graticule({
|
||||
labelled: true,
|
||||
targetSize: 200
|
||||
});
|
||||
var mapOptions = {
|
||||
controls: [
|
||||
graticuleCtl2,
|
||||
new OpenLayers.Control.LayerSwitcher(),
|
||||
new OpenLayers.Control.PanZoomBar(),
|
||||
new OpenLayers.Control.Navigation()
|
||||
],
|
||||
//scales: tempScales,
|
||||
maxExtent: extent,
|
||||
maxResolution: 50000,
|
||||
units: 'm',
|
||||
projection: 'EPSG:42304'
|
||||
};
|
||||
map2 = new OpenLayers.Map('map2', mapOptions);
|
||||
|
||||
var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
|
||||
"http://www2.dmsolutions.ca/cgi-bin/mswms_gmap", {
|
||||
layers: "bathymetry",
|
||||
format: "image/png"
|
||||
},{
|
||||
singleTile: true
|
||||
});
|
||||
|
||||
map2.addLayers([dm_wms]);
|
||||
if (!map2.getCenter()) map2.zoomToExtent(extent);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Graticule Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
</div>
|
||||
|
||||
<p id="shortdesc">
|
||||
Adds a Graticule control to the map to display a grid of
|
||||
latitude and longitude.
|
||||
</p>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="map2" class="smallmap"></div>
|
||||
|
||||
<div id="docs"></div>
|
||||
<br style="clear:both" />
|
||||
<ul>
|
||||
<li><a href="#"
|
||||
onclick="graticuleCtl1.activate(); graticuleCtl2.activate(); return false;">Activate graticule controls</a></li>
|
||||
<li><a href="#"
|
||||
onclick="graticuleCtl1.deactivate(); graticuleCtl2.deactivate(); return false;">Deactivate graticule controls</a></li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,36 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenLayers KLM Track Parsing Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../theme/default/google.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<style>
|
||||
.olControlAttribution {
|
||||
bottom: 2px;
|
||||
}
|
||||
</style>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="kml-track.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Parsing gx:Track in KML</h1>
|
||||
<p id="shortdesc">
|
||||
Demonstrates parsing of gx:Track elements from KML.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
<p>
|
||||
If a KML document contains <code><gx:Track></code>
|
||||
elements and the extractTracks property is set true on the
|
||||
parer, features will be created that represent track points.
|
||||
Each feature will have a when attribute that contains the
|
||||
value of the relevant <code><when></code> element from
|
||||
the track.
|
||||
</p>
|
||||
<p>
|
||||
View the <a href="kml-track.js" target="_blank">kml-track.js</a>
|
||||
source to see how this is done.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,40 +0,0 @@
|
||||
var map;
|
||||
|
||||
function init() {
|
||||
|
||||
var mercator = new OpenLayers.Projection("EPSG:900913");
|
||||
var geographic = new OpenLayers.Projection("EPSG:4326");
|
||||
|
||||
map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
projection: mercator,
|
||||
layers: [
|
||||
new OpenLayers.Layer.OSM(),
|
||||
new OpenLayers.Layer.Vector("Aircraft Locations", {
|
||||
projection: geographic,
|
||||
strategies: [new OpenLayers.Strategy.Fixed()],
|
||||
protocol: new OpenLayers.Protocol.HTTP({
|
||||
url: "kml-track.kml",
|
||||
format: new OpenLayers.Format.KML({
|
||||
extractTracks: true,
|
||||
trackAttributes: ["speed"]
|
||||
})
|
||||
}),
|
||||
styleMap: new OpenLayers.StyleMap({
|
||||
"default": new OpenLayers.Style({
|
||||
graphicName: "circle",
|
||||
pointRadius: 2,
|
||||
fillOpacity: 0.5,
|
||||
fillColor: "#ffcc66",
|
||||
strokeColor: "#666633",
|
||||
strokeWidth: 1,
|
||||
})
|
||||
})
|
||||
})
|
||||
],
|
||||
center: new OpenLayers.LonLat(-93.2735, 44.8349).transform(geographic, mercator),
|
||||
zoom: 8
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -44,7 +44,7 @@
|
||||
Demonstrates the use of the LayerSwitcher outside of the OpenLayers window.
|
||||
</p>
|
||||
|
||||
<div id="layerswitcher" class="olControlLayerSwitcher"></div>
|
||||
<div id="layerswitcher"></div>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
<p>This demonstrates use of the LayerSwitcher outside the map div. It also shows use
|
||||
|
||||
@@ -84,7 +84,6 @@
|
||||
|
||||
var options = {
|
||||
isBaseLayer: true,
|
||||
transitionEffect: "resize",
|
||||
buffer: 1,
|
||||
useOverlay: false,
|
||||
useAsyncOverlay: false,
|
||||
@@ -126,7 +125,7 @@
|
||||
layer = new OpenLayers.Layer.MapGuide( "MapGuide OS Overlay layer", url, params, options );
|
||||
map.addLayer(layer);
|
||||
*/
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('layerswitcher')}));
|
||||
map.zoomToMaxExtent();
|
||||
}
|
||||
</script>
|
||||
@@ -145,6 +144,7 @@
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="map2">
|
||||
<div id="layerswitcher"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">MapServer Layer</h1>
|
||||
<div id="title">MapServer Layer</div>
|
||||
<div id="tags"></div>
|
||||
<div id="shortdesc">Shows MapServer Layer</div>
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="title">MapServer Single Tile Mode</h1>
|
||||
<div id="title">MapServer Single Tile Mode</div>
|
||||
<div id="tags"></div>
|
||||
<div id="shortdesc">Shows single tile MapServer Layer</div>
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
@@ -17,11 +17,11 @@
|
||||
var markers = new OpenLayers.Layer.Markers( "Markers" );
|
||||
map.addLayer(markers);
|
||||
|
||||
size = new OpenLayers.Size(21, 25);
|
||||
size = new OpenLayers.Size(50,50);
|
||||
calculateOffset = function(size) {
|
||||
return new OpenLayers.Pixel(-(size.w/2), -size.h); };
|
||||
icon = new OpenLayers.Icon(
|
||||
'http://www.openlayers.org/dev/img/marker.png',
|
||||
'http://boston.openguides.org/markers/AQUA.png',
|
||||
size, null, calculateOffset);
|
||||
markers.addMarker(
|
||||
new OpenLayers.Marker(new OpenLayers.LonLat(-71,40), icon));
|
||||
@@ -39,7 +39,7 @@
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Resize a Marker</h1>
|
||||
<div id="title">Resize a Marker</div>
|
||||
<div id="tags"></div>
|
||||
<div id="shortdesc">Dynamically resize a marker</div>
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
0
examples/marker_shadow.png
Normal file → Executable file
0
examples/marker_shadow.png
Normal file → Executable file
|
Before Width: | Height: | Size: 374 B After Width: | Height: | Size: 374 B |
@@ -22,9 +22,9 @@
|
||||
var markers = new OpenLayers.Layer.Markers( "Markers" );
|
||||
map.addLayer(markers);
|
||||
|
||||
var size = new OpenLayers.Size(21,25);
|
||||
var size = new OpenLayers.Size(10,17);
|
||||
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
|
||||
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);
|
||||
var icon = new OpenLayers.Icon('http://boston.openguides.org/markers/AQUA.png',size,offset);
|
||||
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon));
|
||||
|
||||
var halfIcon = icon.clone();
|
||||
@@ -42,7 +42,7 @@
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Markers Layer Example</h1>
|
||||
<div id="title">Markers Layer Example</div>
|
||||
<div id="tags"></div>
|
||||
<div id="shortdesc">Show markers layer with different markers</div>
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
@@ -16,15 +16,11 @@
|
||||
#output {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* avoid pink tiles */
|
||||
.olImageLoadError {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map, measureControls;
|
||||
OpenLayers.Util.onImageLoadErrorColor = "transparent";
|
||||
function init(){
|
||||
map = new OpenLayers.Map('map');
|
||||
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">MousePosition Control</h1>
|
||||
<h3 id="title">MousePosition Control</h3>
|
||||
<p id="shortdesc">
|
||||
Use the MousePosition Control to display the coordinates of the cursor
|
||||
inside or outside the map div.
|
||||
|
||||
@@ -1,57 +0,0 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>OpenLayers Mousewheel Interval Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map, layer;
|
||||
|
||||
function setCumulative() {
|
||||
var nav = map.getControlsByClass("OpenLayers.Control.Navigation")[0];
|
||||
var cumulative = document.getElementById("cumulative");
|
||||
nav.handlers.wheel.cumulative = cumulative.checked;
|
||||
}
|
||||
|
||||
function init(){
|
||||
map = new OpenLayers.Map( 'map', {controls: [
|
||||
new OpenLayers.Control.Navigation(
|
||||
{mouseWheelOptions: {interval: 100}}
|
||||
),
|
||||
new OpenLayers.Control.PanZoom(),
|
||||
new OpenLayers.Control.ArgParser(),
|
||||
new OpenLayers.Control.Attribution()
|
||||
]} );
|
||||
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
|
||||
"http://labs.metacarta.com/wms/vmap0",
|
||||
{layers: 'basic'} );
|
||||
map.addLayer(layer);
|
||||
map.zoomToMaxExtent();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">OpenLayers Mousewheel Interval Example</h1>
|
||||
|
||||
<div id="tags"></div>
|
||||
|
||||
<div id="shortdesc">Let OpenLayers send less tile requests to the server when wheel-zooming.</div>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
<div id="docs">
|
||||
<p>This example shows how to configure the Navigation control to use
|
||||
the mousewheel in a less server resource consuming way: as long as you
|
||||
spin the mousewheel, no request will be sent to the server. Instead,
|
||||
the zoomlevel delta will be recorded. After a delay (in this example
|
||||
100ms), a zoom action with the cumulated delta will be performed.</p>
|
||||
<div>
|
||||
<input id="cumulative" type="checkbox" checked="checked"
|
||||
onchange="setCumulative()"/>
|
||||
<label for="cumulative">Cumulative mode. If this mode is deactivated,
|
||||
only one zoom event will be performed after the delay.</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -12,8 +12,7 @@
|
||||
</style>
|
||||
|
||||
|
||||
<!-- multimap api key for http://(www.)openlayers.org -->
|
||||
<script type="text/javascript" src="http://developer.multimap.com/API/maps/1.2/OA10072915821139765"></script>
|
||||
<script type="text/javascript" src="http://clients.multimap.com/API/maps/1.1/metacarta_04"></script>
|
||||
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
@@ -35,9 +34,11 @@
|
||||
{'sphericalMercator': true}
|
||||
);
|
||||
merc = new OpenLayers.Layer.WMS("World Map",
|
||||
"http://maps.opengeo.org/geowebcache/service/wms",
|
||||
{'layers': 'bluemarble'},
|
||||
{'opacity': 0.4,
|
||||
"http://world.freemap.in/tiles/",
|
||||
{'layers': 'factbook-overlay',
|
||||
'format':'png'},
|
||||
{'reproject': false,
|
||||
'opacity': 0.4,
|
||||
'isBaseLayer': false,
|
||||
'wrapDateLine': true});
|
||||
|
||||
@@ -53,7 +54,7 @@
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">MultiMap Mercator Example</h1>
|
||||
<h3 id="title">MultiMap Mercator Example</h3>
|
||||
<p id="shortdesc">
|
||||
This sphericalMercator example using multimap demonstrates that the
|
||||
multimap layer does not fully support the sphericalMercator projection at
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
function runMVS() {
|
||||
OpenLayers.ProxyHost = '/proxy/?url=';
|
||||
if (document.location.protocol != "file:") {
|
||||
theArgs = OpenLayers.Util.getParameters();
|
||||
theArgs = OpenLayers.Util.getArgs();
|
||||
} else {
|
||||
theArgs = {};
|
||||
theArgs.center = "0,0";
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">NavToolbar Demo</h1>
|
||||
<h3 id="title">NavToolbar Demo</h3>
|
||||
<p id="shortdesc">
|
||||
Demo the NavToolbar, a subclass of Control.Panel which shows icons for
|
||||
navigation.
|
||||
|
||||
155
examples/openmnnd.html
Normal file
155
examples/openmnnd.html
Normal file
@@ -0,0 +1,155 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>OpenLayers: OpenMNND</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map, layer;
|
||||
|
||||
function init(){
|
||||
OpenLayers.ProxyHost="/proxy/?url=";
|
||||
map = new OpenLayers.Map('map', {'maxResolution':'auto', maxExtent: new OpenLayers.Bounds(-203349.72008129774,4816309.33,1154786.8041952979,5472346.5), projection: 'EPSG:26915' } );
|
||||
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
|
||||
["http://geoint.lmic.state.mn.us/cgi-bin/wms"], {layers: 'fsa'} );
|
||||
map.addLayer(layer);
|
||||
|
||||
|
||||
wfs_url = "http://prototype.openmnnd.org/cgi-bin/mapserv.exe?map=openmnndwfs/openmnndwfs.map";
|
||||
wms = new OpenLayers.Layer.WMS("Minnesota Parcels (WMS)", wfs_url, {'layers':'streams', 'transparent': true, 'format':'image/gif'});
|
||||
|
||||
map.addLayer(wms);
|
||||
|
||||
wfs = new OpenLayers.Layer.WFS("Minnesota Streams (WFS)", wfs_url, {'typename':'streams'}, {ratio:1.25, minZoomLevel:4, style: OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default'])});
|
||||
|
||||
// preFeatureInsert can be used to set style before the feature is drawn
|
||||
wfs.preFeatureInsert= function(feature) { feature.style.strokeWidth="3"; feature.style.strokeColor="blue";
|
||||
}
|
||||
wfs.onFeatureInsert = function(feature) {
|
||||
OpenLayers.Util.getElement('stream_features').innerHTML = feature.layer.features.length;
|
||||
}
|
||||
map.addLayer(wfs);
|
||||
|
||||
// Or a style can be set on the layer.
|
||||
pwfsstyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
|
||||
OpenLayers.Util.extend(pwfsstyle, {'fillColor': 'green'});
|
||||
|
||||
pwfs = new OpenLayers.Layer.WFS("Minnesota Plat (WFS)", wfs_url,
|
||||
{'typename':'plat'},
|
||||
{
|
||||
ratio:1.25,
|
||||
minZoomLevel:8,
|
||||
extractAttributes: true,
|
||||
style: pwfsstyle
|
||||
});
|
||||
|
||||
pwfs.onFeatureInsert= function(feature) {
|
||||
OpenLayers.Util.getElement('plat_features').innerHTML = feature.layer.features.length;
|
||||
}
|
||||
map.addLayer(pwfs);
|
||||
|
||||
rstyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
|
||||
OpenLayers.Util.extend(rstyle, {'strokeColor': 'white', strokeWidth: "4"});
|
||||
rwfs = new OpenLayers.Layer.WFS("Minnesota Roads (WFS)", wfs_url, {'typename':'roads'},
|
||||
{ratio:1.25, minZoomLevel:7, extractAttributes: true, style:rstyle});
|
||||
|
||||
rwfs.onFeatureInsert= function(feature) {
|
||||
OpenLayers.Util.getElement('road_features').innerHTML = feature.layer.features.length;
|
||||
}
|
||||
|
||||
map.addLayer(rwfs);
|
||||
|
||||
map.events.register('moveend', null, function() {
|
||||
OpenLayers.Util.getElement('stream_features').innerHTML = "0";
|
||||
OpenLayers.Util.getElement('road_features').innerHTML = "0";
|
||||
OpenLayers.Util.getElement('plat_features').innerHTML = "0";
|
||||
});
|
||||
|
||||
var ls = new OpenLayers.Control.LayerSwitcher();
|
||||
map.addControl(ls);
|
||||
|
||||
drawControls = {
|
||||
selectPlat: new OpenLayers.Control.SelectFeature(pwfs, {callbacks: {'up':feature_info,'over':feature_info_hover}}),
|
||||
selectRoad: new OpenLayers.Control.SelectFeature(rwfs, {callbacks: {'up':feature_info,'over':feature_info_hover}})
|
||||
};
|
||||
|
||||
for(var key in drawControls) {
|
||||
map.addControl(drawControls[key]);
|
||||
}
|
||||
drawControls.selectPlat.activate();
|
||||
|
||||
map.zoomToExtent(new OpenLayers.Bounds(303232.550864,5082911.694856,305885.161263,5084486.682281));
|
||||
}
|
||||
|
||||
function toggleControl(element) {
|
||||
for(key in drawControls) {
|
||||
var control = drawControls[key];
|
||||
if(element.value == key && element.checked) {
|
||||
control.activate();
|
||||
} else {
|
||||
control.deactivate();
|
||||
}
|
||||
}
|
||||
}
|
||||
var displayedFeature = null;
|
||||
function feature_info_hover(feature) {
|
||||
if (displayedFeature != feature &&
|
||||
(!feature.layer.selectedFeatures.length ||
|
||||
(feature.layer.selectedFeatures[0] == feature))) {
|
||||
feature_info(feature);
|
||||
displayedFeature = feature;
|
||||
}
|
||||
}
|
||||
function feature_info(feature) {
|
||||
var html = "<ul>";
|
||||
for(var i in feature.attributes)
|
||||
html += "<li><b>" + i + "</b>: "+ feature.attributes[i] + "</li>";
|
||||
html += "</ul>";
|
||||
OpenLayers.Util.getElement('feature_info').innerHTML = html;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">OpenMNND WFS</h1>
|
||||
<p id="shortdesc">This example shows the use of a WFS service rendered using the OpenLayers vector library.</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
<p>
|
||||
This is an example that shows rendering a WFS service using OpenLayer vectors in the browser. The OpenLayers code will download the GML
|
||||
from the WFS service for each layer, parse it and create features using the OL vector library to draw the features on the map. For
|
||||
more information on the vector library, please visit <a href="http://trac.openlayers.org/wiki/Documentation/VectorSupport">vector support wiki</a>.
|
||||
In this example there are 4 layers shown on the map. The base layer and parcel layer are created from a WMS service using the OpenLayers.Layer.WMS object.
|
||||
The streams, roads, and plat layers are drawn from a WFS service using the OpenLayers.Layer.WFS object.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Rendering WFS layers into vectors is possible, but you need to be cautions when showing the features on the map. Testing has shown that when
|
||||
you renderer more than 200 vectors in the browser the performance decreases dramatically. Also features that have a lot of vertices
|
||||
can cause performance issues. In this example the parcel layer is rendered as a WMS layer because at the time of developing this example
|
||||
there where a handful of features that had too many vertices to render without killing the browser resources.
|
||||
|
||||
There are a number of properties that can be set for each WFS layer, such color and line weight using style properties such as strokeColor and strokeWidth.
|
||||
You can also get feature attributes from the WFS services using the extractAttribute property. View the source to see the example code.
|
||||
</p>
|
||||
</div>
|
||||
<div id="info">
|
||||
<ul>
|
||||
<li>Streams: Feature Count <span id="stream_features">0</span></li>
|
||||
<li>Plat: Feature Count <span id="plat_features">0</span></li>
|
||||
<li>Roads: Feature Count <span id="road_features">0</span></li>
|
||||
</ul>
|
||||
<div id="feature_info">
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<input type="radio" name="type" value="selectRoad" id="selectToggle" onclick="toggleControl(this);" />
|
||||
<label for="selectToggle">select road</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="type" value="selectPlat" id="selectToggle" onclick="toggleControl(this);" checked=checked />
|
||||
<label for="selectToggle">select polygon</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,27 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenLayers OSM and Google Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../theme/default/google.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="osm-google.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">OSM and Google Together</h1>
|
||||
<p id="shortdesc">
|
||||
Demonstrate use of an OSM layer and a Google layer as base layers.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
<p>
|
||||
The Google(v3) layer and the OSM are both in the same projection
|
||||
- spherical mercator - and can be used on a map together.
|
||||
See the <a href="osm-google.js" target="_blank">
|
||||
osm-google.js source</a> to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,28 +0,0 @@
|
||||
var map;
|
||||
|
||||
function init() {
|
||||
map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
projection: new OpenLayers.Projection("EPSG:900913"),
|
||||
units: "m",
|
||||
maxResolution: 156543.0339,
|
||||
maxExtent: new OpenLayers.Bounds(
|
||||
-20037508, -20037508, 20037508, 20037508.34
|
||||
)
|
||||
});
|
||||
|
||||
var osm = new OpenLayers.Layer.OSM();
|
||||
var gmap = new OpenLayers.Layer.Google("Google Streets");
|
||||
|
||||
map.addLayers([osm, gmap]);
|
||||
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
|
||||
map.setCenter(
|
||||
new OpenLayers.LonLat(10.2, 48.9).transform(
|
||||
new OpenLayers.Projection("EPSG:4326"),
|
||||
map.getProjectionObject()
|
||||
),
|
||||
5
|
||||
);
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>OpenLayers Basic Single WMS Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map, layer;
|
||||
function init(){
|
||||
map = new OpenLayers.Map( 'map');
|
||||
layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
|
||||
map.addLayer(layer);
|
||||
map.setCenter(
|
||||
new OpenLayers.LonLat(-71.147, 42.472).transform(
|
||||
new OpenLayers.Projection("EPSG:4326"),
|
||||
map.getProjectionObject()
|
||||
), 12
|
||||
);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Basic OSM Example</h1>
|
||||
|
||||
<div id="tags"></div>
|
||||
|
||||
<div id="shortdesc">Show a Simple OSM Map</div>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
<div id="docs">
|
||||
This example shows a very simple OSM layout with minimal controls.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -50,7 +50,7 @@
|
||||
|
||||
|
||||
<body onload="init()">
|
||||
<h1 id="title">Using maxResolution to control overlays</h1>
|
||||
<h3 id="title">Using maxResolution to control overlays</h3>
|
||||
<p id="shortdesc">
|
||||
See how to control the maximum resolution for a markers layer,
|
||||
causing it to not be displayed beyond a certain point.
|
||||
|
||||
@@ -32,13 +32,13 @@
|
||||
<div id="map2"></div>
|
||||
<p>The second map has an overview map control that is created with
|
||||
non-default options. In this case, the mapOptions property of the
|
||||
control has been set to use non-default projection related properties,
|
||||
and the layers property has been set to use a layer different from the main
|
||||
map. In addition, any other properties of the overview map control can be
|
||||
control has been set to use non-default projection related properties.
|
||||
In addition, any other properties of the overview map control can be
|
||||
set in this way.</p>
|
||||
<script defer="defer" type="text/javascript">
|
||||
|
||||
// set up some layers
|
||||
// create the top map (with default overview map control)
|
||||
var map1 = new OpenLayers.Map('map1');
|
||||
|
||||
var ol = new OpenLayers.Layer.WMS(
|
||||
"OpenLayers WMS",
|
||||
@@ -52,64 +52,54 @@
|
||||
{layers: "landsat7"}
|
||||
);
|
||||
|
||||
// A clone of the above layer that we will use as overview for map2.
|
||||
// We need to clone jpl before the it gets added to a map, so the
|
||||
// clone can have its own maxExtent and maxResolution instead of
|
||||
// getting these settings initialized from map1.
|
||||
var jplOverview = jpl.clone();
|
||||
|
||||
// A more detailled layer of Manhattan for map2
|
||||
var ny = new OpenLayers.Layer.WMS(
|
||||
"Manhattan",
|
||||
"http://demo.opengeo.org/geoserver/wms",
|
||||
{
|
||||
layers: 'tiger-ny',
|
||||
format: 'image/png'
|
||||
}
|
||||
);
|
||||
|
||||
// create the top map (with default overview map control)
|
||||
var map1 = new OpenLayers.Map('map1');
|
||||
|
||||
map1.addLayers([ol, jpl]);
|
||||
map1.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
|
||||
// create an overview map control with the default options
|
||||
var overview1 = new OpenLayers.Control.OverviewMap({
|
||||
maximized: true
|
||||
});
|
||||
var overview1 = new OpenLayers.Control.OverviewMap();
|
||||
map1.addControl(overview1);
|
||||
|
||||
map1.setCenter(new OpenLayers.LonLat(0, 0), 2);
|
||||
|
||||
// expand the overview map control
|
||||
overview1.maximizeControl();
|
||||
|
||||
|
||||
// create the bottom map (with advanced overview map control)
|
||||
var mapOptions = {
|
||||
maxExtent: new OpenLayers.Bounds(-8242894.927728, 4965204.031195,
|
||||
-8227290.161511, 4994963.723637),
|
||||
maxResolution: 116.24879860156216,
|
||||
projection: "EPSG:900913",
|
||||
maxExtent: new OpenLayers.Bounds(33861, 717605, 330846, 1019656),
|
||||
maxResolution: 296985/1024,
|
||||
projection: "EPSG:2805",
|
||||
units: "m"
|
||||
};
|
||||
|
||||
var map2 = new OpenLayers.Map('map2', mapOptions);
|
||||
|
||||
map2.addLayers([ny]);
|
||||
var bos = new OpenLayers.Layer.WMS(
|
||||
"Boston",
|
||||
"http://boston.freemap.in/cgi-bin/mapserv",
|
||||
{
|
||||
map: '/www/freemap.in/boston/map/gmaps.map',
|
||||
layers: 'border,water,roads,rapid_transit,buildings',
|
||||
format: 'png'
|
||||
}
|
||||
);
|
||||
|
||||
map2.addLayers([bos]);
|
||||
map2.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
|
||||
// create an overview map control with non-default options
|
||||
var controlOptions = {
|
||||
maximized: true,
|
||||
mapOptions: OpenLayers.Util.extend(mapOptions, {
|
||||
maxResolution: 156543.0339,
|
||||
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
|
||||
20037508.34, 20037508.34)
|
||||
}),
|
||||
layers: [jplOverview]
|
||||
mapOptions: mapOptions
|
||||
}
|
||||
var overview2 = new OpenLayers.Control.OverviewMap(controlOptions);
|
||||
map2.addControl(overview2);
|
||||
|
||||
map2.setCenter(new OpenLayers.LonLat(-8233165.3575055, 4980298.21113769), 3);
|
||||
map2.setCenter(new OpenLayers.LonLat(182500, 868500), 3);
|
||||
|
||||
// expand the overview map control
|
||||
overview2.maximizeControl();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -40,41 +40,6 @@
|
||||
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
|
||||
}
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.olControlPanPanel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.olControlPanPanel .olControlPanNorthItemInactive {
|
||||
left: 50%;
|
||||
margin-left: -9px;
|
||||
top: 0;
|
||||
}
|
||||
.olControlPanPanel .olControlPanSouthItemInactive {
|
||||
left: 50%;
|
||||
margin-left: -9px;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
.olControlPanPanel .olControlPanWestItemInactive {
|
||||
top: 50%;
|
||||
margin-top: -9px;
|
||||
left: 0;
|
||||
}
|
||||
.olControlPanPanel .olControlPanEastItemInactive {
|
||||
top: 50%;
|
||||
margin-top: -9px;
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.olControlZoomPanel {
|
||||
left: auto;
|
||||
right: 23px;
|
||||
top: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body onload='init();'>
|
||||
<h1 id="title">Pan and Zoom Panels</h1>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 5px;
|
||||
background-color:white;
|
||||
background-color:red;
|
||||
}
|
||||
|
||||
.olControlPanel .olControlMouseDefaultsItemActive {
|
||||
@@ -78,12 +78,6 @@
|
||||
{title:'Draw a feature'}),
|
||||
new OpenLayers.Control.ZoomToMaxExtent({title:"Zoom to the max extent"})
|
||||
]);
|
||||
|
||||
nav = new OpenLayers.Control.NavigationHistory();
|
||||
// parent control must be added to the map
|
||||
map.addControl(nav);
|
||||
panel.addControls([nav.next, nav.previous]);
|
||||
|
||||
map.addControl(panel);
|
||||
|
||||
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
|
||||
@@ -91,7 +85,7 @@
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Custom Control.Panel</h1>
|
||||
<h3 id="title">Custom Control.Panel</h3>
|
||||
<p id="shortdesc">
|
||||
Create a custom control.panel, styled entirely with
|
||||
CSS, and add your own controls to it.
|
||||
|
||||
0
examples/popupMatrix.jpg
Normal file → Executable file
0
examples/popupMatrix.jpg
Normal file → Executable file
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 45 KiB |
@@ -19,8 +19,7 @@ allowedHosts = ['www.openlayers.org', 'openlayers.org',
|
||||
'labs.metacarta.com', 'world.freemap.in',
|
||||
'prototype.openmnnd.org', 'geo.openplans.org',
|
||||
'sigma.openplans.org', 'demo.opengeo.org',
|
||||
'www.openstreetmap.org', 'sample.azavea.com',
|
||||
'v-swe.uni-muenster.de:8080']
|
||||
'www.openstreetmap.org', 'sample.avencia.com']
|
||||
|
||||
method = os.environ["REQUEST_METHOD"]
|
||||
|
||||
|
||||
@@ -28,15 +28,11 @@
|
||||
margin-left: 15em;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* avoid pink tiles */
|
||||
.olImageLoadError {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map, polygonControl;
|
||||
OpenLayers.Util.onImageLoadErrorColor = "transparent";
|
||||
function init(){
|
||||
map = new OpenLayers.Map('map');
|
||||
|
||||
@@ -72,7 +68,7 @@
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">OpenLayers Regular Polygon Example</h1>
|
||||
<h2 id="title">OpenLayers Regular Polygon Example</h2>
|
||||
<p id="shortdesc">
|
||||
Shows how to use the RegularPolygon handler to draw features with
|
||||
different numbers of sides.
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Resize Features Programatically</h1>
|
||||
<h3 id="title">Resize Features Programatically</h3>
|
||||
<p id="shortdesc">
|
||||
Demonstration of how to use the geometry resize methods to
|
||||
change feature sizes programatically.
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">OpenLayers Restricted Extent Example</h1>
|
||||
<h3 id="title">OpenLayers Restricted Extent Example</h3>
|
||||
<p id="shortdesc">
|
||||
Don't let users drag outside the map extent: instead, limit dragging such
|
||||
that the extent of the layer is the maximum viewable area.
|
||||
|
||||
@@ -21,15 +21,6 @@
|
||||
);
|
||||
|
||||
var vectors = new OpenLayers.Layer.Vector("Vector Layer");
|
||||
vectors.events.on({
|
||||
'featureselected': function(feature) {
|
||||
$('counter').innerHTML = this.selectedFeatures.length;
|
||||
},
|
||||
'featureunselected': function(feature) {
|
||||
$('counter').innerHTML = this.selectedFeatures.length;
|
||||
},
|
||||
});
|
||||
|
||||
map.addLayers([wmsLayer, vectors]);
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
|
||||
@@ -83,17 +74,11 @@
|
||||
|
||||
function update() {
|
||||
var clickout = document.getElementById("clickout").checked;
|
||||
if(clickout != drawControls.select.clickout) {
|
||||
drawControls.select.clickout = clickout;
|
||||
}
|
||||
|
||||
var box = document.getElementById("box").checked;
|
||||
if(box != drawControls.select.box) {
|
||||
drawControls.select.box = box;
|
||||
if(drawControls.select.active) {
|
||||
drawControls.select.deactivate();
|
||||
drawControls.select.activate();
|
||||
}
|
||||
drawControls.select.clickout = clickout;
|
||||
drawControls.select.box = document.getElementById("box").checked;
|
||||
if(drawControls.select.active) {
|
||||
drawControls.select.deactivate();
|
||||
drawControls.select.activate();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -134,7 +119,7 @@
|
||||
<li>
|
||||
<input type="radio" name="type" value="select" id="selectToggle"
|
||||
onclick="toggleControl(this);" />
|
||||
<label for="selectToggle">select feature (<span id="counter">0</span> features selected)</label>
|
||||
<label for="selectToggle">select feature</label>
|
||||
<ul>
|
||||
<li>
|
||||
<input id="box" type="checkbox" checked="checked"
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenLayers SLD Parser</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<style>
|
||||
#input {
|
||||
width: 90%;
|
||||
height: 300px;
|
||||
}
|
||||
#output {
|
||||
width: 90%;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="title">SLD Parser</h1>
|
||||
|
||||
<div id="shortdesc">Parsing Styled Layer Descriptor (SLD) documents with the SLD format.</div>
|
||||
|
||||
<textarea id="input">paste SLD here</textarea><br>
|
||||
<input type="checkbox" id="symbolizers" checked="checked"><label for="symbolizers">Maintain multiple symbolizers and FeatureTypeStyle elements</label><br>
|
||||
<input type="checkbox" id="array"><label for="array">Compile an array of named styles instead of an object.</label><br>
|
||||
<input type="button" id="button" value="Parse SLD">
|
||||
|
||||
<div id="docs">
|
||||
This example uses the SLD format to parse SLD documents pasted into the textarea above.
|
||||
A rough representation of the parsed style is shown in the textarea below.
|
||||
</div>
|
||||
|
||||
<textarea id="output"></textarea>
|
||||
|
||||
<script>
|
||||
|
||||
var button = document.getElementById("button");
|
||||
var input = document.getElementById("input");
|
||||
var output = document.getElementById("output");
|
||||
var symbolizers = document.getElementById("symbolizers");
|
||||
var array = document.getElementById("array");
|
||||
|
||||
var json = new OpenLayers.Format.JSON();
|
||||
|
||||
var format, obj;
|
||||
|
||||
button.onclick = function() {
|
||||
var str = input.value;
|
||||
format = new OpenLayers.Format.SLD({
|
||||
multipleSymbolizers: !!symbolizers.checked,
|
||||
namedLayersAsArray: !!array.checked
|
||||
});
|
||||
obj = format.read(str);
|
||||
try {
|
||||
output.value = json.write(obj, true);
|
||||
} catch (err) {
|
||||
output.value = "Trouble: " + err;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
0
examples/small.jpg
Normal file → Executable file
0
examples/small.jpg
Normal file → Executable file
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
@@ -1,179 +0,0 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<style type="text/css">
|
||||
.sosmap {
|
||||
width: 768px;
|
||||
height: 512px;
|
||||
}
|
||||
</style>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map;
|
||||
|
||||
OpenLayers.ProxyHost = "proxy.cgi?url=";
|
||||
OpenLayers.Util.extend(OpenLayers.Lang.en,
|
||||
{
|
||||
'SOSClientType': "Type",
|
||||
'SOSClientTime': "Date/time",
|
||||
'SOSClientLastvalue': "Last value"
|
||||
}
|
||||
);
|
||||
|
||||
// Example class on how to put all the OpenLayers SOS pieces together
|
||||
OpenLayers.SOSClient = OpenLayers.Class({
|
||||
url: null,
|
||||
map: null,
|
||||
capsformat: new OpenLayers.Format.SOSCapabilities(),
|
||||
obsformat: new OpenLayers.Format.SOSGetObservation(),
|
||||
initialize: function (options) {
|
||||
OpenLayers.Util.extend(this, options);
|
||||
var params = {'service': 'SOS', 'request': 'GetCapabilities'};
|
||||
var paramString = OpenLayers.Util.getParameterString(params);
|
||||
url = OpenLayers.Util.urlAppend(this.url, paramString);
|
||||
OpenLayers.Request.GET({url: url,
|
||||
success: this.parseSOSCaps, scope: this});
|
||||
},
|
||||
getFois: function() {
|
||||
var result = [];
|
||||
this.offeringCount = 0;
|
||||
for (var name in this.SOSCapabilities.contents.offeringList) {
|
||||
var offering = this.SOSCapabilities.contents.offeringList[name];
|
||||
this.offeringCount++;
|
||||
for (var i=0, len=offering.featureOfInterestIds.length; i<len; i++) {
|
||||
var foi = offering.featureOfInterestIds[i];
|
||||
if (OpenLayers.Util.indexOf(result, foi) === -1) {
|
||||
result.push(foi);
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
parseSOSCaps: function(response) {
|
||||
// cache capabilities for future use
|
||||
this.SOSCapabilities = this.capsformat.read(response.responseXML || response.responseText);
|
||||
this.layer = new OpenLayers.Layer.Vector("Stations", {
|
||||
strategies: [new OpenLayers.Strategy.Fixed()],
|
||||
protocol: new OpenLayers.Protocol.SOS({
|
||||
formatOptions: {internalProjection: map.getProjectionObject()},
|
||||
url: this.url,
|
||||
fois: this.getFois()
|
||||
})
|
||||
});
|
||||
this.map.addLayer(this.layer);
|
||||
this.ctrl = new OpenLayers.Control.SelectFeature(this.layer,
|
||||
{scope: this, onSelect: this.onFeatureSelect});
|
||||
this.map.addControl(this.ctrl);
|
||||
this.ctrl.activate();
|
||||
},
|
||||
getTitleForObservedProperty: function(property) {
|
||||
for (var name in this.SOSCapabilities.contents.offeringList) {
|
||||
var offering = this.SOSCapabilities.contents.offeringList[name];
|
||||
if (offering.observedProperties[0] === property) {
|
||||
return offering.name;
|
||||
}
|
||||
}
|
||||
},
|
||||
showPopup: function(response) {
|
||||
this.count++;
|
||||
var output = this.obsformat.read(response.responseXML || response.responseText);
|
||||
this.html += '<tr>';
|
||||
this.html += '<td width="100">'+this.getTitleForObservedProperty(output.measurements[0].observedProperty)+'</td>';
|
||||
this.html += '<td>'+output.measurements[0].samplingTime.timeInstant.timePosition+'</td>';
|
||||
this.html += '<td>'+output.measurements[0].result.value + ' ' + output.measurements[0].result.uom + '</td>';
|
||||
this.html += '</tr>';
|
||||
// check if we are done
|
||||
if (this.count === this.numRequests) {
|
||||
var html = '<table cellspacing="10"><tbody>';
|
||||
html += '<tr>';
|
||||
html += '<th><b>'+OpenLayers.i18n('SOSClientType')+'</b></th>';
|
||||
html += '<th><b>'+OpenLayers.i18n('SOSClientTime')+'</b></th>';
|
||||
html += '<th><b>'+OpenLayers.i18n('SOSClientLastvalue')+'</b></th>';
|
||||
html += '</tr>';
|
||||
html += this.html;
|
||||
html += '</tbody></table>';
|
||||
var popup = new OpenLayers.Popup.FramedCloud("sensor",
|
||||
this.feature.geometry.getBounds().getCenterLonLat(),
|
||||
null,
|
||||
html,
|
||||
null,
|
||||
true,
|
||||
function(e) {
|
||||
this.hide();
|
||||
OpenLayers.Event.stop(e);
|
||||
// unselect so popup can be shown again
|
||||
this.map.getControlsByClass('OpenLayers.Control.SelectFeature')[0].unselectAll();
|
||||
}
|
||||
);
|
||||
this.feature.popup = popup;
|
||||
this.map.addPopup(popup);
|
||||
}
|
||||
},
|
||||
onFeatureSelect: function(feature) {
|
||||
this.feature = feature;
|
||||
this.count = 0;
|
||||
this.html = '';
|
||||
this.numRequests = this.offeringCount;
|
||||
if (!this.responseFormat) {
|
||||
for (format in this.SOSCapabilities.operationsMetadata.GetObservation.parameters.responseFormat.allowedValues) {
|
||||
// look for a text/xml type of format
|
||||
if (format.indexOf('text/xml') >= 0) {
|
||||
this.responseFormat = format;
|
||||
}
|
||||
}
|
||||
}
|
||||
// do a GetObservation request to get the latest values
|
||||
for (var name in this.SOSCapabilities.contents.offeringList) {
|
||||
var offering = this.SOSCapabilities.contents.offeringList[name];
|
||||
var xml = this.obsformat.write({
|
||||
eventTime: 'latest',
|
||||
resultModel: 'measurement',
|
||||
responseMode: 'inline',
|
||||
procedure: feature.attributes.id,
|
||||
offering: name,
|
||||
observedProperty: offering.observedProperties[0],
|
||||
responseFormat: this.responseFormat
|
||||
});
|
||||
OpenLayers.Request.POST({
|
||||
url: this.url,
|
||||
scope: this,
|
||||
success: this.showPopup,
|
||||
data: xml
|
||||
});
|
||||
}
|
||||
},
|
||||
destroy: function () {
|
||||
},
|
||||
CLASS_NAME: "OpenLayers.SOSClient"
|
||||
});
|
||||
|
||||
function init(){
|
||||
map = new OpenLayers.Map( 'map' );
|
||||
var baseLayer = new OpenLayers.Layer.WMS("Test Layer", "http://labs.metacarta.com/wms/vmap0?", {
|
||||
layers: "basic"}, {singleTile: true});
|
||||
|
||||
var sos = new OpenLayers.SOSClient({map: map, url: 'http://v-swe.uni-muenster.de:8080/WeatherSOS/sos?'});
|
||||
|
||||
map.addLayers([baseLayer]);
|
||||
map.setCenter(new OpenLayers.LonLat(5, 45), 4);
|
||||
map.addControl( new OpenLayers.Control.LayerSwitcher() );
|
||||
map.addControl( new OpenLayers.Control.MousePosition() );
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">SOS client example</h1>
|
||||
|
||||
<div id="tags">
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
Shows how to connect OpenLayers to a Sensor Observation Service (SOS)
|
||||
</p>
|
||||
<div id="map" class="sosmap"></div>
|
||||
<div id="docs">
|
||||
<p>This example uses a vector layer with a Protocol.SOS and a fixed Strategy.
|
||||
</p><p>When clicking on a point feature (the weather stations offered by the SOS), the
|
||||
latest values for all offerings are displayed in a popup.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -8,11 +8,6 @@
|
||||
#map {
|
||||
height: 512px;
|
||||
}
|
||||
|
||||
/* avoid pink tiles */
|
||||
.olImageLoadError {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script>
|
||||
@@ -25,8 +20,9 @@
|
||||
// make map available for easy debugging
|
||||
var map;
|
||||
|
||||
// increase reload attempts
|
||||
// avoid pink tiles
|
||||
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
|
||||
OpenLayers.Util.onImageLoadErrorColor = "transparent";
|
||||
|
||||
function init(){
|
||||
var options = {
|
||||
@@ -106,7 +102,7 @@
|
||||
"http://world.freemap.in/tiles/",
|
||||
{'layers': 'factbook-overlay', 'format':'png'},
|
||||
{
|
||||
'opacity': 0.4, visibility: false,
|
||||
'opacity': 0.4,
|
||||
'isBaseLayer': false,'wrapDateLine': true
|
||||
}
|
||||
);
|
||||
|
||||
@@ -4,15 +4,10 @@
|
||||
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<style>
|
||||
/* avoid pink tiles */
|
||||
.olImageLoadError {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map, vectors, split;
|
||||
OpenLayers.Util.onImageLoadErrorColor = "transparent";
|
||||
function init(){
|
||||
map = new OpenLayers.Map('map');
|
||||
|
||||
|
||||
@@ -1,43 +0,0 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>OpenLayers Rule Based Style</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="style-rules.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Rule Based Style</h1>
|
||||
|
||||
<p id="shortdesc">
|
||||
Use rule based styling to use different symbolizers for different
|
||||
feature groups.
|
||||
</p>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
<div id="docs">
|
||||
<p>
|
||||
This example uses four rules to render features. Rules are
|
||||
based on a feature attribute and determine which symbolizer
|
||||
is applied when rendering a feature. The rules in this example
|
||||
change which marker is used by providing an externalGraphic
|
||||
property in the symbolizer.
|
||||
</p>
|
||||
The features are labeled with the same attribute that determines
|
||||
the symbolizer used. You should be able to confirm that the
|
||||
graphic color corresponds to the range of numbers given below.
|
||||
</p>
|
||||
<ul>
|
||||
<li>0 <= blue < 25
|
||||
<li>25 <= green < 50
|
||||
<li>50 <= gold <= 75
|
||||
<li>75 < red <= 100
|
||||
</ul>
|
||||
<p>
|
||||
See the <a href="style-rules.js" target="_blank">
|
||||
style-rules.js source</a> to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,99 +0,0 @@
|
||||
var map;
|
||||
|
||||
function init() {
|
||||
map = new OpenLayers.Map("map");
|
||||
|
||||
var wms = new OpenLayers.Layer.WMS(
|
||||
"OpenLayers WMS",
|
||||
"http://labs.metacarta.com/wms/vmap0",
|
||||
{layers: "basic"}
|
||||
);
|
||||
|
||||
/**
|
||||
* Create 50 vector features. Your features would typically be fetched
|
||||
* from the server. These are created here to demonstrate a rule based
|
||||
* style. The features are given an attribute named "foo". The value
|
||||
* of this attribute is an integer that ranges from 0 to 100.
|
||||
*/
|
||||
var features = new Array(25);
|
||||
for (var i=0; i<features.length; i++) {
|
||||
features[i] = new OpenLayers.Feature.Vector(
|
||||
new OpenLayers.Geometry.Point(
|
||||
(340 * Math.random()) - 170,
|
||||
(160 * Math.random()) - 80
|
||||
), {
|
||||
foo: 100 * Math.random() | 0
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Here we create a new style object with rules that determine
|
||||
* which symbolizer will be used to render each feature.
|
||||
*/
|
||||
var style = new OpenLayers.Style(
|
||||
// the first argument is a base symbolizer
|
||||
// all other symbolizers in rules will extend this one
|
||||
{
|
||||
graphicWidth: 21,
|
||||
graphicHeight: 25,
|
||||
graphicYOffset: -28, // shift graphic up 28 pixels
|
||||
label: "${foo}" // label will be foo attribute value
|
||||
},
|
||||
// the second argument will include all rules
|
||||
{
|
||||
rules: [
|
||||
new OpenLayers.Rule({
|
||||
// a rule contains an optional filter
|
||||
filter: new OpenLayers.Filter.Comparison({
|
||||
type: OpenLayers.Filter.Comparison.LESS_THAN,
|
||||
property: "foo", // the "foo" feature attribute
|
||||
value: 25
|
||||
}),
|
||||
// if a feature matches the above filter, use this symbolizer
|
||||
symbolizer: {
|
||||
externalGraphic: "../img/marker-blue.png"
|
||||
}
|
||||
}),
|
||||
new OpenLayers.Rule({
|
||||
filter: new OpenLayers.Filter.Comparison({
|
||||
type: OpenLayers.Filter.Comparison.BETWEEN,
|
||||
property: "foo",
|
||||
lowerBoundary: 25,
|
||||
upperBoundary: 50
|
||||
}),
|
||||
symbolizer: {
|
||||
externalGraphic: "../img/marker-green.png"
|
||||
}
|
||||
}),
|
||||
new OpenLayers.Rule({
|
||||
filter: new OpenLayers.Filter.Comparison({
|
||||
type: OpenLayers.Filter.Comparison.BETWEEN,
|
||||
property: "foo",
|
||||
lowerBoundary: 50,
|
||||
upperBoundary: 75
|
||||
}),
|
||||
symbolizer: {
|
||||
externalGraphic: "../img/marker-gold.png"
|
||||
}
|
||||
}),
|
||||
new OpenLayers.Rule({
|
||||
// apply this rule if no others apply
|
||||
elseFilter: true,
|
||||
symbolizer: {
|
||||
externalGraphic: "../img/marker.png"
|
||||
}
|
||||
})
|
||||
]
|
||||
}
|
||||
);
|
||||
|
||||
// create the layer styleMap that uses the above style for all render intents
|
||||
var vector = new OpenLayers.Layer.Vector("Points", {
|
||||
styleMap: new OpenLayers.StyleMap(style)
|
||||
});
|
||||
vector.addFeatures(features);
|
||||
|
||||
map.addLayers([wms, vector]);
|
||||
map.setCenter(new OpenLayers.LonLat(0, 0), 1);
|
||||
}
|
||||
@@ -79,8 +79,4 @@ h6 {
|
||||
}
|
||||
#tags {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#docs p {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
@@ -38,21 +38,18 @@
|
||||
pointRadius: "${type}", // sized according to type attribute
|
||||
fillColor: "#ffcc66",
|
||||
strokeColor: "#ff9933",
|
||||
strokeWidth: 2,
|
||||
graphicZIndex: 1
|
||||
strokeWidth: 2
|
||||
}),
|
||||
"select": new OpenLayers.Style({
|
||||
fillColor: "#66ccff",
|
||||
strokeColor: "#3399ff",
|
||||
graphicZIndex: 2
|
||||
strokeColor: "#3399ff"
|
||||
})
|
||||
});
|
||||
|
||||
// Create a vector layer and give it your style map.
|
||||
var points = new OpenLayers.Layer.Vector("Points", {
|
||||
styleMap: myStyles,
|
||||
rendererOptions: {zIndexing: true}
|
||||
});
|
||||
var points = new OpenLayers.Layer.Vector(
|
||||
'Points', {styleMap: myStyles}
|
||||
);
|
||||
points.addFeatures(features);
|
||||
map.addLayers([wms, points]);
|
||||
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>OpenLayers Styles Rotation Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<style type="text/css">
|
||||
#map {
|
||||
width: 800px;
|
||||
height: 475px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<script src="../lib/OpenLayers.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
@@ -71,16 +76,10 @@
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Rotation Style Example</h1>
|
||||
<p id="shortdesc">
|
||||
Use the rotation property of a point symbolizer to rotate
|
||||
point symbolizers.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
To style point features with rotation, use the rotation property of the
|
||||
symbolizer. The center of the rotation is the point of the image
|
||||
specified by graphicXOffset and graphicYOffset. The rotation is
|
||||
specified in degrees clockwise.
|
||||
</div>
|
||||
<p id="shortdesc">To style point features with rotation, use the rotation
|
||||
property of the symbolizer. The center of the rotation is the point of the
|
||||
image specified by graphicXOffset and graphicYOffset.</p>
|
||||
<div id="map"></div>
|
||||
<div id="docs"/>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -25,8 +25,7 @@
|
||||
new OpenLayers.Rule({
|
||||
symbolizer: {
|
||||
graphic: false,
|
||||
label: "Label for invisible point",
|
||||
labelSelect: true
|
||||
label: "Label for invisible point"
|
||||
},
|
||||
filter: new OpenLayers.Filter.Comparison({
|
||||
type: "==",
|
||||
@@ -51,9 +50,7 @@
|
||||
stroke: true,
|
||||
fill: false,
|
||||
label: "Point without fill",
|
||||
labelAlign: "rb",
|
||||
fontColor: "#ff0000",
|
||||
fontOpacity: 0.4
|
||||
labelAlign: "rb"
|
||||
},
|
||||
filter: new OpenLayers.Filter.Comparison({
|
||||
type: "==",
|
||||
@@ -108,13 +105,6 @@
|
||||
vectorLayer.drawFeature(multiFeature);
|
||||
map.setCenter(new OpenLayers.LonLat(point.x, point.y), 4);
|
||||
vectorLayer.addFeatures([pointFeature, polygonFeature, multiFeature]);
|
||||
var select = new OpenLayers.Control.SelectFeature(vectorLayer, {
|
||||
selectStyle: OpenLayers.Util.extend(
|
||||
{fill: true, stroke: true},
|
||||
OpenLayers.Feature.Vector.style["select"])
|
||||
});
|
||||
map.addControl(select);
|
||||
select.activate();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
@@ -127,8 +117,6 @@
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
This example shows how to use symbolizers with defaults for stroke, fill, and graphic.
|
||||
This also allows to create labels for a feature without the feature rendered. Click on
|
||||
the label in the middle to see selection of features with labelSelect set to true.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
0
examples/thinlong.jpg
Normal file → Executable file
0
examples/thinlong.jpg
Normal file → Executable file
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
@@ -1,105 +0,0 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>OpenLayers: Transformation Box</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src="../lib/OpenLayers.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
var map, control;
|
||||
|
||||
function init(){
|
||||
map = new OpenLayers.Map('map', {allOverlays: true});
|
||||
|
||||
// context for appropriate scale/resize cursors
|
||||
var cursors = ["sw-resize", "s-resize", "se-resize",
|
||||
"e-resize", "ne-resize", "n-resize", "nw-resize", "w-resize"];
|
||||
var context = {
|
||||
getCursor: function(feature){
|
||||
var i = OpenLayers.Util.indexOf(control.handles, feature);
|
||||
var cursor = "inherit";
|
||||
if(i !== -1) {
|
||||
i = (i + 8 + Math.round(control.rotation / 90) * 2) % 8;
|
||||
cursor = cursors[i];
|
||||
}
|
||||
return cursor;
|
||||
}
|
||||
};
|
||||
|
||||
// a nice style for the transformation box
|
||||
var style = new OpenLayers.Style({
|
||||
cursor: "${getCursor}",
|
||||
pointRadius: 5,
|
||||
fillColor: "white",
|
||||
fillOpacity: 1,
|
||||
strokeColor: "black"
|
||||
}, {context: context});
|
||||
|
||||
// the layer that we want to transform features on
|
||||
var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
|
||||
styleMap: new OpenLayers.StyleMap({
|
||||
"transform": style
|
||||
})
|
||||
});
|
||||
|
||||
// create the TransformFeature control, using the renderIntent
|
||||
// from above
|
||||
control = new OpenLayers.Control.TransformFeature(vectorLayer, {
|
||||
renderIntent: "transform"
|
||||
});
|
||||
map.addControl(control);
|
||||
|
||||
// create a polygon feature from a linear ring of points
|
||||
var point = new OpenLayers.Geometry.Point(-111.04, 45.68);
|
||||
var pointList = [];
|
||||
for(var p=0; p<6; ++p) {
|
||||
var a = p * (2 * Math.PI) / 7;
|
||||
var r = Math.random(1) + 2;
|
||||
var newPoint = new OpenLayers.Geometry.Point(point.x + (r * Math.cos(a)),
|
||||
point.y + (r * Math.sin(a)));
|
||||
pointList.push(newPoint);
|
||||
}
|
||||
pointList.push(pointList[0]);
|
||||
|
||||
var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
|
||||
var polygonFeature = new OpenLayers.Feature.Vector(
|
||||
new OpenLayers.Geometry.Polygon([linearRing]));
|
||||
|
||||
|
||||
map.addLayer(vectorLayer);
|
||||
map.setCenter(new OpenLayers.LonLat(point.x, point.y), 5);
|
||||
var anotherFeature = polygonFeature.clone();
|
||||
polygonFeature.geometry.move(-3, 0);
|
||||
anotherFeature.geometry.move(3, 0);
|
||||
vectorLayer.addFeatures([polygonFeature, anotherFeature]);
|
||||
|
||||
// start with the transformation box on polygonFeature
|
||||
control.setFeature(polygonFeature, {rotation: 45, scale: 0.5, ratio: 1.5});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Vector Feature Transformation Box Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
Shows the use of the TransformFeature control.
|
||||
</p>
|
||||
<div style="text-align: right">
|
||||
<div dir="rtl" id="map" class="smallmap"></div>
|
||||
</div>
|
||||
<div id="docs">
|
||||
<p>This example shows transformation of vector features with a
|
||||
tranformation box. Grab one of the handles to resize the feature.
|
||||
Holding the SHIFT key will preserve the aspect ratio. Position the
|
||||
mouse right outside one of the corner handles to rotate the feature,
|
||||
and hold the SHIFT key to only rotate in 45° increments.</p>
|
||||
<p>In this example, the transformation box has been set on the left
|
||||
feature, with a rotation preset of 45°. Clicking on the right feature
|
||||
will set it for transformation, starting with an unrotated box.
|
||||
Dragging a feature or the box edges will move it around.</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -8,24 +8,28 @@
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
var lon = 12;
|
||||
var lat = 41;
|
||||
var lon = 5;
|
||||
var lat = 40;
|
||||
var zoom = 15;
|
||||
var map, velayer, layer, marker;
|
||||
var map, velayer, layer;
|
||||
|
||||
function init(){
|
||||
map = new OpenLayers.Map( 'map' ,
|
||||
{controls:[new OpenLayers.Control.MouseDefaults()]});
|
||||
|
||||
velayer = new OpenLayers.Layer.VirtualEarth( "VE", {
|
||||
// turn off animated zooming
|
||||
animationEnabled: false,
|
||||
minZoomLevel: 4,
|
||||
maxZoomLevel: 6,
|
||||
'type': VEMapStyle.Aerial
|
||||
});
|
||||
velayer = new OpenLayers.Layer.VirtualEarth( "VE",
|
||||
{ minZoomLevel: 4, maxZoomLevel: 6, 'type': VEMapStyle.Aerial});
|
||||
map.addLayer(velayer);
|
||||
|
||||
var twms = new OpenLayers.Layer.WMS( "World Map",
|
||||
"http://world.freemap.in/cgi-bin/mapserv?",
|
||||
{ map: '/www/freemap.in/world/map/factbooktrans.map',
|
||||
transparent:'true',
|
||||
layers: 'factbook',
|
||||
'format':'png'},
|
||||
{'reproject': true});
|
||||
map.addLayer(twms);
|
||||
|
||||
markers = new OpenLayers.Layer.Markers("markers");
|
||||
map.addLayer(markers);
|
||||
|
||||
@@ -35,17 +39,13 @@
|
||||
}
|
||||
|
||||
function add() {
|
||||
if(!marker) {
|
||||
marker = new OpenLayers.Marker(new OpenLayers.LonLat(15, 47));
|
||||
markers.addMarker(marker);
|
||||
}
|
||||
|
||||
marker = new OpenLayers.Marker(new OpenLayers.LonLat(2, 41));
|
||||
markers.addMarker(marker);
|
||||
}
|
||||
|
||||
function remove() {
|
||||
if(marker) {
|
||||
markers.removeMarker(marker);
|
||||
marker = null;
|
||||
}
|
||||
markers.removeMarker(marker);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
@@ -59,7 +59,7 @@
|
||||
</p>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
<input type="button" onClick="javascript:add()"value="Add the marker to the map">
|
||||
<input type="button" onClick="javascript:add()"value="Add the marker from the map">
|
||||
<input type="button" onClick="javascript:remove()" value="Remove the marker from the map">
|
||||
<div id="docs">This example demonstrates the ability to add VirtualEarth and the and remove markers.</div>
|
||||
</body>
|
||||
|
||||
@@ -33,9 +33,7 @@
|
||||
fontSize: "12px",
|
||||
fontFamily: "Courier New, monospace",
|
||||
fontWeight: "bold",
|
||||
labelAlign: "${align}",
|
||||
labelXOffset: "${xOffset}",
|
||||
labelYOffset: "${yOffset}"
|
||||
labelAlign: "${align}"
|
||||
}}),
|
||||
renderers: renderer
|
||||
});
|
||||
@@ -85,22 +83,6 @@
|
||||
favColor: 'black',
|
||||
align: 'rt'
|
||||
});
|
||||
|
||||
// Create a point feature to show the label offset options
|
||||
var labelOffsetPoint = new OpenLayers.Geometry.Point(-101.04, 35.68);
|
||||
var labelOffsetFeature = new OpenLayers.Feature.Vector(labelOffsetPoint);
|
||||
labelOffsetFeature.attributes = {
|
||||
name: "offset",
|
||||
age: 22,
|
||||
favColor: 'blue',
|
||||
align: "cm",
|
||||
// positive value moves the label to the right
|
||||
xOffset: 50,
|
||||
// negative value moves the label down
|
||||
yOffset: -15
|
||||
};
|
||||
|
||||
|
||||
var nullFeature = new OpenLayers.Feature.Vector(null);
|
||||
nullFeature.attributes = {
|
||||
name: "toto is some text about the world",
|
||||
@@ -112,7 +94,7 @@
|
||||
map.addLayer(vectorLayer);
|
||||
vectorLayer.drawFeature(multiFeature);
|
||||
map.setCenter(new OpenLayers.LonLat(point.x, point.y), 3);
|
||||
vectorLayer.addFeatures([pointFeature, polygonFeature, multiFeature, labelOffsetFeature, nullFeature ]);
|
||||
vectorLayer.addFeatures([pointFeature, polygonFeature, multiFeature, nullFeature ]);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
// of the image will be ignored
|
||||
style_mark.graphicWidth = 24;
|
||||
style_mark.graphicHeight = 20;
|
||||
style_mark.graphicXOffset = 10; // default is -(style_mark.graphicWidth/2);
|
||||
style_mark.graphicXOffset = -(style_mark.graphicWidth/2); // this is the default value
|
||||
style_mark.graphicYOffset = -style_mark.graphicHeight;
|
||||
style_mark.externalGraphic = "../img/marker.png";
|
||||
// graphicTitle only works in Firefox and Internet Explorer
|
||||
@@ -116,7 +116,9 @@
|
||||
<p id="shortdesc">
|
||||
Shows the use of the shows drawing simple vector features, in different styles.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div style="text-align: right">
|
||||
<div dir="rtl" id="map" class="smallmap"></div>
|
||||
</div>
|
||||
<div id="docs">
|
||||
<p>This example shows drawing simple vector features -- point, line, polygon
|
||||
in different styles, created 'manually', by constructing the entire style
|
||||
|
||||
@@ -69,8 +69,6 @@
|
||||
OpenLayers.Util.extend({}, gmlOptions),
|
||||
out_options
|
||||
);
|
||||
var kmlOptionsIn = OpenLayers.Util.extend(
|
||||
{extractStyles: true}, in_options);
|
||||
formats = {
|
||||
'in': {
|
||||
wkt: new OpenLayers.Format.WKT(in_options),
|
||||
@@ -78,8 +76,7 @@
|
||||
georss: new OpenLayers.Format.GeoRSS(in_options),
|
||||
gml2: new OpenLayers.Format.GML.v2(gmlOptionsIn),
|
||||
gml3: new OpenLayers.Format.GML.v3(gmlOptionsIn),
|
||||
kml: new OpenLayers.Format.KML(kmlOptionsIn),
|
||||
atom: new OpenLayers.Format.Atom(in_options)
|
||||
kml: new OpenLayers.Format.KML(in_options)
|
||||
},
|
||||
'out': {
|
||||
wkt: new OpenLayers.Format.WKT(out_options),
|
||||
@@ -87,8 +84,7 @@
|
||||
georss: new OpenLayers.Format.GeoRSS(out_options),
|
||||
gml2: new OpenLayers.Format.GML.v2(gmlOptionsOut),
|
||||
gml3: new OpenLayers.Format.GML.v3(gmlOptionsOut),
|
||||
kml: new OpenLayers.Format.KML(out_options),
|
||||
atom: new OpenLayers.Format.Atom(out_options)
|
||||
kml: new OpenLayers.Format.KML(out_options)
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -146,7 +142,7 @@
|
||||
vectors.addFeatures(features);
|
||||
map.zoomToExtent(bounds);
|
||||
var plural = (features.length > 1) ? 's' : '';
|
||||
element.value = features.length + ' feature' + plural + ' added';
|
||||
element.value = features.length + ' feature' + plural + ' added'
|
||||
} else {
|
||||
element.value = 'Bad input ' + type;
|
||||
}
|
||||
@@ -185,7 +181,6 @@
|
||||
<label for="formatType">Format</label>
|
||||
<select name="formatType" id="formatType">
|
||||
<option value="geojson" selected="selected">GeoJSON</option>
|
||||
<option value="atom">Atom</option>
|
||||
<option value="kml">KML</option>
|
||||
<option value="georss">GeoRSS</option>
|
||||
<option value="gml2">GML (v2)</option>
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenLayers: Web Mercator</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
|
||||
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="web-mercator.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">OpenLayers Spherical Mercator Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
Shows the use of layers in spherical or web mercator using different
|
||||
EPSG codes to indicate the same projection.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
<p>
|
||||
A number of mapping services support the spherical or web
|
||||
mercator but use different EPSG codes to identify it. ArcGIS
|
||||
server version 9.3 uses EPSG:102113 to represent the same SRS
|
||||
that OpenLayers typically refers to by EPSG:900913.
|
||||
</p><p>
|
||||
To configure a map with a WMS layer overlaid on a Google layer
|
||||
where the WMS uses EPSG:102113 to refer to the web mercator
|
||||
projection, the Google layer must be constructed with this
|
||||
projection code in its options (it is not sufficient to
|
||||
construct the map with this projection).
|
||||
<p>
|
||||
If your application needs to transform coordinates to and from
|
||||
EPSG:102113, you must add custom transforms as well.
|
||||
</p><p>
|
||||
See the <a href="web-mercator.js" target="_blank">web-mercator.js</a>
|
||||
source for details.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
// make map available for easy debugging
|
||||
var map;
|
||||
|
||||
// if your application transforms coordinates to and from EPSG:102113 then
|
||||
// you must uncomment the lines below
|
||||
|
||||
// OpenLayers.Projection.addTransform("EPSG:4326", "EPSG:102113",
|
||||
// OpenLayers.Layer.SphericalMercator.projectForward);
|
||||
// OpenLayers.Projection.addTransform("EPSG:102113", "EPSG:4326",
|
||||
// OpenLayers.Layer.SphericalMercator.projectInverse);
|
||||
|
||||
function init() {
|
||||
|
||||
var options = {
|
||||
projection: new OpenLayers.Projection("EPSG:102113"),
|
||||
units: "m",
|
||||
numZoomLevels: 18,
|
||||
maxResolution: 156543.0339,
|
||||
maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
|
||||
20037508, 20037508.34)
|
||||
};
|
||||
map = new OpenLayers.Map('map', options);
|
||||
|
||||
// create Google layer with EPSG:102113 code
|
||||
var gsat = new OpenLayers.Layer.Google("Google Imagery", {
|
||||
type: G_SATELLITE_MAP,
|
||||
sphericalMercator: true,
|
||||
projection: "EPSG:102113"
|
||||
});
|
||||
|
||||
// create WMS layer
|
||||
var wms = new OpenLayers.Layer.WMS(
|
||||
"Highways",
|
||||
"http://sampleserver1.arcgisonline.com/arcgis/services/Specialty/ESRI_StateCityHighway_USA/MapServer/WMSServer",
|
||||
{layers: "2", format: "image/gif", transparent: "true"},
|
||||
{
|
||||
isBaseLayer: false,
|
||||
wrapDateLine: true
|
||||
}
|
||||
);
|
||||
|
||||
map.addLayers([gsat, wms]);
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
map.setCenter(new OpenLayers.LonLat(-10723197, 4500612), 3);
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenLayers WFS Protocol with Filter</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../theme/default/google.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="wfs-filter.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">WFS Protocol and Filter</h1>
|
||||
<p id="shortdesc">
|
||||
Demonstrates the use of a filter in making GetFeature requests using the WFS protocol.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
<p>
|
||||
If a vector layer has a filter and the protocol supports server-side filtering,
|
||||
the filter will be serialized in requests for features. The WFS protocol can be
|
||||
used with a vector layer to serialize a filter using OGC Filter Encoding. This
|
||||
example requests all features that are <code>TYPE</code> "highway" or "road".
|
||||
</p><p>
|
||||
See the <a href="wfs-filter.js" target="_blank">wfs-filter source</a>
|
||||
for details on how this is done.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,48 +0,0 @@
|
||||
var map;
|
||||
|
||||
// use proxy if requesting features cross-domain
|
||||
OpenLayers.ProxyHost= "proxy.cgi?url=";
|
||||
|
||||
function init() {
|
||||
|
||||
map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
layers: [
|
||||
new OpenLayers.Layer.WMS(
|
||||
"Natural Earth",
|
||||
"http://demo.opengeo.org/geoserver/wms",
|
||||
{layers: "topp:naturalearth"}
|
||||
),
|
||||
new OpenLayers.Layer.Vector("WFS", {
|
||||
strategies: [new OpenLayers.Strategy.BBOX()],
|
||||
protocol: new OpenLayers.Protocol.WFS({
|
||||
url: "http://demo.opengeo.org/geoserver/wfs",
|
||||
featureType: "tasmania_roads",
|
||||
featureNS: "http://www.openplans.org/topp"
|
||||
}),
|
||||
styleMap: new OpenLayers.StyleMap({
|
||||
strokeWidth: 3,
|
||||
strokeColor: "#333333"
|
||||
}),
|
||||
filter: new OpenLayers.Filter.Logical({
|
||||
type: OpenLayers.Filter.Logical.OR,
|
||||
filters: [
|
||||
new OpenLayers.Filter.Comparison({
|
||||
type: OpenLayers.Filter.Comparison.EQUAL_TO,
|
||||
property: "TYPE",
|
||||
value: "highway"
|
||||
}),
|
||||
new OpenLayers.Filter.Comparison({
|
||||
type: OpenLayers.Filter.Comparison.EQUAL_TO,
|
||||
property: "TYPE",
|
||||
value: "road"
|
||||
})
|
||||
]
|
||||
})
|
||||
})
|
||||
],
|
||||
center: new OpenLayers.LonLat(146.7, -41.8),
|
||||
zoom: 6
|
||||
});
|
||||
|
||||
}
|
||||
@@ -58,32 +58,140 @@
|
||||
background-position: 0px 1px;
|
||||
}
|
||||
</style>
|
||||
<script src="wfs-protocol-transactions.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map, wfs;
|
||||
|
||||
var DeleteFeature = OpenLayers.Class(OpenLayers.Control, {
|
||||
initialize: function(layer, options) {
|
||||
OpenLayers.Control.prototype.initialize.apply(this, [options]);
|
||||
this.layer = layer;
|
||||
this.handler = new OpenLayers.Handler.Feature(
|
||||
this, layer, {click: this.clickFeature}
|
||||
);
|
||||
},
|
||||
clickFeature: function(feature) {
|
||||
// if feature doesn't have a fid, destroy it
|
||||
if(feature.fid == undefined) {
|
||||
this.layer.destroyFeatures([feature]);
|
||||
} else {
|
||||
feature.state = OpenLayers.State.DELETE;
|
||||
this.layer.events.triggerEvent("afterfeaturemodified",
|
||||
{feature: feature});
|
||||
feature.renderIntent = "select";
|
||||
this.layer.drawFeature(feature);
|
||||
}
|
||||
},
|
||||
setMap: function(map) {
|
||||
this.handler.setMap(map);
|
||||
OpenLayers.Control.prototype.setMap.apply(this, arguments);
|
||||
},
|
||||
CLASS_NAME: "OpenLayers.Control.DeleteFeature"
|
||||
});
|
||||
|
||||
function init() {
|
||||
OpenLayers.ProxyHost= "proxy.cgi?url=";
|
||||
map = new OpenLayers.Map('map', {
|
||||
projection: new OpenLayers.Projection("EPSG:900913"),
|
||||
displayProjection: new OpenLayers.Projection("EPSG:4326"),
|
||||
units: "m",
|
||||
maxResolution: 156543.0339,
|
||||
maxExtent: new OpenLayers.Bounds(
|
||||
-11593508, 5509847, -11505759, 5557774
|
||||
),
|
||||
controls: [
|
||||
new OpenLayers.Control.PanZoom()
|
||||
]
|
||||
});
|
||||
var gphy = new OpenLayers.Layer.Google(
|
||||
"Google Physical",
|
||||
{type: G_PHYSICAL_MAP, sphericalMercator: true}
|
||||
);
|
||||
|
||||
var saveStrategy = new OpenLayers.Strategy.Save();
|
||||
|
||||
wfs = new OpenLayers.Layer.Vector("Editable Features", {
|
||||
strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy],
|
||||
projection: new OpenLayers.Projection("EPSG:4326"),
|
||||
protocol: new OpenLayers.Protocol.WFS({
|
||||
version: "1.1.0",
|
||||
srsName: "EPSG:4326",
|
||||
url: "http://demo.opengeo.org/geoserver/wfs",
|
||||
featureNS : "http://opengeo.org",
|
||||
featureType: "restricted",
|
||||
geometryName: "the_geom",
|
||||
schema: "http://demo.opengeo.org/geoserver/wfs/DescribeFeatureType?version=1.1.0&typename=og:restricted"
|
||||
})
|
||||
});
|
||||
|
||||
map.addLayers([gphy, wfs]);
|
||||
|
||||
var panel = new OpenLayers.Control.Panel(
|
||||
{'displayClass': 'customEditingToolbar'}
|
||||
);
|
||||
|
||||
var navigate = new OpenLayers.Control.Navigation({
|
||||
title: "Pan Map",
|
||||
});
|
||||
|
||||
var draw = new OpenLayers.Control.DrawFeature(
|
||||
wfs, OpenLayers.Handler.Polygon,
|
||||
{
|
||||
title: "Draw Feature",
|
||||
displayClass: "olControlDrawFeaturePolygon",
|
||||
handlerOptions: {multi: true}
|
||||
}
|
||||
);
|
||||
|
||||
var edit = new OpenLayers.Control.ModifyFeature(wfs, {
|
||||
title: "Modify Feature",
|
||||
displayClass: "olControlModifyFeature",
|
||||
});
|
||||
|
||||
var del = new DeleteFeature(wfs, {title: "Delete Feature"});
|
||||
|
||||
var save = new OpenLayers.Control.Button({
|
||||
title: "Save Changes",
|
||||
trigger: function() {
|
||||
if(edit.feature) {
|
||||
edit.selectControl.unselectAll();
|
||||
}
|
||||
saveStrategy.save();
|
||||
},
|
||||
displayClass: "olControlSaveFeatures"
|
||||
});
|
||||
|
||||
panel.addControls([navigate, save, del, edit, draw]);
|
||||
panel.defaultControl = navigate;
|
||||
map.addControl(panel);
|
||||
map.zoomToMaxExtent();
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">WFS Transaction Example</h1>
|
||||
<div id="tags"></div>
|
||||
<p id="shortdesc">
|
||||
Shows the use of the WFS Transactions (WFS-T).
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
<p>
|
||||
The WFS protocol allows for creation of new features and
|
||||
reading, updating, or deleting of existing features.
|
||||
</p>
|
||||
<p>
|
||||
Use the tools to create, modify, and delete (in order from left
|
||||
to right) features. Use the save tool (picture of a disk) to
|
||||
save your changes. Use the navigation tool (hand) to stop
|
||||
editing and use the mouse for map navigation.
|
||||
</p>
|
||||
<p>
|
||||
See the <a href="wfs-protocol-transactions.js" target="_blank">
|
||||
wfs-protocol-transactions.js source</a> to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<h1 id="title">WFS Transaction Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
Shows the use of the WFS Transactions (WFS-T).
|
||||
</p>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
<div id="docs">
|
||||
<p>The WFS protocol allows for creation of new features and reading,
|
||||
updating, or deleting of existing features.</p>
|
||||
<p>Use the tools to create, modify, and delete (in order from left
|
||||
to right) features. Use the save tool (picture of a disk) to
|
||||
save your changes. Use the navigation tool (hand) to stop editing
|
||||
and use the mouse for map navigation.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
@@ -1,107 +0,0 @@
|
||||
var map, wfs;
|
||||
OpenLayers.ProxyHost = "proxy.cgi?url=";
|
||||
|
||||
var DeleteFeature = OpenLayers.Class(OpenLayers.Control, {
|
||||
initialize: function(layer, options) {
|
||||
OpenLayers.Control.prototype.initialize.apply(this, [options]);
|
||||
this.layer = layer;
|
||||
this.handler = new OpenLayers.Handler.Feature(
|
||||
this, layer, {click: this.clickFeature}
|
||||
);
|
||||
},
|
||||
clickFeature: function(feature) {
|
||||
// if feature doesn't have a fid, destroy it
|
||||
if(feature.fid == undefined) {
|
||||
this.layer.destroyFeatures([feature]);
|
||||
} else {
|
||||
feature.state = OpenLayers.State.DELETE;
|
||||
this.layer.events.triggerEvent("afterfeaturemodified",
|
||||
{feature: feature});
|
||||
feature.renderIntent = "select";
|
||||
this.layer.drawFeature(feature);
|
||||
}
|
||||
},
|
||||
setMap: function(map) {
|
||||
this.handler.setMap(map);
|
||||
OpenLayers.Control.prototype.setMap.apply(this, arguments);
|
||||
},
|
||||
CLASS_NAME: "OpenLayers.Control.DeleteFeature"
|
||||
});
|
||||
|
||||
function init() {
|
||||
map = new OpenLayers.Map('map', {
|
||||
projection: new OpenLayers.Projection("EPSG:900913"),
|
||||
displayProjection: new OpenLayers.Projection("EPSG:4326"),
|
||||
units: "m",
|
||||
maxResolution: 156543.0339,
|
||||
maxExtent: new OpenLayers.Bounds(
|
||||
-11593508, 5509847, -11505759, 5557774
|
||||
),
|
||||
controls: [
|
||||
new OpenLayers.Control.PanZoom()
|
||||
]
|
||||
});
|
||||
var gphy = new OpenLayers.Layer.Google(
|
||||
"Google Physical",
|
||||
{type: G_PHYSICAL_MAP, sphericalMercator: true}
|
||||
);
|
||||
|
||||
var saveStrategy = new OpenLayers.Strategy.Save();
|
||||
|
||||
wfs = new OpenLayers.Layer.Vector("Editable Features", {
|
||||
strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy],
|
||||
projection: new OpenLayers.Projection("EPSG:4326"),
|
||||
protocol: new OpenLayers.Protocol.WFS({
|
||||
version: "1.1.0",
|
||||
srsName: "EPSG:4326",
|
||||
url: "http://demo.opengeo.org/geoserver/wfs",
|
||||
featureNS : "http://opengeo.org",
|
||||
featureType: "restricted",
|
||||
geometryName: "the_geom",
|
||||
schema: "http://demo.opengeo.org/geoserver/wfs/DescribeFeatureType?version=1.1.0&typename=og:restricted"
|
||||
})
|
||||
});
|
||||
|
||||
map.addLayers([gphy, wfs]);
|
||||
|
||||
var panel = new OpenLayers.Control.Panel(
|
||||
{'displayClass': 'customEditingToolbar'}
|
||||
);
|
||||
|
||||
var navigate = new OpenLayers.Control.Navigation({
|
||||
title: "Pan Map"
|
||||
});
|
||||
|
||||
var draw = new OpenLayers.Control.DrawFeature(
|
||||
wfs, OpenLayers.Handler.Polygon,
|
||||
{
|
||||
title: "Draw Feature",
|
||||
displayClass: "olControlDrawFeaturePolygon",
|
||||
multi: true
|
||||
}
|
||||
);
|
||||
|
||||
var edit = new OpenLayers.Control.ModifyFeature(wfs, {
|
||||
title: "Modify Feature",
|
||||
displayClass: "olControlModifyFeature"
|
||||
});
|
||||
|
||||
var del = new DeleteFeature(wfs, {title: "Delete Feature"});
|
||||
|
||||
var save = new OpenLayers.Control.Button({
|
||||
title: "Save Changes",
|
||||
trigger: function() {
|
||||
if(edit.feature) {
|
||||
edit.selectControl.unselectAll();
|
||||
}
|
||||
saveStrategy.save();
|
||||
},
|
||||
displayClass: "olControlSaveFeatures"
|
||||
});
|
||||
|
||||
panel.addControls([navigate, save, del, edit, draw]);
|
||||
panel.defaultControl = navigate;
|
||||
map.addControl(panel);
|
||||
map.zoomToMaxExtent();
|
||||
}
|
||||
|
||||
@@ -1,37 +1,114 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>WFS Reprojection Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ"></script>
|
||||
<script src="wfs-reprojection.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">WFS Reprojection Example</h1>
|
||||
<div id="tags">
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
Shows the use of the client side reprojection support.
|
||||
</p>
|
||||
<head>
|
||||
<title>WFS Reprojection + Canvas Renderer Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
var map, layer, styleMap;
|
||||
OpenLayers.ProxyHost = "/proxy/?url=";
|
||||
function init(){
|
||||
|
||||
map = new OpenLayers.Map('map', {
|
||||
projection: new OpenLayers.Projection("EPSG:900913"),
|
||||
displayProjection: new OpenLayers.Projection("EPSG:4326"),
|
||||
units: "m",
|
||||
maxResolution: 156543.0339,
|
||||
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
|
||||
20037508.34, 20037508.34)
|
||||
});
|
||||
|
||||
var g = new OpenLayers.Layer.Google("G", {sphericalMercator: true});
|
||||
map.addLayers([g]);
|
||||
|
||||
// prepare to style the data
|
||||
styleMap = new OpenLayers.StyleMap({
|
||||
strokeColor: "black",
|
||||
strokeWidth: 2,
|
||||
strokeOpacity: 0.5,
|
||||
fillOpacity: 0.2
|
||||
});
|
||||
// create a color table for state FIPS code
|
||||
var colors = ["red", "orange", "yellow", "green", "blue", "purple"];
|
||||
var code, fips = {};
|
||||
for(var i=1; i<=66; ++i) {
|
||||
code = "0" + i;
|
||||
code = code.substring(code.length - 2);
|
||||
fips[code] = {fillColor: colors[i % colors.length]};
|
||||
}
|
||||
// add unique value rules with your color lookup
|
||||
styleMap.addUniqueValueRules("default", "STATE_FIPS", fips);
|
||||
|
||||
// create a wfs layer with a projection different than the map
|
||||
// (only if your wfs doens't support your map projection)
|
||||
var wfs = layer = new OpenLayers.Layer.WFS(
|
||||
"States (SVG)",
|
||||
"http://sigma.openplans.org/geoserver/ows",
|
||||
{typename: 'topp:states'},
|
||||
{
|
||||
typename: 'states',
|
||||
featureNS: 'http://www.openplans.org/topp',
|
||||
projection: new OpenLayers.Projection("EPSG:4326"),
|
||||
extractAttributes: true,
|
||||
ratio: 1.2,
|
||||
styleMap: styleMap
|
||||
}
|
||||
);
|
||||
map.addLayer(wfs);
|
||||
|
||||
var wfs = layer = new OpenLayers.Layer.WFS(
|
||||
"States (Canvas)",
|
||||
"http://sigma.openplans.org/geoserver/ows",
|
||||
{typename: 'topp:states'},
|
||||
{
|
||||
typename: 'states',
|
||||
featureNS: 'http://www.openplans.org/topp',
|
||||
projection: new OpenLayers.Projection("EPSG:4326"),
|
||||
extractAttributes: true,
|
||||
ratio: 1.2,
|
||||
styleMap: styleMap,
|
||||
renderers: ['Canvas', 'SVG', 'VML']
|
||||
}
|
||||
);
|
||||
map.addLayer(wfs);
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
|
||||
// if you want to use Geographic coords, transform to ESPG:900913
|
||||
var ddBounds = new OpenLayers.Bounds(
|
||||
-73.839111,40.287907,-68.214111,44.441624
|
||||
);
|
||||
map.zoomToExtent(
|
||||
ddBounds.transform(map.displayProjection, map.getProjectionObject())
|
||||
);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
|
||||
<h1 id="title">WFS Reprojection + Canvas Renderer Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
Shows the use of the WFS layer reprojection support
|
||||
</p>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
<p>
|
||||
This example shows client side reprojection. In the case where
|
||||
the projection of a vector layer differs from the projection of
|
||||
the map, features are requested in the layer projection and
|
||||
transformed during parsing. It is assumed that the layer
|
||||
projection is "native" projection of the data (the coordinate
|
||||
reference system of the data on the server).
|
||||
</p>
|
||||
<p>
|
||||
Also shown is styleMap for the layer with unique value rules.
|
||||
Colors are assigned based on the STATE_FIPS attribute.
|
||||
</p>
|
||||
<p>
|
||||
See the <a href="wfs-reprojection.js" target="_blank">
|
||||
wfs-reprojection.js source</a> to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<div id="docs">
|
||||
<p>This example shows automatic WFS reprojection, displaying an 'unprojected'
|
||||
WFS layer projected on the client side over Google Maps. The key configuration
|
||||
here is the 'projection' option on the WFS layer.</p>
|
||||
<p>Also shown is styleMap for the layer with unique value rules. Colors
|
||||
are assigned based on the STATE_FIPS attribute.</p>
|
||||
<p>Additionally, this map demonstrates the Canvas/SVG renderers in browsers
|
||||
which support both. See the two different layers in the
|
||||
LayerSwitcher.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
var map, layer, styleMap;
|
||||
OpenLayers.ProxyHost = "proxy.cgi?url=";
|
||||
|
||||
function init() {
|
||||
|
||||
var geographic = new OpenLayers.Projection("EPSG:4326");
|
||||
var mercator = new OpenLayers.Projection("EPSG:900913");
|
||||
|
||||
map = new OpenLayers.Map('map', {
|
||||
projection: mercator,
|
||||
units: "m",
|
||||
maxResolution: 156543.0339,
|
||||
maxExtent: new OpenLayers.Bounds(
|
||||
-20037508, -20037508, 20037508, 20037508
|
||||
)
|
||||
});
|
||||
|
||||
var g = new OpenLayers.Layer.Google("Google Layer", {
|
||||
sphericalMercator: true
|
||||
});
|
||||
map.addLayers([g]);
|
||||
|
||||
// prepare to style the data
|
||||
styleMap = new OpenLayers.StyleMap({
|
||||
strokeColor: "black",
|
||||
strokeWidth: 2,
|
||||
strokeOpacity: 0.5,
|
||||
fillOpacity: 0.2
|
||||
});
|
||||
// create a color table for state FIPS code
|
||||
var colors = ["red", "orange", "yellow", "green", "blue", "purple"];
|
||||
var code, fips = {};
|
||||
for(var i=1; i<=66; ++i) {
|
||||
code = "0" + i;
|
||||
code = code.substring(code.length - 2);
|
||||
fips[code] = {fillColor: colors[i % colors.length]};
|
||||
}
|
||||
// add unique value rules with your color lookup
|
||||
styleMap.addUniqueValueRules("default", "STATE_FIPS", fips);
|
||||
|
||||
// This server supports server-side reprojection, but we're using WFS 1.0
|
||||
// here (which doesn't support reprojection) to illustrate client-side
|
||||
// reprojection.
|
||||
var wfs = new OpenLayers.Layer.Vector("States", {
|
||||
strategies: [new OpenLayers.Strategy.BBOX()],
|
||||
protocol: new OpenLayers.Protocol.WFS({
|
||||
version: "1.0.0",
|
||||
srsName: "EPSG:4326", // this is the default
|
||||
url: "http://demo.opengeo.org/geoserver/wfs",
|
||||
featureType: "states",
|
||||
featureNS: "http://www.openplans.org/topp"
|
||||
}),
|
||||
projection: geographic, // specified because it is different than the map
|
||||
styleMap: styleMap
|
||||
});
|
||||
map.addLayer(wfs);
|
||||
|
||||
// if you want to use Geographic coords, transform to ESPG:900913
|
||||
var ddBounds = new OpenLayers.Bounds(
|
||||
-73.839111,40.287907,-68.214111,44.441624
|
||||
);
|
||||
map.zoomToExtent(
|
||||
ddBounds.transform(geographic, mercator)
|
||||
);
|
||||
}
|
||||
@@ -1,27 +1,45 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<title>WFS: United States (GeoServer)</title>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="wfs-states.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">WFS United States (GeoServer) Example</h1>
|
||||
<div id="tags"></div>
|
||||
<p id="shortdesc">
|
||||
Shows the use of the WFS United States (GeoServer).
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
<p>
|
||||
This example shows the basic use of a vector layer with the
|
||||
WFS protocol.
|
||||
</p>
|
||||
<p>
|
||||
See the <a href="wfs-states.js" target="_blank">wfs-states.js
|
||||
source</a> to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<title>WFS: United States (GeoServer)</title>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map, layer;
|
||||
|
||||
function init(){
|
||||
OpenLayers.ProxyHost="proxy.cgi?url=";
|
||||
map = new OpenLayers.Map('map', {controls: [ new OpenLayers.Control.PanZoom(), new OpenLayers.Control.Permalink(), new OpenLayers.Control.MouseDefaults() ]} );
|
||||
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
|
||||
"http://labs.metacarta.com/wms-c/Basic.py",
|
||||
{layers: 'basic'} );
|
||||
map.addLayer(layer);
|
||||
|
||||
layer = new OpenLayers.Layer.WFS( "States WFS",
|
||||
"http://sigma.openplans.org/geoserver/ows",
|
||||
{ typename: 'topp:states' } );
|
||||
map.addLayer(layer);
|
||||
|
||||
map.zoomToExtent(new OpenLayers.Bounds(-140.444336,25.115234,-44.438477,50.580078));
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">WFS United States (GeoServer) Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
</div>
|
||||
|
||||
<p id="shortdesc">
|
||||
Shows the use of the WFS United States (GeoServer)
|
||||
</p>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
<div id="docs"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
var map;
|
||||
OpenLayers.ProxyHost = "proxy.cgi?url=";
|
||||
|
||||
function init() {
|
||||
map = new OpenLayers.Map("map");
|
||||
|
||||
var base = new OpenLayers.Layer.WMS("OpenLayers WMS",
|
||||
"http://labs.metacarta.com/wms-c/Basic.py",
|
||||
{layers: "basic"}
|
||||
);
|
||||
map.addLayer(base);
|
||||
|
||||
var wfs = new OpenLayers.Layer.Vector("States", {
|
||||
strategies: [new OpenLayers.Strategy.BBOX()],
|
||||
protocol: new OpenLayers.Protocol.WFS({
|
||||
url: "http://demo.opengeo.org/geoserver/wfs",
|
||||
featureType: "states",
|
||||
featureNS: "http://www.openplans.org/topp"
|
||||
})
|
||||
});
|
||||
map.addLayer(wfs);
|
||||
|
||||
map.zoomToExtent(new OpenLayers.Bounds(-140.4, 25.1, -44.4, 50.5));
|
||||
}
|
||||
103
examples/wfs-t.html
Normal file
103
examples/wfs-t.html
Normal file
@@ -0,0 +1,103 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>OpenLayers: WFS-T</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src="../lib/Firebug/firebug.js"></script>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map, wfs;
|
||||
OpenLayers.ProxyHost = "proxy.cgi?url=";
|
||||
|
||||
function init() {
|
||||
map = new OpenLayers.Map('map');
|
||||
var wms = new OpenLayers.Layer.WMS(
|
||||
"State",
|
||||
"http://sigma.openplans.org/geoserver/wms",
|
||||
{layers: 'topp:tasmania_state_boundaries'}
|
||||
);
|
||||
|
||||
//
|
||||
// Word to the Wise from an anonymous OpenLayers hacker:
|
||||
//
|
||||
// The typename in the options list when adding/loading a wfs
|
||||
// layer not should contain the namespace before, (as in the
|
||||
// first typename parameter to the wfs consctructor).
|
||||
//
|
||||
// Specifically, in the first parameter you write typename:
|
||||
// 'topp:myLayerName', and in the following option list
|
||||
// typeName: 'myLayerName'.
|
||||
//
|
||||
// If you have topp included in the second one you will get
|
||||
// namespace 14 errors when trying to insert features.
|
||||
//
|
||||
wfs = new OpenLayers.Layer.WFS(
|
||||
"Cities",
|
||||
"http://sigma.openplans.org/geoserver/wfs",
|
||||
{typename: 'topp:tasmania_cities'},
|
||||
{
|
||||
typename: "tasmania_cities",
|
||||
featureNS: "http://www.openplans.org/topp",
|
||||
extractAttributes: false,
|
||||
commitReport: function(str) {
|
||||
OpenLayers.Console.log(str);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
map.addLayers([wms, wfs]);
|
||||
|
||||
var panel = new OpenLayers.Control.Panel({
|
||||
displayClass: "olControlEditingToolbar"
|
||||
});
|
||||
|
||||
var draw = new OpenLayers.Control.DrawFeature(
|
||||
wfs, OpenLayers.Handler.Point,
|
||||
{
|
||||
handlerOptions: {freehand: false, multi: true},
|
||||
displayClass: "olControlDrawFeaturePoint"
|
||||
}
|
||||
);
|
||||
|
||||
var save = new OpenLayers.Control.Button({
|
||||
trigger: OpenLayers.Function.bind(wfs.commit, wfs),
|
||||
displayClass: "olControlSaveFeatures"
|
||||
});
|
||||
|
||||
panel.addControls([
|
||||
new OpenLayers.Control.Navigation(),
|
||||
save, draw
|
||||
]);
|
||||
|
||||
map.addControl(panel);
|
||||
|
||||
map.zoomToExtent(new OpenLayers.Bounds(140.64,-44.42,151.89,-38.80));
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
|
||||
<h1 id="title">WFS Transaction Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
Shows the use the WFS layer for transactions.
|
||||
</p>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
<p id="docs">
|
||||
This is an example of using a WFS layer type. Note that it requires a
|
||||
working GeoServer install, which the OpenLayers project does not maintain;
|
||||
however, if you're interested, you should be able to point this against
|
||||
a default GeoServer setup without too much trouble.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
34
examples/wfs.html
Normal file
34
examples/wfs.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map, layer;
|
||||
|
||||
function init(){
|
||||
OpenLayers.ProxyHost="/proxy/?url=";
|
||||
map = new OpenLayers.Map('map');
|
||||
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
|
||||
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
|
||||
map.addLayer(layer);
|
||||
|
||||
layer = new OpenLayers.Layer.WFS( "Owl Survey",
|
||||
"http://www.bsc-eoc.org/cgi-bin/bsc_ows.asp?",
|
||||
{typename: "OWLS", maxfeatures: 10},
|
||||
{ featureClass: OpenLayers.Feature.WFS});
|
||||
map.addLayer(layer);
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
map.setCenter(new OpenLayers.LonLat(-100, 60), 3);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">WFS Points</h1>
|
||||
<p id='shortdesc'>
|
||||
Using a Layer.WFS with a featureClass, one can take in XML data
|
||||
from a WFS class and display it any way you like.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
</body>
|
||||
</html>
|
||||
0
examples/widelong.jpg
Normal file → Executable file
0
examples/widelong.jpg
Normal file → Executable file
|
Before Width: | Height: | Size: 210 KiB After Width: | Height: | Size: 210 KiB |
0
examples/wideshort.jpg
Normal file → Executable file
0
examples/wideshort.jpg
Normal file → Executable file
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 47 KiB |
@@ -7,18 +7,14 @@
|
||||
width: 90%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* avoid pink tiles */
|
||||
.olImageLoadError {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
<script src="../lib/Firebug/firebug.js"></script>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
// increase reload attempts
|
||||
// no pink please
|
||||
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 2;
|
||||
OpenLayers.Util.onImageLoadErrorColor = "transparent";
|
||||
|
||||
var format = new OpenLayers.Format.WMC({'layerOptions': {buffer: 0}});
|
||||
var doc, context, map;
|
||||
@@ -105,9 +101,7 @@
|
||||
} else {
|
||||
map.destroy();
|
||||
try {
|
||||
var jsonFormat = new OpenLayers.Format.JSON();
|
||||
var mapOptions = jsonFormat.read(OpenLayers.Util.getElement('mapOptions').value);
|
||||
map = format.read(text, {map: mapOptions});
|
||||
map = format.read(text, {map: "map"});
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
} catch(err) {
|
||||
document.getElementById("wmc").value = err;
|
||||
@@ -135,10 +129,9 @@
|
||||
Shows parsing of Web Map Context documents.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<button onclick="writeWMC();">write</button><br />
|
||||
<button onclick="readWMC();">read as new map</button> with the following extra map options : <input type="text" id="mapOptions" value='{"div": "map", "allOverlays": true}'/><br />
|
||||
<button onclick="readWMC(true);">read and merge</button><br />
|
||||
<button onclick="pasteWMC();">try with another WMC document</button><br />
|
||||
<button onclick="writeWMC();">write</button>
|
||||
<button onclick="readWMC();">read as new map</button>
|
||||
<button onclick="readWMC(true);">read and merge</button>
|
||||
<textarea id="wmc">paste WMC doc here</textarea>
|
||||
<div id="docs">
|
||||
This is an example of parsing WMC documents. <br />
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map, map2;
|
||||
|
||||
function init(){
|
||||
// clear array to simulate a wrong axis order request
|
||||
map = new OpenLayers.Map( 'map' );
|
||||
var layer = new OpenLayers.Layer.WMS(
|
||||
"OpenLayers WMS",
|
||||
"http://demo.cubewerx.com/demo/cubeserv/cubeserv.cgi?",
|
||||
{layers: 'Foundation.GTOPO30', version: '1.3.0'},
|
||||
{singleTile: true, yx: []}
|
||||
);
|
||||
map.addLayer(layer);
|
||||
|
||||
map.zoomToMaxExtent();
|
||||
|
||||
map2 = new OpenLayers.Map( 'map2' );
|
||||
var layer2 = new OpenLayers.Layer.WMS(
|
||||
"OpenLayers WMS",
|
||||
"http://demo.cubewerx.com/demo/cubeserv/cubeserv.cgi?",
|
||||
{layers: 'Foundation.GTOPO30', version: '1.3.0'},
|
||||
{singleTile: true}
|
||||
);
|
||||
map2.addLayer(layer2);
|
||||
|
||||
map2.zoomToMaxExtent();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title"> WMS version 1.3 (axis order) Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
Shows an example of the influence of axis order on WMS 1.3 GetMap requests.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="map2" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
WMS version 1.3 introduced the axis order sequence, so that for e.g. EPSG:4326 the bbox coordinate
|
||||
values need to be flipped (LatLon instead of LonLat). The first map uses the incorrect (WMS 1.1) axis
|
||||
order against a WMS 1.3 service, resulting in corrupted maps. The second map shows how to correctly
|
||||
request a map in EPSG:4326 against a WMS 1.3 service.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenLayers WMTS Capabilities Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src="../lib/Firebug/firebug.js"></script>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="wmts-capabilities.js"></script>
|
||||
<style>
|
||||
.olControlAttribution {
|
||||
bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body onload="init();">
|
||||
<h1 id="title">Web Map Tile Service (WMTS) Capabilities Parsing</h1>
|
||||
|
||||
<p id="shortdesc">
|
||||
The WMTS Capabilities format allows for parsing of capabilities
|
||||
documents from OGC Web Map Tile Service (WMTS) version 1.0.0
|
||||
implementations.
|
||||
</p>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
<div id="docs">
|
||||
<p>
|
||||
This example creates an OpenLayers.Layer.WMTS layer to based
|
||||
on the results of parsing a capabilities doc with the
|
||||
OpenLayers.Format.WMTSCapabilities parser.
|
||||
</p><p>
|
||||
See the <a href="wmts-capabilities.js" target="_blank">
|
||||
wmts-capabilities.js source</a> to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,64 +0,0 @@
|
||||
OpenLayers.ProxyHost = "/proxy/?url=";
|
||||
|
||||
var map, format;
|
||||
|
||||
function init() {
|
||||
|
||||
format = new OpenLayers.Format.WMTSCapabilities({
|
||||
/**
|
||||
* This particular service is not in compliance with the WMTS spec and
|
||||
* is providing coordinates in y, x order regardless of the CRS. To
|
||||
* work around this, we can provide the format a table of CRS URN that
|
||||
* should be considered y, x order. These will extend the defaults on
|
||||
* the format.
|
||||
*/
|
||||
yx: {
|
||||
"urn:ogc:def:crs:EPSG::900913": true
|
||||
}
|
||||
});
|
||||
|
||||
OpenLayers.Request.GET({
|
||||
url: "http://v2.suite.opengeo.org/geoserver/gwc/service/wmts",
|
||||
params: {
|
||||
SERVICE: "WMTS",
|
||||
VERSION: "1.0.0",
|
||||
REQUEST: "GetCapabilities"
|
||||
},
|
||||
success: function(request) {
|
||||
var doc = request.responseXML;
|
||||
if (!doc || !doc.documentElement) {
|
||||
doc = request.responseText;
|
||||
}
|
||||
var capabilities = format.read(doc);
|
||||
var layer = format.createLayer(capabilities, {
|
||||
layer: "medford:buildings",
|
||||
matrixSet: "EPSG:900913",
|
||||
format: "image/png",
|
||||
opacity: 0.7,
|
||||
isBaseLayer: false
|
||||
});
|
||||
map.addLayer(layer);
|
||||
},
|
||||
failure: function() {
|
||||
alert("Trouble getting capabilities doc");
|
||||
OpenLayers.Console.error.apply(OpenLayers.Console, arguments);
|
||||
}
|
||||
})
|
||||
|
||||
map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
projection: "EPSG:900913",
|
||||
units: "m",
|
||||
maxExtent: new OpenLayers.Bounds(
|
||||
-20037508.34, -20037508.34, 20037508.34, 20037508.34
|
||||
),
|
||||
maxResolution: 156543.0339
|
||||
});
|
||||
|
||||
var osm = new OpenLayers.Layer.OSM();
|
||||
|
||||
map.addLayer(osm);
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
map.setCenter(new OpenLayers.LonLat(-13677832, 5213272), 13);
|
||||
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenLayers WMTS GetFeatureInfo Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src="../lib/Firebug/firebug.js"></script>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="wmts-getfeatureinfo.js"></script>
|
||||
<style>
|
||||
.olControlAttribution {
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
table.featureInfo, table.featureInfo td, table.featureInfo th {
|
||||
border: 1px solid #ddd;
|
||||
border-collapse: collapse;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 80%;
|
||||
padding: .1em .1em;
|
||||
}
|
||||
table.featureInfo th {
|
||||
padding: .2em .2em;
|
||||
font-weight: bold;
|
||||
background: #eee;
|
||||
}
|
||||
table.featureInfo td {
|
||||
background: #fff;
|
||||
}
|
||||
table.featureInfo tr.odd td {
|
||||
background: #eee;
|
||||
}
|
||||
table.featureInfo caption {
|
||||
text-align: left;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
padding: .1em .2em;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body onload="init();">
|
||||
<h1 id="title">WMTS GetFeatureInfo Control</h1>
|
||||
|
||||
<p id="shortdesc">
|
||||
The WMTSGetFeatureInfo control allows retrieval of information about
|
||||
features displayed in a WMTS layer.
|
||||
</p>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
<input id="drill" type="checkbox" checked="checked">
|
||||
<label for="drill">drill down</label>
|
||||
<div id="docs">
|
||||
<p>
|
||||
This example uses an OpenLayers.Control.WMTSGetFeatureInfo
|
||||
control layer to access information from WMTS layers. The
|
||||
control is activated and configured to request feature
|
||||
information when you click on the map. If the control's
|
||||
drillDown property is set to true, multiple layers can be
|
||||
queried.
|
||||
</p><p>
|
||||
See the <a href="wmts-getfeatureinfo.js" target="_blank">
|
||||
wmts-getfeatureinfo.js source</a> to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,99 +0,0 @@
|
||||
OpenLayers.ProxyHost = "/proxy/?url=";
|
||||
var map, control, popups = {};
|
||||
|
||||
function init() {
|
||||
|
||||
map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
projection: "EPSG:900913",
|
||||
units: "m",
|
||||
maxExtent: new OpenLayers.Bounds(
|
||||
-20037508.34, -20037508.34, 20037508.34, 20037508.34
|
||||
),
|
||||
maxResolution: 156543.0339
|
||||
});
|
||||
|
||||
var osm = new OpenLayers.Layer.OSM();
|
||||
|
||||
// If tile matrix identifiers differ from zoom levels (0, 1, 2, ...)
|
||||
// then they must be explicitly provided.
|
||||
var matrixIds = new Array(26);
|
||||
for (var i=0; i<26; ++i) {
|
||||
matrixIds[i] = "EPSG:900913:" + i;
|
||||
}
|
||||
|
||||
var zoning = new OpenLayers.Layer.WMTS({
|
||||
name: "zoning",
|
||||
url: "http://v2.suite.opengeo.org/geoserver/gwc/service/wmts/",
|
||||
layer: "medford:zoning",
|
||||
matrixSet: "EPSG:900913",
|
||||
matrixIds: matrixIds,
|
||||
format: "image/png",
|
||||
style: "_null",
|
||||
opacity: 0.7,
|
||||
isBaseLayer: false
|
||||
});
|
||||
var buildings = new OpenLayers.Layer.WMTS({
|
||||
name: "building",
|
||||
url: "http://v2.suite.opengeo.org/geoserver/gwc/service/wmts/",
|
||||
layer: "medford:buildings",
|
||||
matrixSet: "EPSG:900913",
|
||||
matrixIds: matrixIds,
|
||||
format: "image/png",
|
||||
style: "_null",
|
||||
isBaseLayer: false
|
||||
});
|
||||
|
||||
map.addLayers([osm, zoning, buildings]);
|
||||
|
||||
// create WMTS GetFeatureInfo control
|
||||
control = new OpenLayers.Control.WMTSGetFeatureInfo({
|
||||
drillDown: true,
|
||||
queryVisible: true,
|
||||
eventListeners: {
|
||||
getfeatureinfo: function(evt) {
|
||||
var text;
|
||||
var match = evt.text.match(/<body[^>]*>([\s\S]*)<\/body>/);
|
||||
if (match && !match[1].match(/^\s*$/)) {
|
||||
text = match[1];
|
||||
} else {
|
||||
text = "No " + evt.layer.name + " features in that area.<br>";
|
||||
}
|
||||
var popupId = evt.xy.x + "," + evt.xy.y;
|
||||
var popup = popups[popupId];
|
||||
if (!popup || !popup.map) {
|
||||
popup = new OpenLayers.Popup.FramedCloud(
|
||||
popupId,
|
||||
map.getLonLatFromPixel(evt.xy),
|
||||
null,
|
||||
" ",
|
||||
null,
|
||||
true,
|
||||
function(evt) {
|
||||
delete popups[this.id];
|
||||
this.hide();
|
||||
OpenLayers.Event.stop(evt);
|
||||
}
|
||||
);
|
||||
popups[popupId] = popup;
|
||||
map.addPopup(popup, true);
|
||||
}
|
||||
popup.setContentHTML(popup.contentHTML + text);
|
||||
popup.show();
|
||||
}
|
||||
}
|
||||
});
|
||||
map.addControl(control);
|
||||
control.activate();
|
||||
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
map.setCenter(new OpenLayers.LonLat(-13678519, 5212803), 15);
|
||||
|
||||
var drill = document.getElementById("drill");
|
||||
drill.checked = true;
|
||||
drill.onchange = function() {
|
||||
control.drillDown = drill.checked;
|
||||
};
|
||||
}
|
||||
|
||||
OpenLayers.Popup.FramedCloud.prototype.maxSize = new OpenLayers.Size(350, 200);
|
||||
@@ -1,36 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenLayers WMTS Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src="../lib/Firebug/firebug.js"></script>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="wmts.js"></script>
|
||||
<style>
|
||||
.olControlAttribution {
|
||||
bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body onload="init();">
|
||||
<h1 id="title">Web Map Tile Service (WMTS) Layer</h1>
|
||||
|
||||
<p id="shortdesc">
|
||||
The WMTS layer allows viewing of tiles from a server implementing
|
||||
the OGC Web Map Tile Service (WMTS) standard version 1.0.0.
|
||||
</p>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
<div id="docs">
|
||||
<p>
|
||||
This example uses an OpenLayers.Layer.WMTS layer to display
|
||||
cached tiles over an OSM layer in spherical mercator coordinates.
|
||||
</p><p>
|
||||
See the <a href="wmts.js" target="_blank">
|
||||
wmts.js source</a> to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,40 +0,0 @@
|
||||
var map;
|
||||
|
||||
function init() {
|
||||
|
||||
map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
projection: "EPSG:900913",
|
||||
units: "m",
|
||||
maxExtent: new OpenLayers.Bounds(
|
||||
-20037508.34, -20037508.34, 20037508.34, 20037508.34
|
||||
),
|
||||
maxResolution: 156543.0339
|
||||
});
|
||||
|
||||
var osm = new OpenLayers.Layer.OSM();
|
||||
|
||||
// If tile matrix identifiers differ from zoom levels (0, 1, 2, ...)
|
||||
// then they must be explicitly provided.
|
||||
var matrixIds = new Array(26);
|
||||
for (var i=0; i<26; ++i) {
|
||||
matrixIds[i] = "EPSG:900913:" + i;
|
||||
}
|
||||
|
||||
var wmts = new OpenLayers.Layer.WMTS({
|
||||
name: "Medford Buildings",
|
||||
url: "http://v2.suite.opengeo.org/geoserver/gwc/service/wmts/",
|
||||
layer: "medford:buildings",
|
||||
matrixSet: "EPSG:900913",
|
||||
matrixIds: matrixIds,
|
||||
format: "image/png",
|
||||
style: "_null",
|
||||
opacity: 0.7,
|
||||
isBaseLayer: false
|
||||
});
|
||||
|
||||
map.addLayers([osm, wmts]);
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
map.setCenter(new OpenLayers.LonLat(-13677832, 5213272), 13);
|
||||
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenLayers XYZ with Offset</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="xyz-offset.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">XYZ Layer with Offset</h1>
|
||||
|
||||
<div id="shortdesc">Using a limited set of levels from an XYZ layer with zoomOffset.</div>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
<div id="docs">
|
||||
<p>
|
||||
The XYZ layer allows a zoomOffset to be set if you want to have
|
||||
a maximum resolution for the map that differs from the maxiumum
|
||||
resolution of the cached tiles. This example uses only 6 of the
|
||||
levels in the cache, starting with the ninth level (index of 8)
|
||||
in the cache. To do this, the layer is constructed with a
|
||||
zoomOffset of 8. When the map zoom level is zero, the level
|
||||
with index 8 will be requested from the cache.
|
||||
</p>
|
||||
<p>
|
||||
See the <a href="xyz-offset.js" target="_blank">
|
||||
xyz-offset.js source</a> to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user