Compare commits
6 Commits
release-2.
...
release-2.
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
ed37a0c0bf | ||
|
|
78c2e7767b | ||
|
|
911393123e | ||
|
|
fcd2a62fa3 | ||
|
|
9a3db8c5b7 | ||
|
|
e846551c2c |
7
.gitignore
vendored
7
.gitignore
vendored
@@ -1,7 +0,0 @@
|
||||
/build/OpenLayers.js
|
||||
/tools/closure-compiler.jar
|
||||
/tools/*.pyc
|
||||
/apidoc_config/Data/
|
||||
/doc/apidocs/
|
||||
/examples/example-list.js
|
||||
/examples/example-list.xml
|
||||
@@ -48,6 +48,7 @@ SubTitle: JavaScript Mapping Library
|
||||
Group: OpenLayers {
|
||||
|
||||
File: OpenLayers (no auto-title, OpenLayers.js)
|
||||
File: Ajax (no auto-title, OpenLayers/Ajax.js)
|
||||
|
||||
Group: BaseTypes {
|
||||
|
||||
@@ -80,7 +81,9 @@ Group: OpenLayers {
|
||||
File: LayerSwitcher (no auto-title, OpenLayers/Control/LayerSwitcher.js)
|
||||
File: Measure (no auto-title, OpenLayers/Control/Measure.js)
|
||||
File: ModifyFeature (no auto-title, OpenLayers/Control/ModifyFeature.js)
|
||||
File: MouseDefaults (no auto-title, OpenLayers/Control/MouseDefaults.js)
|
||||
File: MousePosition (no auto-title, OpenLayers/Control/MousePosition.js)
|
||||
File: MouseToolbar (no auto-title, OpenLayers/Control/MouseToolbar.js)
|
||||
File: Navigation (no auto-title, OpenLayers/Control/Navigation.js)
|
||||
File: NavigationHistory (no auto-title, OpenLayers/Control/NavigationHistory.js)
|
||||
File: NavToolbar (no auto-title, OpenLayers/Control/NavToolbar.js)
|
||||
@@ -115,6 +118,7 @@ Group: OpenLayers {
|
||||
|
||||
File: Feature (no auto-title, OpenLayers/Feature.js)
|
||||
File: Vector (no auto-title, OpenLayers/Feature/Vector.js)
|
||||
File: WFS (no auto-title, OpenLayers/Feature/WFS.js)
|
||||
} # Group: Feature
|
||||
|
||||
Group: Filter {
|
||||
@@ -148,6 +152,9 @@ Group: OpenLayers {
|
||||
File: v1_1_0 (no auto-title, 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)
|
||||
@@ -156,24 +163,15 @@ Group: OpenLayers {
|
||||
File: v3 (no auto-title, OpenLayers/Format/GML/v3.js)
|
||||
} # Group: GML
|
||||
|
||||
Group: SLD {
|
||||
|
||||
File: SLD (no auto-title, OpenLayers/Format/SLD.js)
|
||||
File: v1 (no auto-title, OpenLayers/Format/SLD/v1.js)
|
||||
File: v1_0_0 (no auto-title, OpenLayers/Format/SLD/v1_0_0.js)
|
||||
} # Group: SLD
|
||||
|
||||
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: OGCExceptionReport (no auto-title, OpenLayers/Format/OGCExceptionReport.js)
|
||||
File: OSM (no auto-title, OpenLayers/Format/OSM.js)
|
||||
File: OWSCommon (no auto-title, OpenLayers/Format/OWSCommon.js)
|
||||
|
||||
Group: OWSCommon {
|
||||
|
||||
File: OWSCommon (no auto-title, OpenLayers/Format/OWSCommon.js)
|
||||
File: v1 (no auto-title, OpenLayers/Format/OWSCommon/v1.js)
|
||||
File: v1_0_0 (no auto-title, OpenLayers/Format/OWSCommon/v1_0_0.js)
|
||||
File: v1_1_0 (no auto-title, OpenLayers/Format/OWSCommon/v1_1_0.js)
|
||||
@@ -182,12 +180,19 @@ Group: OpenLayers {
|
||||
File: OWSContext (no auto-title, OpenLayers/Format/OWSContext.js)
|
||||
File: OWSContext.v0_3_1 (no auto-title, OpenLayers/Format/OWSContext/v0_3_1.js)
|
||||
File: QueryStringFilter (no auto-title, OpenLayers/Format/QueryStringFilter.js)
|
||||
|
||||
Group: SLD {
|
||||
|
||||
File: SLD (no auto-title, OpenLayers/Format/SLD.js)
|
||||
File: v1 (no auto-title, OpenLayers/Format/SLD/v1.js)
|
||||
File: v1_0_0 (no auto-title, OpenLayers/Format/SLD/v1_0_0.js)
|
||||
} # Group: SLD
|
||||
|
||||
File: SOSCapabilities (no auto-title, OpenLayers/Format/SOSCapabilities.js)
|
||||
File: SOSCapabilities.v1_0_0 (no auto-title, OpenLayers/Format/SOSCapabilities/v1_0_0.js)
|
||||
File: SOSGetFeatureOfInterest (no auto-title, OpenLayers/Format/SOSGetFeatureOfInterest.js)
|
||||
File: SOSGetObservation (no auto-title, OpenLayers/Format/SOSGetObservation.js)
|
||||
File: Text (no auto-title, OpenLayers/Format/Text.js)
|
||||
File: VersionedOGC (OpenLayers/Format/XML/VersionedOGC.js)
|
||||
File: WCSGetCoverage version 1.1.0 (no auto-title, OpenLayers/Format/WCSGetCoverage.js)
|
||||
File: WFS (no auto-title, OpenLayers/Format/WFS.js)
|
||||
|
||||
@@ -199,6 +204,8 @@ Group: OpenLayers {
|
||||
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)
|
||||
@@ -207,6 +214,8 @@ Group: OpenLayers {
|
||||
File: v1_1_0 (no auto-title, 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)
|
||||
@@ -233,8 +242,6 @@ Group: OpenLayers {
|
||||
File: v1_1 (no auto-title, OpenLayers/Format/WMSDescribeLayer/v1_1.js)
|
||||
} # Group: WMSDescribeLayer
|
||||
|
||||
File: WFSDescribeFeatureType (no auto-title, OpenLayers/Format/WFSDescribeFeatureType.js)
|
||||
File: WKT (no auto-title, OpenLayers/Format/WKT.js)
|
||||
File: WMSGetFeatureInfo (no auto-title, OpenLayers/Format/WMSGetFeatureInfo.js)
|
||||
File: WMTSCapabilities (no auto-title, OpenLayers/Format/WMTSCapabilities.js)
|
||||
File: WMTSCapabilities.v1_0_0 (no auto-title, OpenLayers/Format/WMTSCapabilities/v1_0_0.js)
|
||||
@@ -260,6 +267,7 @@ Group: OpenLayers {
|
||||
File: MultiPolygon (no auto-title, OpenLayers/Geometry/MultiPolygon.js)
|
||||
File: Point (no auto-title, OpenLayers/Geometry/Point.js)
|
||||
File: Polygon (no auto-title, OpenLayers/Geometry/Polygon.js)
|
||||
File: Rectangle (no auto-title, OpenLayers/Geometry/Rectangle.js)
|
||||
} # Group: Geometry
|
||||
|
||||
Group: Handler {
|
||||
@@ -280,6 +288,7 @@ Group: OpenLayers {
|
||||
} # Group: Handler
|
||||
|
||||
File: Icon (no auto-title, OpenLayers/Icon.js)
|
||||
File: Kinetic (no auto-title, OpenLayers/Kinetic.js)
|
||||
|
||||
Group: Lang {
|
||||
|
||||
@@ -319,7 +328,6 @@ Group: OpenLayers {
|
||||
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: pl (no auto-title, OpenLayers/Lang/pl.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)
|
||||
@@ -341,8 +349,10 @@ Group: OpenLayers {
|
||||
File: EventPane (no auto-title, OpenLayers/Layer/EventPane.js)
|
||||
File: FixedZoomLevels (no auto-title, OpenLayers/Layer/FixedZoomLevels.js)
|
||||
File: GeoRSS (no auto-title, OpenLayers/Layer/GeoRSS.js)
|
||||
File: GML (no auto-title, OpenLayers/Layer/GML.js)
|
||||
File: Google (no auto-title, OpenLayers/Layer/Google.js)
|
||||
File: Google.v3 (no auto-title, OpenLayers/Layer/Google/v3.js)
|
||||
File: GoogleNG (no auto-title, OpenLayers/Layer/GoogleNG.js)
|
||||
File: Grid (no auto-title, OpenLayers/Layer/Grid.js)
|
||||
File: HTTPRequest (no auto-title, OpenLayers/Layer/HTTPRequest.js)
|
||||
File: Image (no auto-title, OpenLayers/Layer/Image.js)
|
||||
@@ -350,8 +360,9 @@ Group: OpenLayers {
|
||||
File: KaMapCache (no auto-title, OpenLayers/Layer/KaMapCache.js)
|
||||
File: MapGuide (no auto-title, OpenLayers/Layer/MapGuide.js)
|
||||
File: MapServer (no auto-title, OpenLayers/Layer/MapServer.js)
|
||||
File: MapServer.Untiled (no auto-title, OpenLayers/Layer/MapServer/Untiled.js)
|
||||
File: Markers (no auto-title, OpenLayers/Layer/Markers.js)
|
||||
File: OSM (no auto-title, OpenLayers/Layer/OSM.js)
|
||||
File: MultiMap (no auto-title, OpenLayers/Layer/MultiMap.js)
|
||||
File: PointGrid (no auto-title, OpenLayers/Layer/PointGrid.js)
|
||||
File: PointTrack (no auto-title, OpenLayers/Layer/PointTrack.js)
|
||||
File: SphericalMercator (no auto-title, OpenLayers/Layer/SphericalMercator.js)
|
||||
@@ -360,10 +371,15 @@ Group: OpenLayers {
|
||||
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: 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: WMTS (no auto-title, OpenLayers/Layer/WMTS.js)
|
||||
File: WorldWind (no auto-title, OpenLayers/Layer/WorldWind.js)
|
||||
File: XYZ (no auto-title, OpenLayers/Layer/XYZ.js)
|
||||
File: Yahoo (no auto-title, OpenLayers/Layer/Yahoo.js)
|
||||
File: Zoomify (no auto-title, OpenLayers/Layer/Zoomify.js)
|
||||
} # Group: Layer
|
||||
|
||||
@@ -391,6 +407,12 @@ Group: OpenLayers {
|
||||
File: Protocol (no auto-title, OpenLayers/Protocol.js)
|
||||
File: HTTP (no auto-title, OpenLayers/Protocol/HTTP.js)
|
||||
|
||||
Group: SQL {
|
||||
|
||||
File: SQL (no auto-title, OpenLayers/Protocol/SQL.js)
|
||||
File: Gears (no auto-title, OpenLayers/Protocol/SQL/Gears.js)
|
||||
} # Group: SQL
|
||||
|
||||
Group: WFS {
|
||||
|
||||
File: WFS (no auto-title, OpenLayers/Protocol/WFS.js)
|
||||
@@ -409,7 +431,9 @@ Group: OpenLayers {
|
||||
File: Renderer (no auto-title, OpenLayers/Renderer.js)
|
||||
File: Canvas (no auto-title, OpenLayers/Renderer/Canvas.js)
|
||||
File: ElementsIndexer (no auto-title, OpenLayers/Renderer/Elements.js)
|
||||
File: NG (no auto-title, OpenLayers/Renderer/NG.js)
|
||||
File: SVG (no auto-title, OpenLayers/Renderer/SVG.js)
|
||||
File: SVG2 (no auto-title, OpenLayers/Renderer/SVG2.js)
|
||||
File: VML (no auto-title, OpenLayers/Renderer/VML.js)
|
||||
} # Group: Renderer
|
||||
|
||||
@@ -419,8 +443,8 @@ Group: OpenLayers {
|
||||
File: XMLHttpRequest (no auto-title, OpenLayers/Request/XMLHttpRequest.js)
|
||||
} # Group: Request
|
||||
|
||||
File: Rule (no auto-title, OpenLayers/Rule.js)
|
||||
File: SingleFile.js (no auto-title, OpenLayers/SingleFile.js)
|
||||
File: Rule (no auto-title, OpenLayers/Rule.js)
|
||||
|
||||
Group: Strategy {
|
||||
|
||||
@@ -451,13 +475,14 @@ Group: OpenLayers {
|
||||
Group: Tile {
|
||||
|
||||
File: Tile (no auto-title, OpenLayers/Tile.js)
|
||||
File: Google (no auto-title, OpenLayers/Tile/Google.js)
|
||||
File: Image (no auto-title, OpenLayers/Tile/Image.js)
|
||||
File: Image.IFrame (no auto-title, OpenLayers/Tile/Image/IFrame.js)
|
||||
File: WFS (no auto-title, OpenLayers/Tile/WFS.js)
|
||||
} # Group: Tile
|
||||
|
||||
File: Tween (no auto-title, OpenLayers/Tween.js)
|
||||
File: Util (no auto-title, OpenLayers/Util.js)
|
||||
File: Deprecated (no auto-title, deprecated.js)
|
||||
} # Group: OpenLayers
|
||||
|
||||
Group: Index {
|
||||
|
||||
@@ -41,6 +41,3 @@ The options available for compression are:
|
||||
* none
|
||||
None will leave the Javascript uncompressed.
|
||||
|
||||
|
||||
For more information on the build script and custom build profiles,
|
||||
see http://docs.openlayers.org/library/deploying.html
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
#!/usr/bin/env python
|
||||
|
||||
import sys
|
||||
import os
|
||||
sys.path.append("../tools")
|
||||
import mergejs
|
||||
import optparse
|
||||
@@ -14,9 +13,7 @@ def build(config_file = None, output_file = None, options = None):
|
||||
except ImportError:
|
||||
print "No jsmin"
|
||||
try:
|
||||
# tools/closure_library_jscompiler.py from:
|
||||
# http://code.google.com/p/closure-library/source/browse/trunk/closure/bin/build/jscompiler.py
|
||||
import closure_library_jscompiler as closureCompiler
|
||||
import closure
|
||||
have_compressor.append("closure")
|
||||
except Exception, E:
|
||||
print "No closure (%s)" % E
|
||||
@@ -51,57 +48,19 @@ def build(config_file = None, output_file = None, options = None):
|
||||
outputFilename = output_file
|
||||
|
||||
print "Merging libraries."
|
||||
try:
|
||||
if use_compressor == "closure":
|
||||
sourceFiles = mergejs.getNames(sourceDirectory, configFilename)
|
||||
else:
|
||||
merged = mergejs.run(sourceDirectory, None, configFilename)
|
||||
except mergejs.MissingImport, E:
|
||||
print "\nAbnormal termination."
|
||||
sys.exit("ERROR: %s" % E)
|
||||
|
||||
merged = mergejs.run(sourceDirectory, None, configFilename)
|
||||
print "Compressing using %s" % use_compressor
|
||||
if use_compressor == "jsmin":
|
||||
minimized = jsmin.jsmin(merged)
|
||||
elif use_compressor == "minimize":
|
||||
minimized = minimize.minimize(merged)
|
||||
elif use_compressor == "closure_ws":
|
||||
if len(merged) > 1000000: # The maximum file size for this web service is 1000 KB.
|
||||
print "\nPre-compressing using jsmin"
|
||||
merged = jsmin.jsmin(merged)
|
||||
print "\nIs being compressed using Closure Compiler Service."
|
||||
try:
|
||||
minimized = closure_ws.minimize(merged)
|
||||
except Exception, E:
|
||||
print "\nAbnormal termination."
|
||||
sys.exit("ERROR: Closure Compilation using Web service failed!\n%s" % E)
|
||||
if len(minimized) <= 2:
|
||||
print "\nAbnormal termination due to compilation errors."
|
||||
sys.exit("ERROR: Closure Compilation using Web service failed!")
|
||||
else:
|
||||
print "Closure Compilation using Web service has completed successfully."
|
||||
minimized = closure_ws.minimize(merged)
|
||||
elif use_compressor == "closure":
|
||||
jscompilerJar = "../tools/closure-compiler.jar"
|
||||
if not os.path.isfile(jscompilerJar):
|
||||
print "\nNo closure-compiler.jar; read README.txt!"
|
||||
sys.exit("ERROR: Closure Compiler \"%s\" does not exist! Read README.txt" % jscompilerJar)
|
||||
minimized = closureCompiler.Compile(
|
||||
jscompilerJar,
|
||||
sourceFiles, [
|
||||
"--externs", "closure-compiler/Externs.js",
|
||||
"--jscomp_warning", "checkVars", # To enable "undefinedVars"
|
||||
"--jscomp_error", "checkRegExp", # Also necessary to enable "undefinedVars"
|
||||
"--jscomp_error", "undefinedVars"
|
||||
]
|
||||
)
|
||||
if minimized is None:
|
||||
print "\nAbnormal termination due to compilation errors."
|
||||
sys.exit("ERROR: Closure Compilation failed! See compilation errors.")
|
||||
print "Closure Compilation has completed successfully."
|
||||
minimized = closure.minimize(merged)
|
||||
else: # fallback
|
||||
minimized = merged
|
||||
|
||||
print "\nAdding license file."
|
||||
print "Adding license file."
|
||||
minimized = file("license.txt").read() + minimized
|
||||
|
||||
print "Writing to %s." % outputFilename
|
||||
@@ -120,4 +79,4 @@ if __name__ == '__main__':
|
||||
elif len(args) == 2:
|
||||
build(args[0], args[1], options=options)
|
||||
else:
|
||||
print "Wrong number of arguments"
|
||||
print "Wrong number of arguments"
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
// ********************************************
|
||||
// This source file serves *ONLY* to avoid some compilation errors when the
|
||||
// compiler uses the flag:
|
||||
// --jscomp_error undefinedVars
|
||||
//
|
||||
// In this source are declared all variables from other programs that use
|
||||
// OpenLayers. This avoids the error of undefined variable for these names.
|
||||
//
|
||||
// NOTE: The compiler does not include externs files like this in the
|
||||
// compilation result.
|
||||
// ********************************************
|
||||
|
||||
// Used in lib/Firebug/firebug.js when gecko_dom
|
||||
var frames;
|
||||
|
||||
// Check the console when using Firebug Lite
|
||||
var console;
|
||||
|
||||
// Proj4js
|
||||
var Proj4js = {Proj: function(){}};
|
||||
|
||||
// Check JSON in lib/OpenLayers/Format/JSON.js
|
||||
var JSON = {};
|
||||
|
||||
// Google Maps
|
||||
var GMap2;
|
||||
var G_NORMAL_MAP;
|
||||
var GEvent;
|
||||
var GLatLngBounds = function(){};
|
||||
var GSize = function(x, y){};
|
||||
var GPoint = function(x, y){};
|
||||
var GLatLng = function(lat, lon){};
|
||||
|
||||
// Multimap
|
||||
var MultimapViewer = function(div){};
|
||||
var MMLatLon = function(lat, lon){};
|
||||
var MMPoint = function(x, y){};
|
||||
|
||||
//VirtualEarth
|
||||
var VEMap = function(name){};
|
||||
var VEPixel = function(x, y){};
|
||||
var VELatLong = function(lat, lon){};
|
||||
var Msn = {VE:{}};
|
||||
|
||||
// Yahoo
|
||||
var YMap = function(div, type, size){};
|
||||
var YGeoPoint = function(lat, lon){};
|
||||
var YCoordPoint = function(x, y){};
|
||||
var YSize = function(w, h){};
|
||||
|
||||
@@ -11,4 +11,3 @@
|
||||
Firebug
|
||||
OpenLayers.js
|
||||
OpenLayers/Lang
|
||||
deprecated.js
|
||||
|
||||
48
build/library.cfg
Normal file
48
build/library.cfg
Normal file
@@ -0,0 +1,48 @@
|
||||
# This file includes the OpenLayers code to create a build for everything that
|
||||
# does not require vector support.
|
||||
|
||||
[first]
|
||||
|
||||
[last]
|
||||
|
||||
[include]
|
||||
|
||||
[exclude]
|
||||
Firebug
|
||||
OpenLayers.js
|
||||
OpenLayers/Format/GeoRSS.js
|
||||
OpenLayers/Format/GML.js
|
||||
OpenLayers/Format/WKT.js
|
||||
OpenLayers/Format/KML.js
|
||||
OpenLayers/Format/WFS.js
|
||||
OpenLayers/Format.js
|
||||
OpenLayers/Handler/Path.js
|
||||
OpenLayers/Handler/Point.js
|
||||
OpenLayers/Handler/Polygon.js
|
||||
OpenLayers/Handler/Select.js
|
||||
OpenLayers/Geometry/Collection.js
|
||||
OpenLayers/Geometry/Curve.js
|
||||
OpenLayers/Geometry/LinearRing.js
|
||||
OpenLayers/Geometry/LineString.js
|
||||
OpenLayers/Geometry/MultiLineString.js
|
||||
OpenLayers/Geometry/MultiPoint.js
|
||||
OpenLayers/Geometry/MultiPolygon.js
|
||||
OpenLayers/Geometry/Point.js
|
||||
OpenLayers/Geometry/Polygon.js
|
||||
OpenLayers/Geometry/Rectangle.js
|
||||
OpenLayers/Geometry/Surface.js
|
||||
OpenLayers/Geometry.js
|
||||
OpenLayers/Layer/GML.js
|
||||
OpenLayers/Layer/Vector.js
|
||||
OpenLayers/Control/DrawFeature.js
|
||||
OpenLayers/Control/EditingToolbar.js
|
||||
OpenLayers/Control/SelectFeature.js
|
||||
OpenLayers/Feature/Vector.js
|
||||
OpenLayers/Renderer
|
||||
OpenLayers/Renderer/Elements.js
|
||||
OpenLayers/Renderer/SVG.js
|
||||
OpenLayers/Renderer/VML.js
|
||||
OpenLayers/Renderer.js
|
||||
OpenLayers/Lang
|
||||
|
||||
|
||||
@@ -13,6 +13,36 @@
|
||||
|
||||
*/
|
||||
|
||||
/* Contains portions of Prototype.js:
|
||||
*
|
||||
* Prototype JavaScript framework, version 1.4.0
|
||||
* (c) 2005 Sam Stephenson <sam@conio.net>
|
||||
*
|
||||
* Prototype is freely distributable under the terms of an MIT-style license.
|
||||
* For details, see the Prototype web site: http://prototype.conio.net/
|
||||
*
|
||||
*--------------------------------------------------------------------------*/
|
||||
|
||||
/**
|
||||
*
|
||||
* Contains portions of Rico <http://openrico.org/>
|
||||
*
|
||||
* Copyright 2005 Sabre Airline Solutions
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License"); you
|
||||
* may not use this file except in compliance with the License. You
|
||||
* may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
* implied. See the License for the specific language governing
|
||||
* permissions and limitations under the License.
|
||||
*
|
||||
**/
|
||||
|
||||
/**
|
||||
* Contains XMLHttpRequest.js <http://code.google.com/p/xmlhttprequest/>
|
||||
* Copyright 2007 Sergey Ilinsky (http://www.ilinsky.com)
|
||||
@@ -23,6 +53,44 @@
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* Contains portions of Gears <http://code.google.com/apis/gears/>
|
||||
*
|
||||
* Copyright 2007, Google Inc.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without
|
||||
* modification, are permitted provided that the following conditions are met:
|
||||
*
|
||||
* 1. Redistributions of source code must retain the above copyright notice,
|
||||
* this list of conditions and the following disclaimer.
|
||||
* 2. Redistributions in binary form must reproduce the above copyright notice,
|
||||
* this list of conditions and the following disclaimer in the documentation
|
||||
* and/or other materials provided with the distribution.
|
||||
* 3. Neither the name of Google Inc. nor the names of its contributors may be
|
||||
* used to endorse or promote products derived from this software without
|
||||
* specific prior written permission.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY THE AUTHOR ``AS IS'' AND ANY EXPRESS OR IMPLIED
|
||||
* WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO
|
||||
* EVENT SHALL THE AUTHOR BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
||||
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
|
||||
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
|
||||
* OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
|
||||
* WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
|
||||
* OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
|
||||
* ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*
|
||||
* Sets up google.gears.*, which is *the only* supported way to access Gears.
|
||||
*
|
||||
* Circumvent this file at your own risk!
|
||||
*
|
||||
* In the future, Gears may automatically define google.gears.* without this
|
||||
* file. Gears may use these objects to transparently fix bugs and compatibility
|
||||
* issues. Applications that use the code below will continue to work seamlessly
|
||||
* when that happens.
|
||||
*/
|
||||
|
||||
/**
|
||||
* OpenLayers.Util.pagePosition is based on Yahoo's getXY method, which is
|
||||
* Copyright (c) 2006, Yahoo! Inc.
|
||||
@@ -54,4 +122,4 @@
|
||||
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
|
||||
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
|
||||
* POSSIBILITY OF SUCH DAMAGE.
|
||||
*/
|
||||
*/
|
||||
@@ -1,32 +0,0 @@
|
||||
[first]
|
||||
|
||||
[last]
|
||||
|
||||
[include]
|
||||
OpenLayers/Map.js
|
||||
OpenLayers/Kinetic.js
|
||||
OpenLayers/Projection.js
|
||||
OpenLayers/Layer/Vector.js
|
||||
OpenLayers/Layer/OSM.js
|
||||
OpenLayers/Layer/Bing.js
|
||||
OpenLayers/Layer/WMS.js
|
||||
OpenLayers/Layer/Google/v3.js
|
||||
OpenLayers/Popup/FramedCloud.js
|
||||
OpenLayers/Control/Navigation.js
|
||||
OpenLayers/Control/Zoom.js
|
||||
OpenLayers/Control/Attribution.js
|
||||
OpenLayers/Control/SelectFeature.js
|
||||
OpenLayers/Control/Panel.js
|
||||
OpenLayers/Control/LayerSwitcher.js
|
||||
OpenLayers/Renderer/SVG.js
|
||||
OpenLayers/Renderer/VML.js
|
||||
OpenLayers/Format/GeoJSON.js
|
||||
OpenLayers/Protocol/HTTP.js
|
||||
OpenLayers/Strategy/Fixed.js
|
||||
OpenLayers/Strategy/BBOX.js
|
||||
OpenLayers/StyleMap.js
|
||||
OpenLayers/Rule.js
|
||||
OpenLayers/Filter/Comparison.js
|
||||
OpenLayers/Filter/Logical.js
|
||||
|
||||
[exclude]
|
||||
@@ -6,12 +6,13 @@
|
||||
OpenLayers/Map.js
|
||||
OpenLayers/Kinetic.js
|
||||
OpenLayers/Projection.js
|
||||
OpenLayers/Layer/OSM.js
|
||||
OpenLayers/Layer/SphericalMercator.js
|
||||
OpenLayers/Layer/XYZ.js
|
||||
OpenLayers/Layer/Bing.js
|
||||
OpenLayers/Layer/WMS.js
|
||||
OpenLayers/Control/TouchNavigation.js
|
||||
OpenLayers/Control/Geolocate.js
|
||||
OpenLayers/Control/Zoom.js
|
||||
OpenLayers/Control/ZoomPanel.js
|
||||
OpenLayers/Control/Attribution.js
|
||||
OpenLayers/Control/SelectFeature.js
|
||||
OpenLayers/Control/DrawFeature.js
|
||||
|
||||
96
doc/walkthru.html
Normal file
96
doc/walkthru.html
Normal file
@@ -0,0 +1,96 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenLayers examples walkthrough</title>
|
||||
<style type="text/css">
|
||||
a { color:blue; text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
</style>
|
||||
<base href="http://openlayers.org/dev/examples/">
|
||||
</head>
|
||||
<body style="font-family: sans-serif">
|
||||
<h1><pre style="font-size: larger"><ol></pre></h1>
|
||||
<p>API documentation: <a href="http://dev.openlayers.org/docs/">http://dev.openlayers.org/docs/</a></p>
|
||||
<p>Examples: <a href="http://dev.openlayers.org/examples/">http://openlayers.org/dev/examples/</a></p>
|
||||
<h2>Maps</h2>
|
||||
<ol>
|
||||
<li><a href="../examples/lite.html">Basic example</a></li>
|
||||
<li><a href="../examples/layerswitcher.html">Layer switcher (aka legend)</a></li>
|
||||
<li><a href="../examples/example.html">Base layers versus overlays</a></li>
|
||||
<li><a href="../examples/multiserver.html">Multiple WMS mirrors</a></li>
|
||||
<li><a href="../examples/fullScreen.html">Full screen map</a></li>
|
||||
<li><a href="../examples/wrapDateLine.html">Wrapping the date line</a></li>
|
||||
<li><a href="../examples/projected-map.html">Other cartographic projections</a></li>
|
||||
<li><a href="../examples/layer-opacity.html">Translucent overlays</a></li>
|
||||
</ol>
|
||||
|
||||
<h2>Raster Layers</h2>
|
||||
<ol>
|
||||
<li><a href="../examples/wms-untiled.html">Untiled WMS layer</a></li>
|
||||
<li><a href="../examples/kamap.html">Ka-Map layer</a></li>
|
||||
<li><a href="../examples/mapserver.html">MapServer layer</a></li>
|
||||
<li><a href="../examples/worldwind.html">Worldwind layer</a></li>
|
||||
<li><a href="../examples/tms.html">TMS layer</a></li>
|
||||
<li><a href="../examples/image-layer.html">Image layer</a></li>
|
||||
<li><a href="../examples/google.html">Google layer</a></li>
|
||||
<li><a href="../examples/ve.html">VirtualEarth layer</a></li>
|
||||
<li><a href="../examples/spherical-mercator.html">Spherical Mercator ("EPSG:900913")</a></li>
|
||||
<li><a href="http://tilecache.org/">TileCache</a></li>
|
||||
</ol>
|
||||
|
||||
<h2>Marker Layers</h2>
|
||||
<ol>
|
||||
<li><a href="../examples/markers.html">Markers</a></li>
|
||||
<li><a href="../examples/markerResize.html">Changing marker properties dynamically</a></li>
|
||||
<li><a href="../examples/popups.html">Popups</a></li>
|
||||
<li><a href="../examples/georss.html">GeoRSS</a> (<a href="georss.xml">example data</a>)</a></li>
|
||||
<li><a href="../examples/georss-markers.html">GeoRSS with custom markers</a></li>
|
||||
<li><a href="../examples/wfs.html">Point layer from WFS</a></li>
|
||||
<li><a href="../examples/getfeatureinfo.html">WFS GetFeatureInfo example</a></li>
|
||||
</ol>
|
||||
|
||||
<h2>Events and Controls</h2>
|
||||
<ol>
|
||||
<li><a href="../examples/navtoolbar.html">Navigation tools on the map</a></li>
|
||||
<li><a href="../examples/navtoolbar-outsidemap.html">Navigation toolbar off the map</a></li>
|
||||
<li><a href="../examples/mouse-position.html">Tracking the mouse position</a></li>
|
||||
<li><a href="../examples/overview.html">Overview map</a></li>
|
||||
<li><a href="../examples/attribution.html">Layer attribution</a></li>
|
||||
<li><a href="../examples/controls.html">Full range of controls</a></li>
|
||||
<li><a href="../examples/custom-control.html">Custom controls #1</a></li>
|
||||
<li><a href="../examples/custom-control.html">Custom controls #2</a></li>
|
||||
<li><a href="../examples/custom-style.html">Custom control styles</a></li>
|
||||
<li><a href="../examples/click.html">Trapping click events</a></li>
|
||||
<li><a href="../examples/layerLoadMonitoring.html">Tracking map events</a></li>
|
||||
</ol>
|
||||
|
||||
<h2>Vector Layers</h2>
|
||||
<ol>
|
||||
<li><a href="../examples/vector-features.html">Generating features in JavaScript</a></li>
|
||||
<li><a href="../examples/gml-layer.html">Loading features from GML</a></li>
|
||||
<li><a href="../examples/kml-layer.html">Loading features from KML</a></li>
|
||||
<li><a href="../examples/gml-serialize.html">Serializing features to GML</a></li>
|
||||
<li><a href="../examples/vector-formats.html">Serializing to other formats</a></li>
|
||||
<li><a href="../examples/select-feature.html">Selecting features</a></li>
|
||||
<li><a href="../examples/select-feature-openpopup.html">Attaching popups to features</a></li>
|
||||
</ol>
|
||||
|
||||
<h2>Editing Tools</h2>
|
||||
<ol>
|
||||
<li><a href="../examples/draw-feature.html">Drawing features</a></li>
|
||||
<li><a href="../examples/editingtoolbar.html">Editing toolbar</a> (<a href="editingtoolbar-outside.html">outside the map</a>)</li>
|
||||
<li><a href="../examples/regular-polygons.html">Creating regular polygons</a></li>
|
||||
<li><a href="../examples/modify-feature.html">Modifying features</a></li>
|
||||
<li><a href="../examples/resize-features.html">Resizing features</a></li>
|
||||
<li><a href="../examples/rotate-features.html">Rotating features</a></li>
|
||||
<li><a href="../examples/wfs-t.html">Transactional WFS example</a></li>
|
||||
<li><a href="http://featureserver.org/">FeatureServer</a></li>
|
||||
</ol>
|
||||
|
||||
<h2>Testing</h2>
|
||||
<ol>
|
||||
<li><a href="../tests/run-tests.html">Test.AnotherWay suite</a></li>
|
||||
</ol>
|
||||
|
||||
<h1><pre style="font-size: larger"></ol></pre></h1>
|
||||
</body>
|
||||
</html>
|
||||
@@ -48,6 +48,7 @@ SubTitle: JavaScript Mapping Library
|
||||
Group: OpenLayers {
|
||||
|
||||
File: OpenLayers (no auto-title, OpenLayers.js)
|
||||
File: Ajax (no auto-title, OpenLayers/Ajax.js)
|
||||
|
||||
Group: BaseTypes {
|
||||
|
||||
@@ -80,7 +81,9 @@ Group: OpenLayers {
|
||||
File: LayerSwitcher (no auto-title, OpenLayers/Control/LayerSwitcher.js)
|
||||
File: Measure (no auto-title, OpenLayers/Control/Measure.js)
|
||||
File: ModifyFeature (no auto-title, OpenLayers/Control/ModifyFeature.js)
|
||||
File: MouseDefaults (no auto-title, OpenLayers/Control/MouseDefaults.js)
|
||||
File: MousePosition (no auto-title, OpenLayers/Control/MousePosition.js)
|
||||
File: MouseToolbar (no auto-title, OpenLayers/Control/MouseToolbar.js)
|
||||
File: Navigation (no auto-title, OpenLayers/Control/Navigation.js)
|
||||
File: NavigationHistory (no auto-title, OpenLayers/Control/NavigationHistory.js)
|
||||
File: NavToolbar (no auto-title, OpenLayers/Control/NavToolbar.js)
|
||||
@@ -115,6 +118,7 @@ Group: OpenLayers {
|
||||
|
||||
File: Feature (no auto-title, OpenLayers/Feature.js)
|
||||
File: Vector (no auto-title, OpenLayers/Feature/Vector.js)
|
||||
File: WFS (no auto-title, OpenLayers/Feature/WFS.js)
|
||||
} # Group: Feature
|
||||
|
||||
Group: Filter {
|
||||
@@ -148,6 +152,9 @@ Group: OpenLayers {
|
||||
File: v1_1_0 (no auto-title, 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)
|
||||
@@ -156,24 +163,15 @@ Group: OpenLayers {
|
||||
File: v3 (no auto-title, OpenLayers/Format/GML/v3.js)
|
||||
} # Group: GML
|
||||
|
||||
Group: SLD {
|
||||
|
||||
File: SLD (no auto-title, OpenLayers/Format/SLD.js)
|
||||
File: v1 (no auto-title, OpenLayers/Format/SLD/v1.js)
|
||||
File: v1_0_0 (no auto-title, OpenLayers/Format/SLD/v1_0_0.js)
|
||||
} # Group: SLD
|
||||
|
||||
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: OGCExceptionReport (no auto-title, OpenLayers/Format/OGCExceptionReport.js)
|
||||
File: OSM (no auto-title, OpenLayers/Format/OSM.js)
|
||||
File: OWSCommon (no auto-title, OpenLayers/Format/OWSCommon.js)
|
||||
|
||||
Group: OWSCommon {
|
||||
|
||||
File: OWSCommon (no auto-title, OpenLayers/Format/OWSCommon.js)
|
||||
File: v1 (no auto-title, OpenLayers/Format/OWSCommon/v1.js)
|
||||
File: v1_0_0 (no auto-title, OpenLayers/Format/OWSCommon/v1_0_0.js)
|
||||
File: v1_1_0 (no auto-title, OpenLayers/Format/OWSCommon/v1_1_0.js)
|
||||
@@ -182,12 +180,19 @@ Group: OpenLayers {
|
||||
File: OWSContext (no auto-title, OpenLayers/Format/OWSContext.js)
|
||||
File: OWSContext.v0_3_1 (no auto-title, OpenLayers/Format/OWSContext/v0_3_1.js)
|
||||
File: QueryStringFilter (no auto-title, OpenLayers/Format/QueryStringFilter.js)
|
||||
|
||||
Group: SLD {
|
||||
|
||||
File: SLD (no auto-title, OpenLayers/Format/SLD.js)
|
||||
File: v1 (no auto-title, OpenLayers/Format/SLD/v1.js)
|
||||
File: v1_0_0 (no auto-title, OpenLayers/Format/SLD/v1_0_0.js)
|
||||
} # Group: SLD
|
||||
|
||||
File: SOSCapabilities (no auto-title, OpenLayers/Format/SOSCapabilities.js)
|
||||
File: SOSCapabilities.v1_0_0 (no auto-title, OpenLayers/Format/SOSCapabilities/v1_0_0.js)
|
||||
File: SOSGetFeatureOfInterest (no auto-title, OpenLayers/Format/SOSGetFeatureOfInterest.js)
|
||||
File: SOSGetObservation (no auto-title, OpenLayers/Format/SOSGetObservation.js)
|
||||
File: Text (no auto-title, OpenLayers/Format/Text.js)
|
||||
File: VersionedOGC (OpenLayers/Format/XML/VersionedOGC.js)
|
||||
File: WCSGetCoverage version 1.1.0 (no auto-title, OpenLayers/Format/WCSGetCoverage.js)
|
||||
File: WFS (no auto-title, OpenLayers/Format/WFS.js)
|
||||
|
||||
@@ -199,6 +204,8 @@ Group: OpenLayers {
|
||||
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)
|
||||
@@ -207,6 +214,8 @@ Group: OpenLayers {
|
||||
File: v1_1_0 (no auto-title, 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)
|
||||
@@ -233,8 +242,6 @@ Group: OpenLayers {
|
||||
File: v1_1 (no auto-title, OpenLayers/Format/WMSDescribeLayer/v1_1.js)
|
||||
} # Group: WMSDescribeLayer
|
||||
|
||||
File: WFSDescribeFeatureType (no auto-title, OpenLayers/Format/WFSDescribeFeatureType.js)
|
||||
File: WKT (no auto-title, OpenLayers/Format/WKT.js)
|
||||
File: WMSGetFeatureInfo (no auto-title, OpenLayers/Format/WMSGetFeatureInfo.js)
|
||||
File: WMTSCapabilities (no auto-title, OpenLayers/Format/WMTSCapabilities.js)
|
||||
File: WMTSCapabilities.v1_0_0 (no auto-title, OpenLayers/Format/WMTSCapabilities/v1_0_0.js)
|
||||
@@ -260,6 +267,7 @@ Group: OpenLayers {
|
||||
File: MultiPolygon (no auto-title, OpenLayers/Geometry/MultiPolygon.js)
|
||||
File: Point (no auto-title, OpenLayers/Geometry/Point.js)
|
||||
File: Polygon (no auto-title, OpenLayers/Geometry/Polygon.js)
|
||||
File: Rectangle (no auto-title, OpenLayers/Geometry/Rectangle.js)
|
||||
} # Group: Geometry
|
||||
|
||||
Group: Handler {
|
||||
@@ -319,7 +327,6 @@ Group: OpenLayers {
|
||||
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: pl (no auto-title, OpenLayers/Lang/pl.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)
|
||||
@@ -342,8 +349,10 @@ Group: OpenLayers {
|
||||
File: EventPane (no auto-title, OpenLayers/Layer/EventPane.js)
|
||||
File: FixedZoomLevels (no auto-title, OpenLayers/Layer/FixedZoomLevels.js)
|
||||
File: GeoRSS (no auto-title, OpenLayers/Layer/GeoRSS.js)
|
||||
File: GML (no auto-title, OpenLayers/Layer/GML.js)
|
||||
File: Google (no auto-title, OpenLayers/Layer/Google.js)
|
||||
File: Google.v3 (no auto-title, OpenLayers/Layer/Google/v3.js)
|
||||
File: GoogleNG (no auto-title, OpenLayers/Layer/GoogleNG.js)
|
||||
File: Grid (no auto-title, OpenLayers/Layer/Grid.js)
|
||||
File: HTTPRequest (no auto-title, OpenLayers/Layer/HTTPRequest.js)
|
||||
File: Image (no auto-title, OpenLayers/Layer/Image.js)
|
||||
@@ -351,7 +360,9 @@ Group: OpenLayers {
|
||||
File: KaMapCache (no auto-title, OpenLayers/Layer/KaMapCache.js)
|
||||
File: MapGuide (no auto-title, OpenLayers/Layer/MapGuide.js)
|
||||
File: MapServer (no auto-title, OpenLayers/Layer/MapServer.js)
|
||||
File: MapServer.Untiled (no auto-title, OpenLayers/Layer/MapServer/Untiled.js)
|
||||
File: Markers (no auto-title, OpenLayers/Layer/Markers.js)
|
||||
File: MultiMap (no auto-title, OpenLayers/Layer/MultiMap.js)
|
||||
File: PointGrid (no auto-title, OpenLayers/Layer/PointGrid.js)
|
||||
File: PointTrack (no auto-title, OpenLayers/Layer/PointTrack.js)
|
||||
File: SphericalMercator (no auto-title, OpenLayers/Layer/SphericalMercator.js)
|
||||
@@ -360,10 +371,15 @@ Group: OpenLayers {
|
||||
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: 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: WMTS (no auto-title, OpenLayers/Layer/WMTS.js)
|
||||
File: WorldWind (no auto-title, OpenLayers/Layer/WorldWind.js)
|
||||
File: XYZ (no auto-title, OpenLayers/Layer/XYZ.js)
|
||||
File: Yahoo (no auto-title, OpenLayers/Layer/Yahoo.js)
|
||||
File: Zoomify (no auto-title, OpenLayers/Layer/Zoomify.js)
|
||||
} # Group: Layer
|
||||
|
||||
@@ -391,6 +407,12 @@ Group: OpenLayers {
|
||||
File: Protocol (no auto-title, OpenLayers/Protocol.js)
|
||||
File: HTTP (no auto-title, OpenLayers/Protocol/HTTP.js)
|
||||
|
||||
Group: SQL {
|
||||
|
||||
File: SQL (no auto-title, OpenLayers/Protocol/SQL.js)
|
||||
File: Gears (no auto-title, OpenLayers/Protocol/SQL/Gears.js)
|
||||
} # Group: SQL
|
||||
|
||||
Group: WFS {
|
||||
|
||||
File: WFS (no auto-title, OpenLayers/Protocol/WFS.js)
|
||||
@@ -409,7 +431,9 @@ Group: OpenLayers {
|
||||
File: Renderer (no auto-title, OpenLayers/Renderer.js)
|
||||
File: Canvas (no auto-title, OpenLayers/Renderer/Canvas.js)
|
||||
File: ElementsIndexer (no auto-title, OpenLayers/Renderer/Elements.js)
|
||||
File: NG (no auto-title, OpenLayers/Renderer/NG.js)
|
||||
File: SVG (no auto-title, OpenLayers/Renderer/SVG.js)
|
||||
File: SVG2 (no auto-title, OpenLayers/Renderer/SVG2.js)
|
||||
File: VML (no auto-title, OpenLayers/Renderer/VML.js)
|
||||
} # Group: Renderer
|
||||
|
||||
@@ -419,8 +443,8 @@ Group: OpenLayers {
|
||||
File: XMLHttpRequest (no auto-title, OpenLayers/Request/XMLHttpRequest.js)
|
||||
} # Group: Request
|
||||
|
||||
File: Rule (no auto-title, OpenLayers/Rule.js)
|
||||
File: SingleFile.js (no auto-title, OpenLayers/SingleFile.js)
|
||||
File: Rule (no auto-title, OpenLayers/Rule.js)
|
||||
|
||||
Group: Strategy {
|
||||
|
||||
@@ -451,14 +475,14 @@ Group: OpenLayers {
|
||||
Group: Tile {
|
||||
|
||||
File: Tile (no auto-title, OpenLayers/Tile.js)
|
||||
File: Google (no auto-title, OpenLayers/Tile/Google.js)
|
||||
File: Image (no auto-title, OpenLayers/Tile/Image.js)
|
||||
File: Image.IFrame (no auto-title, OpenLayers/Tile/Image/IFrame.js)
|
||||
File: WFS (no auto-title, OpenLayers/Tile/WFS.js)
|
||||
} # Group: Tile
|
||||
|
||||
File: Tween (no auto-title, OpenLayers/Tween.js)
|
||||
File: Util (no auto-title, OpenLayers/Util.js)
|
||||
File: Spherical (no auto-title, OpenLayers/Spherical.js)
|
||||
File: Deprecated (no auto-title, deprecated.js)
|
||||
} # Group: OpenLayers
|
||||
|
||||
Group: Index {
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<script type="text/javascript">
|
||||
function parseData(req) {
|
||||
g = new OpenLayers.Format.KML({extractStyles: true});
|
||||
html = "";
|
||||
html = ""
|
||||
features = g.read(req.responseText);
|
||||
for(var feat in features) {
|
||||
html += "Feature: Geometry: "+ features[feat].geometry+",";
|
||||
@@ -18,7 +18,7 @@
|
||||
for (var j in features[feat].attributes) {
|
||||
html += "<li>Attribute "+j+":"+features[feat].attributes[j]+"</li>";
|
||||
}
|
||||
html += "</ul>";
|
||||
html += "</ul>"
|
||||
html += "<ul>";
|
||||
for (var j in features[feat].style) {
|
||||
html += "<li>Style "+j+":"+features[feat].style[j]+"</li>";
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<script type="text/javascript">
|
||||
function parseData(req) {
|
||||
format = new OpenLayers.Format.WMSDescribeLayer();
|
||||
html = "<br>";
|
||||
html = "<br>"
|
||||
resp = format.read(req.responseText);
|
||||
for(var i = 0; i < resp.length; i++) {
|
||||
html += "Layer: typeName: "+ resp[i].typeName+",";
|
||||
|
||||
@@ -1,69 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>Accessible Custom Click 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">
|
||||
<style type="text/css">
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
a em {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
a.api {
|
||||
font-size:1em;
|
||||
text-decoration:underline;
|
||||
}
|
||||
a.accesskey {
|
||||
color: white;
|
||||
}
|
||||
a.accesskey:focus {
|
||||
color: #436976;
|
||||
}
|
||||
a.zoom {
|
||||
padding-right: 20px;
|
||||
}
|
||||
</style>
|
||||
<script src="../lib/Firebug/firebug.js"></script>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="accessible-click-control.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">An accessible click control implementation</h1>
|
||||
|
||||
<div id="tags">
|
||||
click, control, accessibility
|
||||
</div>
|
||||
|
||||
<a class="accesskey"
|
||||
href=""
|
||||
accesskey="1"
|
||||
onclick="document.getElementById('map').focus();return false;">
|
||||
Jump to map
|
||||
</a>
|
||||
|
||||
<div id="map" class="smallmap" tabindex="0"></div>
|
||||
|
||||
<p id="desc">
|
||||
Demonstrate the KeyboardDefaults control as well as a control that
|
||||
allows clicking on the map using the keyboard.
|
||||
First focus the map (using tab key or mouse), then press the 'i'
|
||||
key to activate the query control. You can then move the point
|
||||
using arrow keys. Press 'RETURN' to get the coordinate. Press 'i'
|
||||
again to deactivate the control.
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,199 +0,0 @@
|
||||
var map, navigationControl, queryControl;
|
||||
|
||||
function init(){
|
||||
map = new OpenLayers.Map('map', {controls: []});
|
||||
var layer = new OpenLayers.Layer.WMS(
|
||||
"OpenLayers WMS",
|
||||
"http://vmap0.tiles.osgeo.org/wms/vmap0",
|
||||
{layers: 'basic'}
|
||||
);
|
||||
map.addLayers([layer]);
|
||||
|
||||
navigationControl = new OpenLayers.Control.KeyboardDefaults({
|
||||
observeElement: 'map'
|
||||
});
|
||||
map.addControl(navigationControl);
|
||||
|
||||
queryControl = new OpenLayers.Control.KeyboardClick({
|
||||
observeElement: 'map'
|
||||
});
|
||||
map.addControl(queryControl);
|
||||
|
||||
map.zoomToMaxExtent();
|
||||
}
|
||||
|
||||
/**
|
||||
* Class: OpenLayers.Control.KeyboardClick
|
||||
*
|
||||
* A custom control that (a) adds a vector point that can be moved using the
|
||||
* arrow keys of the keyboard, and (b) displays a browser alert window when the
|
||||
* RETURN key is pressed. The control can be activated/deactivated using the
|
||||
* "i" key. When activated the control deactivates any KeyboardDefaults control
|
||||
* in the map so that the map is not moved when the arrow keys are pressed.
|
||||
*
|
||||
* This control relies on the OpenLayers.Handler.KeyboardPoint custom handler.
|
||||
*/
|
||||
OpenLayers.Control.KeyboardClick = OpenLayers.Class(OpenLayers.Control, {
|
||||
initialize: function(options) {
|
||||
OpenLayers.Control.prototype.initialize.apply(this, [options]);
|
||||
var observeElement = this.observeElement || document;
|
||||
this.handler = new OpenLayers.Handler.KeyboardPoint(this, {
|
||||
done: this.onClick,
|
||||
cancel: this.deactivate
|
||||
}, {
|
||||
observeElement: observeElement
|
||||
});
|
||||
OpenLayers.Event.observe(
|
||||
observeElement,
|
||||
"keydown",
|
||||
OpenLayers.Function.bindAsEventListener(
|
||||
function(evt) {
|
||||
if (evt.keyCode == 73) { // "i"
|
||||
if (this.active) {
|
||||
this.deactivate();
|
||||
} else {
|
||||
this.activate();
|
||||
}
|
||||
}
|
||||
},
|
||||
this
|
||||
)
|
||||
);
|
||||
},
|
||||
|
||||
onClick: function(geometry) {
|
||||
alert("You clicked near " + geometry.x + " N, " +
|
||||
geometry.y + " E");
|
||||
},
|
||||
|
||||
activate: function() {
|
||||
if(!OpenLayers.Control.prototype.activate.apply(this, arguments)) {
|
||||
return false;
|
||||
}
|
||||
// deactivate any KeyboardDefaults control
|
||||
var keyboardDefaults = this.map.getControlsByClass(
|
||||
'OpenLayers.Control.KeyboardDefaults')[0];
|
||||
if (keyboardDefaults) {
|
||||
keyboardDefaults.deactivate();
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
deactivate: function() {
|
||||
if(!OpenLayers.Control.prototype.deactivate.apply(this, arguments)) {
|
||||
return false;
|
||||
}
|
||||
// reactivate any KeyboardDefaults control
|
||||
var keyboardDefaults = this.map.getControlsByClass(
|
||||
'OpenLayers.Control.KeyboardDefaults')[0];
|
||||
if (keyboardDefaults) {
|
||||
keyboardDefaults.activate();
|
||||
}
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Class: OpenLayers.Handler.KeyboardPoint
|
||||
*
|
||||
* A custom handler that displays a vector point that can be moved
|
||||
* using the arrow keys of the keyboard.
|
||||
*/
|
||||
OpenLayers.Handler.KeyboardPoint = OpenLayers.Class(OpenLayers.Handler, {
|
||||
|
||||
KEY_EVENTS: ["keydown"],
|
||||
|
||||
|
||||
initialize: function(control, callbacks, options) {
|
||||
OpenLayers.Handler.prototype.initialize.apply(this, arguments);
|
||||
// cache the bound event listener method so it can be unobserved later
|
||||
this.eventListener = OpenLayers.Function.bindAsEventListener(
|
||||
this.handleKeyEvent, this
|
||||
);
|
||||
},
|
||||
|
||||
activate: function() {
|
||||
if(!OpenLayers.Handler.prototype.activate.apply(this, arguments)) {
|
||||
return false;
|
||||
}
|
||||
this.layer = new OpenLayers.Layer.Vector(this.CLASS_NAME);
|
||||
this.map.addLayer(this.layer);
|
||||
this.observeElement = this.observeElement || document;
|
||||
for (var i=0, len=this.KEY_EVENTS.length; i<len; i++) {
|
||||
OpenLayers.Event.observe(
|
||||
this.observeElement, this.KEY_EVENTS[i], this.eventListener);
|
||||
}
|
||||
if(!this.point) {
|
||||
this.createFeature();
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
deactivate: function() {
|
||||
if (!OpenLayers.Handler.prototype.deactivate.apply(this, arguments)) {
|
||||
return false;
|
||||
}
|
||||
for (var i=0, len=this.KEY_EVENTS.length; i<len; i++) {
|
||||
OpenLayers.Event.stopObserving(
|
||||
this.observeElement, this.KEY_EVENTS[i], this.eventListener);
|
||||
}
|
||||
this.map.removeLayer(this.layer);
|
||||
this.destroyFeature();
|
||||
return true;
|
||||
},
|
||||
|
||||
handleKeyEvent: function (evt) {
|
||||
switch(evt.keyCode) {
|
||||
case OpenLayers.Event.KEY_LEFT:
|
||||
this.modifyFeature(-3, 0);
|
||||
break;
|
||||
case OpenLayers.Event.KEY_RIGHT:
|
||||
this.modifyFeature(3, 0);
|
||||
break;
|
||||
case OpenLayers.Event.KEY_UP:
|
||||
this.modifyFeature(0, 3);
|
||||
break;
|
||||
case OpenLayers.Event.KEY_DOWN:
|
||||
this.modifyFeature(0, -3);
|
||||
break;
|
||||
case OpenLayers.Event.KEY_RETURN:
|
||||
this.callback('done', [this.point.geometry.clone()]);
|
||||
break;
|
||||
case OpenLayers.Event.KEY_ESC:
|
||||
this.callback('cancel');
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
modifyFeature: function(lon, lat) {
|
||||
if(!this.point) {
|
||||
this.createFeature();
|
||||
}
|
||||
var resolution = this.map.getResolution();
|
||||
this.point.geometry.x = this.point.geometry.x + lon * resolution;
|
||||
this.point.geometry.y = this.point.geometry.y + lat * resolution;
|
||||
this.callback("modify", [this.point.geometry, this.point, false]);
|
||||
this.point.geometry.clearBounds();
|
||||
this.drawFeature();
|
||||
},
|
||||
|
||||
createFeature: function() {
|
||||
var center = this.map.getCenter();
|
||||
var geometry = new OpenLayers.Geometry.Point(
|
||||
center.lon, center.lat
|
||||
);
|
||||
this.point = new OpenLayers.Feature.Vector(geometry);
|
||||
this.callback("create", [this.point.geometry, this.point]);
|
||||
this.point.geometry.clearBounds();
|
||||
this.layer.addFeatures([this.point], {silent: true});
|
||||
},
|
||||
|
||||
destroyFeature: function() {
|
||||
this.layer.destroyFeatures([this.point]);
|
||||
this.point = null;
|
||||
},
|
||||
|
||||
drawFeature: function() {
|
||||
this.layer.drawFeature(this.point, this.style);
|
||||
}
|
||||
});
|
||||
@@ -1,130 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>Custom and accessible panel</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">
|
||||
|
||||
.olControlPanel button {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 2px;
|
||||
border: 1px solid;
|
||||
padding: 0 5px;
|
||||
border-radius: 4px;
|
||||
height: 35px;
|
||||
background-color: white;
|
||||
float: left;
|
||||
overflow: visible; /* needed to remove padding from buttons in IE */
|
||||
}
|
||||
.olControlPanel button span {
|
||||
padding-left: 25px;
|
||||
}
|
||||
.olControlPanel button span:first-child {
|
||||
padding-left: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
}
|
||||
.olControlPanel .olControlDrawFeatureItemActive span:first-child {
|
||||
background-image: url("../theme/default/img/draw_line_on.png");
|
||||
height: 22px;
|
||||
width: 24px;
|
||||
top: 5px;
|
||||
}
|
||||
.olControlPanel .olControlDrawFeatureItemInactive span:first-child {
|
||||
background-image: url("../theme/default/img/draw_line_off.png");
|
||||
height: 22px;
|
||||
width: 24px;
|
||||
top: 5px;
|
||||
}
|
||||
.olControlPanel .olControlZoomBoxItemInactive span:first-child {
|
||||
background-image: url("../img/drag-rectangle-off.png");
|
||||
height: 29px;
|
||||
width: 29px;
|
||||
top: 2px;
|
||||
}
|
||||
.olControlPanel .olControlZoomBoxItemActive span:first-child {
|
||||
background-image: url("../img/drag-rectangle-on.png");
|
||||
height: 29px;
|
||||
width: 29px;
|
||||
top: 2px;
|
||||
}
|
||||
.olControlPanel .olControlZoomToMaxExtentItemInactive span:first-child {
|
||||
background-image: url("../img/zoom-world-mini.png");
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
top: 8px;
|
||||
}
|
||||
.olControlPanel .navHistory span:first-child {
|
||||
background-image: url("../theme/default/img/navigation_history.png");
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
top: 4px;
|
||||
}
|
||||
.olControlPanel .navHistoryPreviousItemActive span:first-child {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.olControlPanel .navHistoryPreviousItemInactive span:first-child {
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
.olControlPanel .navHistoryNextItemActive span:first-child {
|
||||
background-position: -24px 0;
|
||||
}
|
||||
.olControlPanel .navHistoryNextItemInactive span:first-child {
|
||||
background-position: -24px -24px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="accessible-panel.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Custom and accessible panel</h1>
|
||||
<div id="tags">
|
||||
panels, CSS, style, accessibility, button
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
Create a custom and accessible panel, styled entirely with
|
||||
CSS.
|
||||
</p>
|
||||
<div id="panel"></div>
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
<div id="docs">
|
||||
|
||||
<p>An accessible panel:
|
||||
|
||||
<ul>
|
||||
<li>The buttons are actual HTML buttons. You can therefore
|
||||
use the TAB key to give the focus to the panel's buttons, and the "ENTER"
|
||||
key to activate or trigger the corresponding control.</li>
|
||||
<li>The buttons include text and titles (displayed when a button
|
||||
is hovered).</li>
|
||||
<li>If you remove colors from the page (for example using FireFox's <a
|
||||
href="https://addons.mozilla.org/en-US/firefox/addon/no-color/">No
|
||||
Color extension</a>) the buttons are still visible, and
|
||||
accessible using the keyboard.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<p>By default a panel creates buttons as divs. In this example the
|
||||
<code>createControlMarkup</code> panel function is overridden to create
|
||||
a more accessible markup for the buttons. See the <a
|
||||
href="accessible-panel.js" target="_blank"> accessible-panel.js
|
||||
source</a> to see how this is done.</p>
|
||||
|
||||
<p>Note: in IE 8, when a button is pressed its content shifts by 1 pixel.
|
||||
This is a <a
|
||||
href="http://labs.findsubstance.com/2009/05/21/ie8-form-button-with-background-image-on-click-css-bug/">known
|
||||
IE8 bug</a>, with known workarounds. No workaround is applied in this
|
||||
example though.</p>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,64 +0,0 @@
|
||||
var lon = 5;
|
||||
var lat = 40;
|
||||
var zoom = 5;
|
||||
var map, layer;
|
||||
|
||||
function init() {
|
||||
map = new OpenLayers.Map( 'map', { controls: [] } );
|
||||
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
|
||||
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
|
||||
map.addLayer(layer);
|
||||
|
||||
vlayer = new OpenLayers.Layer.Vector( "Editable" );
|
||||
map.addLayer(vlayer);
|
||||
|
||||
zb = new OpenLayers.Control.ZoomBox({
|
||||
title: "Zoom box: zoom clicking and dragging",
|
||||
text: "Zoom"
|
||||
});
|
||||
|
||||
var panel = new OpenLayers.Control.Panel({
|
||||
defaultControl: zb,
|
||||
createControlMarkup: function(control) {
|
||||
var button = document.createElement('button'),
|
||||
iconSpan = document.createElement('span'),
|
||||
textSpan = document.createElement('span');
|
||||
iconSpan.innerHTML = ' ';
|
||||
button.appendChild(iconSpan);
|
||||
if (control.text) {
|
||||
textSpan.innerHTML = control.text;
|
||||
}
|
||||
button.appendChild(textSpan);
|
||||
return button;
|
||||
}
|
||||
});
|
||||
|
||||
panel.addControls([
|
||||
zb,
|
||||
new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Path,
|
||||
{title:'Draw a feature', text: 'Draw'}),
|
||||
new OpenLayers.Control.ZoomToMaxExtent({
|
||||
title:"Zoom to the max extent",
|
||||
text: "World"
|
||||
})
|
||||
]);
|
||||
|
||||
nav = new OpenLayers.Control.NavigationHistory({
|
||||
previousOptions: {
|
||||
title: "Go to previous map position",
|
||||
text: "Prev"
|
||||
},
|
||||
nextOptions: {
|
||||
title: "Go to next map position",
|
||||
text: "Next"
|
||||
},
|
||||
displayClass: "navHistory"
|
||||
});
|
||||
// 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);
|
||||
}
|
||||
@@ -31,26 +31,13 @@
|
||||
font-size:1em;
|
||||
text-decoration:underline;
|
||||
}
|
||||
a.accesskey {
|
||||
color: white;
|
||||
}
|
||||
a.accesskey:focus {
|
||||
color: #436976;
|
||||
}
|
||||
a.zoom {
|
||||
padding-right: 20px;
|
||||
}
|
||||
</style>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map = null;
|
||||
function init(){
|
||||
var options = {
|
||||
controls: [
|
||||
new OpenLayers.Control.KeyboardDefaults({
|
||||
observeElement: 'map'
|
||||
})
|
||||
]
|
||||
controls: [new OpenLayers.Control.KeyboardDefaults()]
|
||||
};
|
||||
map = new OpenLayers.Map('map', options);
|
||||
var wms = new OpenLayers.Layer.WMS(
|
||||
@@ -70,37 +57,31 @@
|
||||
keyboard, pan, panning, zoom, zooming, accesskey
|
||||
</div>
|
||||
|
||||
<a class="accesskey"
|
||||
href=""
|
||||
accesskey="1"
|
||||
onclick="document.getElementById('map').focus(); return false;">
|
||||
Go to map
|
||||
</a>
|
||||
|
||||
<p id="shortdesc">
|
||||
Demonstrate the KeyboardDefaults control and how to use links
|
||||
with Access Keys to navigate the map with the keyboard.
|
||||
Demonstrate how to use the KeyboardDefaults option parameter for layer types.
|
||||
</p>
|
||||
|
||||
<a class="zoom"
|
||||
href="javascript: void map.zoomIn();"
|
||||
accesskey="i">
|
||||
zoom <em>i</em>n</a>
|
||||
<a class="zoom"
|
||||
href="javascript: void map.zoomOut();"
|
||||
accesskey="o">
|
||||
zoom <em>o</em>ut</a>
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td>
|
||||
<a href="javascript: void map.zoomOut();"
|
||||
accesskey="o">
|
||||
zoom <em>o</em>ut
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="javascript: void map.pan(0, -map.getSize().h / 4);"
|
||||
accesskey="n">
|
||||
pan <em>n</em>orth
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="javascript: void map.zoomIn();"
|
||||
accesskey="i">
|
||||
zoom <em>i</em>n
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
@@ -109,7 +90,7 @@
|
||||
pan <em>w</em>est
|
||||
</a>
|
||||
</td>
|
||||
<td id="map" class="smallmap" tabindex="0"></td>
|
||||
<td id="map" class="smallmap"></td>
|
||||
<td>
|
||||
<a href="javascript: void map.pan(map.getSize().w / 4, 0);"
|
||||
accesskey="e">
|
||||
@@ -132,9 +113,9 @@
|
||||
|
||||
<div id="docs">
|
||||
<p>Navigate the map in one of three ways:</p>
|
||||
<ol>
|
||||
<li>Use Access Key "1" (alt + 1) to focus the map element, and
|
||||
use following keys to pan and zoom:
|
||||
<ul>
|
||||
<li>Click on the named links to zoom and pan</li>
|
||||
<li>Use following keys to pan and zoom:
|
||||
<ul>
|
||||
<li>+ (zoom in)</li>
|
||||
<li>- (zoom out)</li>
|
||||
@@ -143,12 +124,8 @@
|
||||
<li>left-arrow (pan east)</li>
|
||||
<li>right-arrow (pan west)</li>
|
||||
</ul>
|
||||
See <a href=http://en.wikipedia.org/wiki/Access_key>wikipedia</a> for
|
||||
more detail about Access Keys.
|
||||
</li>
|
||||
<li>Navigate to pan and zoom links using the "tab" key, and
|
||||
press "enter" to pan and zoom</li>
|
||||
<li>If Access Keys work for links in your browser, use:
|
||||
<li>If access keys work for links in your browser, use:
|
||||
<ul>
|
||||
<li>i (zoom in)</li>
|
||||
<li>o (zoom out)</li>
|
||||
@@ -158,7 +135,7 @@
|
||||
<li>w (pan west)</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
</ul>
|
||||
<p>
|
||||
|
||||
This is an example of using alternate methods to control panning and zooming. This approach uses map.pan() and map.zoom(). You'll note that to pan, additional math is necessary along with map.size() in order to set the distance to pan.
|
||||
|
||||
@@ -8,14 +8,14 @@
|
||||
<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?v=3.6&sensor=false"></script>
|
||||
<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>
|
||||
<div id="tags">
|
||||
overlay, baselayer, google, osm, openstreetmap, light
|
||||
overlay, baselayer, google, osm, openstreetmap
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
Using the Google and OSM layers as overlays.
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
<body onload="init()">
|
||||
<h1 id="title">OpenLayers Overlays Only Example</h1>
|
||||
<div id="tags">
|
||||
overlay, baselayer, light
|
||||
overlay, baselayer
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
Demonstrates a map with overlays only.
|
||||
|
||||
@@ -131,14 +131,14 @@ Animator.prototype = {
|
||||
str += ">";
|
||||
return str;
|
||||
}
|
||||
};
|
||||
}
|
||||
// merge the properties of two objects
|
||||
Animator.applyDefaults = function(defaults, prefs) {
|
||||
prefs = prefs || {};
|
||||
var prop, result = {};
|
||||
for (prop in defaults) result[prop] = prefs[prop] !== undefined ? prefs[prop] : defaults[prop];
|
||||
return result;
|
||||
};
|
||||
}
|
||||
// make an array from any object
|
||||
Animator.makeArray = function(o) {
|
||||
if (o == null) return [];
|
||||
@@ -146,7 +146,7 @@ Animator.makeArray = function(o) {
|
||||
var result = [];
|
||||
for (var i=0; i<o.length; i++) result[i] = o[i];
|
||||
return result;
|
||||
};
|
||||
}
|
||||
// convert a dash-delimited-property to a camelCaseProperty (c/o Prototype, thanks Sam!)
|
||||
Animator.camelize = function(string) {
|
||||
var oStringList = string.split('-');
|
||||
@@ -161,27 +161,27 @@ Animator.camelize = function(string) {
|
||||
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
|
||||
}
|
||||
return camelizedString;
|
||||
};
|
||||
}
|
||||
// syntactic sugar for creating CSSStyleSubjects
|
||||
Animator.apply = function(el, style, options) {
|
||||
if (style instanceof Array) {
|
||||
return new Animator(options).addSubject(new CSSStyleSubject(el, style[0], style[1]));
|
||||
}
|
||||
return new Animator(options).addSubject(new CSSStyleSubject(el, style));
|
||||
};
|
||||
}
|
||||
// make a transition function that gradually accelerates. pass a=1 for smooth
|
||||
// gravitational acceleration, higher values for an exaggerated effect
|
||||
Animator.makeEaseIn = function(a) {
|
||||
return function(state) {
|
||||
return Math.pow(state, a*2);
|
||||
}
|
||||
};
|
||||
}
|
||||
// as makeEaseIn but for deceleration
|
||||
Animator.makeEaseOut = function(a) {
|
||||
return function(state) {
|
||||
return 1 - Math.pow(1 - state, a*2);
|
||||
}
|
||||
};
|
||||
}
|
||||
// make a transition function that, like an object with momentum being attracted to a point,
|
||||
// goes past the target then returns
|
||||
Animator.makeElastic = function(bounces) {
|
||||
@@ -189,7 +189,7 @@ Animator.makeElastic = function(bounces) {
|
||||
state = Animator.tx.easeInOut(state);
|
||||
return ((1-Math.cos(state * Math.PI * bounces)) * (1 - state)) + state;
|
||||
}
|
||||
};
|
||||
}
|
||||
// make an Attack Decay Sustain Release envelope that starts and finishes on the same level
|
||||
//
|
||||
Animator.makeADSR = function(attackEnd, decayEnd, sustainEnd, sustainLevel) {
|
||||
@@ -206,7 +206,7 @@ Animator.makeADSR = function(attackEnd, decayEnd, sustainEnd, sustainLevel) {
|
||||
}
|
||||
return sustainLevel * (1 - ((state - sustainEnd) / (1 - sustainEnd)));
|
||||
}
|
||||
};
|
||||
}
|
||||
// make a transition function that, like a ball falling to floor, reaches the target and/
|
||||
// bounces back again
|
||||
Animator.makeBounce = function(bounces) {
|
||||
@@ -215,7 +215,7 @@ Animator.makeBounce = function(bounces) {
|
||||
state = fn(state);
|
||||
return state <= 1 ? state : 2-state;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// pre-made transition functions to use with the 'transition' option
|
||||
Animator.tx = {
|
||||
@@ -233,7 +233,7 @@ Animator.tx = {
|
||||
veryElastic: Animator.makeElastic(3),
|
||||
bouncy: Animator.makeBounce(1),
|
||||
veryBouncy: Animator.makeBounce(3)
|
||||
};
|
||||
}
|
||||
|
||||
// animates a pixel-based style property between two integer values
|
||||
function NumericalStyleSubject(els, property, from, to, units) {
|
||||
@@ -271,7 +271,7 @@ NumericalStyleSubject.prototype = {
|
||||
inspect: function() {
|
||||
return "\t" + this.property + "(" + this.from + this.units + " to " + this.to + this.units + ")\n";
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// animates a colour based style property between two hex values
|
||||
function ColorStyleSubject(els, property, from, to) {
|
||||
@@ -313,7 +313,7 @@ ColorStyleSubject.prototype = {
|
||||
inspect: function() {
|
||||
return "\t" + this.property + "(" + this.origFrom + " to " + this.origTo + ")\n";
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// return a properly formatted 6-digit hex colour spec, or false
|
||||
ColorStyleSubject.parseColor = function(string) {
|
||||
@@ -336,14 +336,14 @@ ColorStyleSubject.parseColor = function(string) {
|
||||
return '#' + match[1];
|
||||
}
|
||||
return false;
|
||||
};
|
||||
}
|
||||
// convert a number to a 2 digit hex string
|
||||
ColorStyleSubject.toColorPart = function(number) {
|
||||
if (number > 255) number = 255;
|
||||
var digits = number.toString(16);
|
||||
if (number < 16) return '0' + digits;
|
||||
return digits;
|
||||
};
|
||||
}
|
||||
ColorStyleSubject.parseColor.rgbRe = /^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i;
|
||||
ColorStyleSubject.parseColor.hexRe = /^\#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
|
||||
|
||||
@@ -367,7 +367,7 @@ DiscreteStyleSubject.prototype = {
|
||||
inspect: function() {
|
||||
return "\t" + this.property + "(" + this.from + " to " + this.to + " @ " + this.threshold + ")\n";
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// animates between two styles defined using CSS.
|
||||
// if style1 and style2 are present, animate between them, if only style1
|
||||
@@ -482,7 +482,7 @@ CSSStyleSubject.prototype = {
|
||||
}
|
||||
return str;
|
||||
}
|
||||
};
|
||||
}
|
||||
// get the current value of a css property,
|
||||
CSSStyleSubject.getStyle = function(el, property){
|
||||
var style;
|
||||
@@ -497,7 +497,7 @@ CSSStyleSubject.getStyle = function(el, property){
|
||||
style = el.currentStyle[property];
|
||||
}
|
||||
return style || el.style[property]
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
CSSStyleSubject.ruleRe = /^\s*([a-zA-Z\-]+)\s*:\s*(\S(.+\S)?)\s*$/;
|
||||
@@ -604,7 +604,7 @@ AnimatorChain.prototype = {
|
||||
this.animators[this.current].seekTo(1);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// an Accordion is a class that creates and controls a number of Animators. An array of elements is passed in,
|
||||
// and for each element an Animator and a activator button is created. When an Animator's activator button is
|
||||
@@ -667,4 +667,4 @@ Accordion.prototype = {
|
||||
document.location.hash = this.rememberanceTexts[section];
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@@ -7,17 +7,20 @@
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="../lib/OpenLayers/Layer/ArcGISCache.js" type="text/javascript"></script>
|
||||
|
||||
<!-- This is to simplify making the JSONP request for this example -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var map,
|
||||
layerURL = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
|
||||
|
||||
function init() {
|
||||
var jsonp = new OpenLayers.Protocol.Script();
|
||||
jsonp.createRequest(layerURL, {
|
||||
f: 'json',
|
||||
pretty: 'true'
|
||||
}, initMap);
|
||||
var jsonp_url = layerURL + '?f=json&pretty=true&callback=?';
|
||||
$.getJSON(jsonp_url, function(data) {
|
||||
initMap(data);
|
||||
});
|
||||
}
|
||||
|
||||
function initMap(layerInfo){
|
||||
@@ -43,7 +46,8 @@
|
||||
resolutions: baseLayer.resolutions,
|
||||
numZoomLevels: baseLayer.numZoomLevels,
|
||||
tileSize: baseLayer.tileSize,
|
||||
displayProjection: baseLayer.displayProjection
|
||||
displayProjection: baseLayer.displayProjection,
|
||||
StartBounds: baseLayer.initialExtent
|
||||
});
|
||||
map.addLayers([baseLayer]);
|
||||
|
||||
@@ -89,7 +93,7 @@
|
||||
<p>
|
||||
This method automatically configures the layer using the capabilities object
|
||||
generated by the server itself. This page shows how to construct the url for the server capabilities object,
|
||||
retrieve it using JSONP, and pass it in during construction. Note that in this case,
|
||||
retrieve it using JSONP (and jQuery), and pass it in during construction. Note that in this case,
|
||||
the layer is constructed before the map. This approach greatly simplifies the
|
||||
configuration of your map, and works best when all your tiles / overlays are similarly laid out.
|
||||
If you are using a live AGS map server for your layer, it can be helpful to check your
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
<h1 id="title">Attribution Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
copyright, watermark, logo, attribution, light
|
||||
copyright, watermark, logo, attribution
|
||||
</div>
|
||||
|
||||
<p id="shortdesc">
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>Basic Bing Tiles with a Subset of Resolutions Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
<h1 id="title">Basic Bing Tiles Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
bing tiles, light
|
||||
bing tiles
|
||||
</div>
|
||||
|
||||
<div id="shortdesc">Use Bing with direct tile access</div>
|
||||
|
||||
@@ -7,37 +7,35 @@
|
||||
<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">
|
||||
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script>
|
||||
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script>
|
||||
|
||||
// API key for http://openlayers.org. Please get your own at
|
||||
// http://bingmapsportal.com/ and use that instead.
|
||||
var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
|
||||
var map;
|
||||
|
||||
function init() {
|
||||
|
||||
function init(){
|
||||
// setting restrictedExtent so that we can use the
|
||||
// VirtualEarth-layers, see e.g.
|
||||
// http://dev.openlayers.org/apidocs/files/OpenLayers/Layer/VirtualEarth-js.html
|
||||
var restrictedExtent = new OpenLayers.Bounds(-180, -90,
|
||||
180, 90);
|
||||
|
||||
map = new OpenLayers.Map("map");
|
||||
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
|
||||
var road = new OpenLayers.Layer.Bing({
|
||||
name: "Road",
|
||||
key: apiKey,
|
||||
type: "Road"
|
||||
var shaded = new OpenLayers.Layer.VirtualEarth("Shaded", {
|
||||
type: VEMapStyle.Shaded
|
||||
});
|
||||
var hybrid = new OpenLayers.Layer.Bing({
|
||||
name: "Hybrid",
|
||||
key: apiKey,
|
||||
type: "AerialWithLabels"
|
||||
var hybrid = new OpenLayers.Layer.VirtualEarth("Hybrid", {
|
||||
type: VEMapStyle.Hybrid
|
||||
});
|
||||
var aerial = new OpenLayers.Layer.Bing({
|
||||
name: "Aerial",
|
||||
key: apiKey,
|
||||
type: "Aerial"
|
||||
var aerial = new OpenLayers.Layer.VirtualEarth("Aerial", {
|
||||
type: VEMapStyle.Aerial
|
||||
});
|
||||
|
||||
map.addLayers([road, hybrid, aerial]);
|
||||
map.addLayers([shaded, hybrid, aerial]);
|
||||
|
||||
map.setCenter(new OpenLayers.LonLat(-110, 45), 3);
|
||||
}
|
||||
@@ -48,7 +46,7 @@
|
||||
<h1 id="title">Bing Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
Bing, Microsoft, Virtual Earth, light
|
||||
Bing, Microsoft, Virtual Earth
|
||||
</div>
|
||||
|
||||
<p id="shortdesc">
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
<h1 id="title">Boxes Example Vector</h1>
|
||||
|
||||
<div id="tags">
|
||||
box, vector, annotation, light
|
||||
box, vector, annotation
|
||||
</div>
|
||||
|
||||
<p id="shortdesc">
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
"http://vmap0.tiles.osgeo.org/wms/vmap0",
|
||||
{layers: 'basic'}, {'buffer':4} );
|
||||
map.addLayer(layer);
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher())
|
||||
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
|
||||
}
|
||||
</script>
|
||||
@@ -37,7 +37,7 @@
|
||||
<h1 id="title">Buffer Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
buffer, performance, tile, light
|
||||
buffer, performance, tile
|
||||
</div>
|
||||
|
||||
<p id="shortdesc">
|
||||
@@ -48,7 +48,7 @@
|
||||
|
||||
<div id="docs">
|
||||
Use the buffer property to control how many tiles are included
|
||||
outside the visible map area. Default is 0.
|
||||
outside the visible map area. Default is 2.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>OpenLayers Cache Read 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="cache-read.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Cache Read Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
mobile, local storage, persistence, cache, html5
|
||||
</div>
|
||||
|
||||
<div id="shortdesc">Caching viewed tiles</div>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="status"></div>
|
||||
<br>
|
||||
<div id="docs">
|
||||
<p>This example shows how to use the CacheRead control to fetch cached
|
||||
tiles from the browser's Local Storage. As you pan and zoom the map,
|
||||
you can see how the number of cache hits incrases as you browse regions
|
||||
that are available in the cache.</p>
|
||||
<p>To fill the cache with tiles, switch to the
|
||||
<a href="cache-write.html">cache-write.html</a> example.</p>
|
||||
<p>See <a href="cache-read.js">cache-read.js</a> for the source
|
||||
code.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,36 +0,0 @@
|
||||
var map, cacheRead;
|
||||
function init() {
|
||||
map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
projection: "EPSG:900913",
|
||||
layers: [
|
||||
new OpenLayers.Layer.WMS("OSGeo", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
|
||||
layers: "basic"
|
||||
}, {
|
||||
eventListeners: {
|
||||
tileloaded: updateHits
|
||||
}
|
||||
})
|
||||
],
|
||||
center: [0, 0],
|
||||
zoom: 1
|
||||
});
|
||||
cacheRead = new OpenLayers.Control.CacheRead();
|
||||
map.addControl(cacheRead);
|
||||
|
||||
|
||||
|
||||
// User interface
|
||||
var status = document.getElementById("status"),
|
||||
hits = 0;
|
||||
|
||||
// update the number of cached tiles and detect local storage support
|
||||
function updateHits(evt) {
|
||||
hits += evt.tile.url.substr(0, 5) === "data:";
|
||||
if (window.localStorage) {
|
||||
status.innerHTML = hits + " cache hits.";
|
||||
} else {
|
||||
status.innerHTML = "Local storage not supported. Try a different browser.";
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>OpenLayers Cache Write 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>OpenLayers.Console = window.console || OpenLayers.Console;</script>
|
||||
<script src="cache-write.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Cache Write Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
mobile, local storage, persistence, cache, html5
|
||||
</div>
|
||||
|
||||
<div id="shortdesc">Caching viewed tiles</div>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div>Cache status: <span id="status"></span></div>
|
||||
<div><button id="clear">Clear cache</button></div>
|
||||
<br>
|
||||
<div id="docs">
|
||||
<p>This example shows how to use the CacheWrite control to cache the
|
||||
tiles. Caching is turned on, and as you pan and zoom the map, every
|
||||
tile that is loaded is also copied to the browsers Local Storage.</p>
|
||||
<p>To use the cached tiles, switch to the
|
||||
<a href="cache-read.html">cache-read.html</a> example.</p>
|
||||
<p>See <a href="cache-write.js">cache-write.js</a> for the source
|
||||
code.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,48 +0,0 @@
|
||||
// Use proxy to get same origin URLs for tiles that don't support CORS.
|
||||
OpenLayers.ProxyHost = "proxy.cgi?url=";
|
||||
|
||||
var map, cacheWrite;
|
||||
|
||||
function init() {
|
||||
map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
projection: "EPSG:900913",
|
||||
layers: [
|
||||
new OpenLayers.Layer.WMS("OSGeo", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
|
||||
layers: "basic"
|
||||
}, {
|
||||
eventListeners: {
|
||||
tileloaded: updateStatus
|
||||
}
|
||||
})
|
||||
],
|
||||
center: [0, 0],
|
||||
zoom: 1
|
||||
});
|
||||
cacheWrite = new OpenLayers.Control.CacheWrite({
|
||||
autoActivate: true,
|
||||
imageFormat: "image/jpeg",
|
||||
eventListeners: {
|
||||
cachefull: function() { status.innerHTML = "Cache full."; }
|
||||
}
|
||||
});
|
||||
map.addControl(cacheWrite);
|
||||
|
||||
|
||||
|
||||
// User interface
|
||||
var status = document.getElementById("status");
|
||||
document.getElementById("clear").onclick = function() {
|
||||
OpenLayers.Control.CacheWrite.clearCache();
|
||||
updateStatus();
|
||||
};
|
||||
|
||||
// update the number of cached tiles and detect local storage support
|
||||
function updateStatus() {
|
||||
if (window.localStorage) {
|
||||
status.innerHTML = localStorage.length + " entries in cache.";
|
||||
} else {
|
||||
status.innerHTML = "Local storage not supported. Try a different browser.";
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<title>OpenLayers Canvas Hit Detection Example</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0;">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
|
||||
@@ -5,7 +5,12 @@ function init() {
|
||||
map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
projection: new OpenLayers.Projection("EPSG:900913"),
|
||||
displayProjection: new OpenLayers.Projection("EPSG:4326")
|
||||
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", {
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
|
||||
<div id="tags">
|
||||
click control, double, doubleclick, double-click, event, events,
|
||||
propagation, light
|
||||
propagation
|
||||
</div>
|
||||
|
||||
<p id="shortdesc">
|
||||
|
||||
@@ -1,72 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>OpenLayers Client Zoom 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="clientzoom.js"></script>
|
||||
<style>
|
||||
.olControlAttribution {
|
||||
bottom: 5px;
|
||||
}
|
||||
#map {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body onload="init();">
|
||||
<h1 id="title">Client Zoom</h1>
|
||||
<div id="tags">
|
||||
client zoom continuous zooming
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
|
||||
This example demonstrates the <strong>"client zoom"</strong>
|
||||
functionality, where OpenLayers stretches the layer div when the
|
||||
resolution is not supported by that layer's tile service.
|
||||
|
||||
</p>
|
||||
|
||||
<div id="map"></div>
|
||||
|
||||
<div id="docs">
|
||||
|
||||
<p>
|
||||
|
||||
The map of this example is configured with 22 resolutions, while
|
||||
the OSM tile server supports the first 19 resolutions only. When
|
||||
the zoom level is 19, 20 or 21 "client zoom" is applied to the OSM
|
||||
layer, i.e. the OSM layer div is stretched as necessary. The map's
|
||||
initial zoom is 18. So if you zoom in using the zoom bar's "+"
|
||||
button you'll effectively trigger "client zoom".
|
||||
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
||||
For demonstration purpose the map of this example has
|
||||
<code>fractionalZoom</code> set to true. So "client zoom" also
|
||||
applies if you choose arbitrary zoom levels using the slider of the
|
||||
zoom bar, or shift-drag boxes to zoom to arbitrary extents.
|
||||
"client zoom" therefore allows continous zooming for tiled layers.
|
||||
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
||||
Enabling "client zoom" on a layer is done by passing
|
||||
<code>serverResolutions</code> to the layer constructor.
|
||||
<code>serverResolutions</code> is the list of resolutions supported
|
||||
by the tile service. See the <a href="clientzoom.js"
|
||||
target="_blank"> clientzoom.js source</a>.
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,39 +0,0 @@
|
||||
var map;
|
||||
|
||||
function init() {
|
||||
|
||||
map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
projection: "EPSG:900913",
|
||||
controls: [],
|
||||
fractionalZoom: true
|
||||
});
|
||||
|
||||
var osm = new OpenLayers.Layer.OSM(null, null, {
|
||||
resolutions: [156543.03390625, 78271.516953125, 39135.7584765625,
|
||||
19567.87923828125, 9783.939619140625, 4891.9698095703125,
|
||||
2445.9849047851562, 1222.9924523925781, 611.4962261962891,
|
||||
305.74811309814453, 152.87405654907226, 76.43702827453613,
|
||||
38.218514137268066, 19.109257068634033, 9.554628534317017,
|
||||
4.777314267158508, 2.388657133579254, 1.194328566789627,
|
||||
0.5971642833948135, 0.25, 0.1, 0.05],
|
||||
serverResolutions: [156543.03390625, 78271.516953125, 39135.7584765625,
|
||||
19567.87923828125, 9783.939619140625,
|
||||
4891.9698095703125, 2445.9849047851562,
|
||||
1222.9924523925781, 611.4962261962891,
|
||||
305.74811309814453, 152.87405654907226,
|
||||
76.43702827453613, 38.218514137268066,
|
||||
19.109257068634033, 9.554628534317017,
|
||||
4.777314267158508, 2.388657133579254,
|
||||
1.194328566789627, 0.5971642833948135],
|
||||
transitionEffect: 'resize'
|
||||
});
|
||||
|
||||
map.addLayers([osm]);
|
||||
map.addControls([
|
||||
new OpenLayers.Control.Navigation(),
|
||||
new OpenLayers.Control.Attribution(),
|
||||
new OpenLayers.Control.PanZoomBar()
|
||||
]);
|
||||
map.setCenter(new OpenLayers.LonLat(659688.852138, 5710701.2962197), 18);
|
||||
}
|
||||
@@ -8,16 +8,6 @@
|
||||
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
|
||||
<style>
|
||||
/* round corners of layer switcher, and make it transparent */
|
||||
.olControlLayerSwitcher .layersDiv {
|
||||
border-radius: 10px 0 0 10px;
|
||||
opacity: 0.75;
|
||||
filter: alpha(opacity=75);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map;
|
||||
|
||||
@@ -37,7 +37,7 @@ var map = new OpenLayers.Map({
|
||||
function loadFeatures(data) {
|
||||
var features = new OpenLayers.Format.GeoJSON().read(data);
|
||||
states.addFeatures(features);
|
||||
}
|
||||
};
|
||||
|
||||
// update filter and redraw when form is submitted
|
||||
var cql = document.getElementById("cql");
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenLayers Script Protocol XML Example</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="title">Script Protocol With XML</h1>
|
||||
<div id="tags">
|
||||
protocol, script, cross origin, xml, advanced
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
Demonstrates how, with a custom parseFeatures method, the script protocol can be used with YQL for cross-origin loading of files in any of the XML formats supported by OpenLayers.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
<p>
|
||||
YQL can wrap a jsonp callback around an XML file, which effectively means Yahoo's servers are acting as a proxy for cross-origin feature loading. This example uses a GPX file, but the same technique can be used for other formats such as KML.
|
||||
</p>
|
||||
<p>
|
||||
View the <a href="cross-origin-xml.js" target="_blank">cross-origin-xml.js</a>
|
||||
source to see how this is done
|
||||
</p>
|
||||
</div>
|
||||
<script src="cross-origin-xml.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,25 +0,0 @@
|
||||
var map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
layers: [
|
||||
new OpenLayers.Layer.OSM(),
|
||||
new OpenLayers.Layer.Vector("Vectors", {
|
||||
projection: new OpenLayers.Projection("EPSG:4326"),
|
||||
strategies: [new OpenLayers.Strategy.Fixed()],
|
||||
protocol: new OpenLayers.Protocol.Script({
|
||||
url: "http://query.yahooapis.com/v1/public/yql",
|
||||
params: {
|
||||
q: "select * from xml where url='http://www.topografix.com/fells_loop.gpx'"
|
||||
},
|
||||
format: new OpenLayers.Format.GPX(),
|
||||
parseFeatures: function(data) {
|
||||
return this.format.read(data.results[0]);
|
||||
}
|
||||
}),
|
||||
eventListeners: {
|
||||
"featuresadded": function () {
|
||||
this.map.zoomToExtent(this.getDataExtent());
|
||||
}
|
||||
}
|
||||
})
|
||||
]
|
||||
});
|
||||
@@ -50,7 +50,7 @@
|
||||
<h1 id="title">Custom Control Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
control, panel, rectangle, light
|
||||
control, panel, rectangle
|
||||
</div>
|
||||
|
||||
<p id="shortdesc">
|
||||
|
||||
@@ -31,7 +31,7 @@ function updateOutput(event) {
|
||||
map.layers[1].events.on({
|
||||
sketchmodified: updateOutput,
|
||||
sketchcomplete: updateOutput
|
||||
});
|
||||
})
|
||||
|
||||
// add behavior to UI elements
|
||||
function toggleControl(element) {
|
||||
|
||||
38
examples/doubleSetCenter.html
Normal file
38
examples/doubleSetCenter.html
Normal file
@@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>OpenLayers Double Set Center Example</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">
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="title">Double Set Center Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
center, centering, cleanup
|
||||
</div>
|
||||
|
||||
<p id="shortdesc">
|
||||
Demonstrate the behavior of two calls to set the center after instantiating the layer object.
|
||||
</p>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
<script defer="defer" type="text/javascript">
|
||||
var map = new OpenLayers.Map('map');
|
||||
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
|
||||
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
|
||||
map.addLayer(wms);
|
||||
map.setCenter(new OpenLayers.LonLat(100,10));
|
||||
map.setCenter(new OpenLayers.LonLat(1,1));
|
||||
</script>
|
||||
|
||||
<div id="docs"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -33,27 +33,18 @@
|
||||
var pointLayer = new OpenLayers.Layer.Vector("Point Layer");
|
||||
var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
|
||||
var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
|
||||
var boxLayer = new OpenLayers.Layer.Vector("Box layer");
|
||||
|
||||
map.addLayers([wmsLayer, pointLayer, lineLayer, polygonLayer, boxLayer]);
|
||||
map.addLayers([wmsLayer, pointLayer, lineLayer, polygonLayer]);
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
map.addControl(new OpenLayers.Control.MousePosition());
|
||||
|
||||
drawControls = {
|
||||
point: new OpenLayers.Control.DrawFeature(pointLayer,
|
||||
OpenLayers.Handler.Point),
|
||||
OpenLayers.Handler.Point),
|
||||
line: new OpenLayers.Control.DrawFeature(lineLayer,
|
||||
OpenLayers.Handler.Path),
|
||||
OpenLayers.Handler.Path),
|
||||
polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
|
||||
OpenLayers.Handler.Polygon),
|
||||
box: new OpenLayers.Control.DrawFeature(boxLayer,
|
||||
OpenLayers.Handler.RegularPolygon, {
|
||||
handlerOptions: {
|
||||
sides: 4,
|
||||
irregular: true
|
||||
}
|
||||
}
|
||||
)
|
||||
OpenLayers.Handler.Polygon)
|
||||
};
|
||||
|
||||
for(var key in drawControls) {
|
||||
@@ -89,11 +80,11 @@
|
||||
<h1 id="title">OpenLayers Draw Feature Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
point, line, linestring, polygon, box, digitizing, geometry, draw, drag
|
||||
point, line, linestring, polygon, digitizing, geometry, draw, drag
|
||||
</div>
|
||||
|
||||
<p id="shortdesc">
|
||||
Demonstrate on-screen digitizing tools for point, line, polygon and box creation.
|
||||
Demonstrate on-screen digitizing tools for point, line, and polygon creation.
|
||||
</p>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
@@ -116,10 +107,6 @@
|
||||
<input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
|
||||
<label for="polygonToggle">draw polygon</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="type" value="box" id="boxToggle" onclick="toggleControl(this);" />
|
||||
<label for="boxToggle">draw box</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" name="allow-pan" value="allow-pan" id="allowPanCheckbox" checked=true onclick="allowPan(this);" />
|
||||
<label for="allowPanCheckbox">allow pan while drawing</label>
|
||||
@@ -132,8 +119,6 @@
|
||||
Double-click to finish drawing.</p>
|
||||
<p>With the polygon drawing control active, click on the map to add the points that make up your
|
||||
polygon. Double-click to finish drawing.</p>
|
||||
<p>With the box drawing control active, click in the map and drag the mouse to get a rectangle. Release
|
||||
the mouse to finish.</p>
|
||||
<p>With any drawing control active, paning the map can still be achieved. Drag the map as
|
||||
usual for that.</p>
|
||||
<p>Hold down the shift key while drawing to activate freehand mode. While drawing lines or polygons
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<title>OpenLayers Undo/Redo Drawing Methods</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0;">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<title>OpenLayers Editing Methods</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0;">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
|
||||
@@ -29,7 +29,7 @@ $("insertXY").onclick = function() {
|
||||
if (values != null) {
|
||||
draw.insertXY(values[0], values[1]);
|
||||
}
|
||||
};
|
||||
}
|
||||
$("insertDeltaXY").onclick = function() {
|
||||
var values = parseInput(
|
||||
window.prompt(
|
||||
@@ -39,7 +39,7 @@ $("insertDeltaXY").onclick = function() {
|
||||
if (values != null) {
|
||||
draw.insertDeltaXY(values[0], values[1]);
|
||||
}
|
||||
};
|
||||
}
|
||||
$("insertDirectionLength").onclick = function() {
|
||||
var values = parseInput(
|
||||
window.prompt(
|
||||
@@ -49,7 +49,7 @@ $("insertDirectionLength").onclick = function() {
|
||||
if (values != null) {
|
||||
draw.insertDirectionLength(values[0], values[1]);
|
||||
}
|
||||
};
|
||||
}
|
||||
$("insertDeflectionLength").onclick = function() {
|
||||
var values = parseInput(
|
||||
window.prompt(
|
||||
@@ -59,13 +59,13 @@ $("insertDeflectionLength").onclick = function() {
|
||||
if (values != null) {
|
||||
draw.insertDeflectionLength(values[0], values[1]);
|
||||
}
|
||||
};
|
||||
}
|
||||
$("cancel").onclick = function() {
|
||||
draw.cancel();
|
||||
};
|
||||
}
|
||||
$("finishSketch").onclick = function() {
|
||||
draw.finishSketch();
|
||||
};
|
||||
}
|
||||
|
||||
function parseInput(text) {
|
||||
var values = text.split(",");
|
||||
@@ -80,4 +80,4 @@ function parseInput(text) {
|
||||
}
|
||||
}
|
||||
return values;
|
||||
}
|
||||
}
|
||||
@@ -64,7 +64,7 @@
|
||||
}
|
||||
.ex_classes{
|
||||
font-size: .7em;
|
||||
color: gray;
|
||||
color: grey;
|
||||
display: none;
|
||||
}
|
||||
#toc {
|
||||
@@ -169,7 +169,7 @@
|
||||
var words = text.split(/\W+/);
|
||||
var scores = {};
|
||||
for(var i=0; i<words.length; ++i) {
|
||||
var word = words[i].toLowerCase();
|
||||
var word = words[i].toLowerCase()
|
||||
var dict = info.index[word];
|
||||
var updateScores = function() {
|
||||
for(exIndex in dict) {
|
||||
@@ -185,7 +185,7 @@
|
||||
scores[exIndex][word] = count;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
if(dict) {
|
||||
updateScores();
|
||||
} else {
|
||||
@@ -255,7 +255,7 @@
|
||||
template = new jugl.Template("template");
|
||||
target = document.getElementById("examples");
|
||||
listExamples(info.examples);
|
||||
document.getElementById("keywords").onkeyup = inputChange;
|
||||
document.getElementById("keywords").onkeyup = inputChange
|
||||
parseQuery();
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="title">OpenLayers Example</h1>
|
||||
<div id="tags">simple, basic, light</div>
|
||||
<div id="tags">simple, basic</div>
|
||||
<p id="shortdesc">
|
||||
Demonstrate a simple map with an overlay that includes layer switching controls.
|
||||
</p>
|
||||
|
||||
@@ -20,11 +20,11 @@ function startAnimation() {
|
||||
filter.lowerBoundary = currentDate;
|
||||
filter.upperBoundary = new Date(currentDate.getTime() + (span * 1000));
|
||||
filterStrategy.setFilter(filter);
|
||||
currentDate = new Date(currentDate.getTime() + (step * 1000));
|
||||
currentDate = new Date(currentDate.getTime() + (step * 1000))
|
||||
} else {
|
||||
stopAnimation(true);
|
||||
}
|
||||
};
|
||||
}
|
||||
animationTimer = window.setInterval(next, interval * 1000);
|
||||
}
|
||||
|
||||
|
||||
@@ -25,8 +25,9 @@
|
||||
}
|
||||
</style>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="fullScreen.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="init()">
|
||||
<div id="map"></div>
|
||||
|
||||
<div id="text">
|
||||
@@ -37,7 +38,7 @@
|
||||
</div>
|
||||
|
||||
<p id="shortdesc">
|
||||
Demonstrate a map that fills the entire browser window.
|
||||
Demonstrate a map that fill the entire browser window.
|
||||
</p>
|
||||
|
||||
<div id="docs">
|
||||
@@ -47,7 +48,6 @@
|
||||
<a href="fullScreen.js" target="_blank">fullScreen.js source</a>
|
||||
to see how this is done.</p>
|
||||
</div>
|
||||
<script src="fullScreen.js"></script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,30 +1,15 @@
|
||||
var urls = [
|
||||
"http://a.tile.openstreetmap.org/${z}/${x}/${y}.png",
|
||||
"http://b.tile.openstreetmap.org/${z}/${x}/${y}.png",
|
||||
"http://c.tile.openstreetmap.org/${z}/${x}/${y}.png"
|
||||
];
|
||||
var map;
|
||||
function init(){
|
||||
map = new OpenLayers.Map('map');
|
||||
|
||||
var map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
layers: [
|
||||
new OpenLayers.Layer.XYZ("OSM (with buffer)", urls, {
|
||||
transitionEffect: "resize", buffer: 2, sphericalMercator: true
|
||||
}),
|
||||
new OpenLayers.Layer.XYZ("OSM (without buffer)", urls, {
|
||||
transitionEffect: "resize", buffer: 0, sphericalMercator: true
|
||||
})
|
||||
],
|
||||
controls: [
|
||||
new OpenLayers.Control.Navigation({
|
||||
dragPanOptions: {
|
||||
enableKinetic: true
|
||||
}
|
||||
}),
|
||||
new OpenLayers.Control.PanZoom(),
|
||||
new OpenLayers.Control.Attribution()
|
||||
],
|
||||
center: [0, 0],
|
||||
zoom: 3
|
||||
});
|
||||
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
|
||||
"http://vmap0.tiles.osgeo.org/wms/vmap0",
|
||||
{layers: 'basic'} );
|
||||
var ol_wms_nobuffer = new OpenLayers.Layer.WMS( "OpenLayers WMS (no tile buffer)",
|
||||
"http://vmap0.tiles.osgeo.org/wms/vmap0",
|
||||
{layers: 'basic'}, {buffer: 0});
|
||||
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
map.addLayers([ol_wms, ol_wms_nobuffer]);
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
map.setCenter(new OpenLayers.LonLat(0, 0), 6);
|
||||
}
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
<div id="shortdesc">Simple acceleration demo; roll a vector feature around
|
||||
on a map. (Only tested on iOS 4.)</div>
|
||||
|
||||
<div id="map" width="100%" height="100%" style="background-color: gray"></div>
|
||||
<div id="map" width="100%" height="100%" style="background-color: grey"></div>
|
||||
<div id="docs">
|
||||
<p>Demo works best when device is locked in portrait mode.</p>
|
||||
</div>
|
||||
|
||||
@@ -63,7 +63,7 @@
|
||||
<h1 id="title">GeoJSON Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
JSON, GeoJSON, light
|
||||
JSON, GeoJSON
|
||||
</div>
|
||||
|
||||
<p id="shortdesc">
|
||||
|
||||
@@ -50,20 +50,21 @@
|
||||
|
||||
style.addRules([rule, elseRule]);
|
||||
|
||||
// Create a Vector layer with GeoRSS format and a style map.
|
||||
markerLayer = new OpenLayers.Layer.Vector("Some images from Flickr", {
|
||||
protocol: new OpenLayers.Protocol.HTTP({
|
||||
url: "xml/georss-flickr.xml",
|
||||
format: new OpenLayers.Format.GeoRSS({
|
||||
// adds the thumbnail attribute to the feature
|
||||
createFeatureFromItem: function(item) {
|
||||
var feature = OpenLayers.Format.GeoRSS.prototype.createFeatureFromItem.apply(this, arguments);
|
||||
feature.attributes.thumbnail = this.getElementsByTagNameNS(item, "*", "thumbnail")[0].getAttribute("url");
|
||||
return feature;
|
||||
}
|
||||
})
|
||||
}),
|
||||
strategies: [new OpenLayers.Strategy.Fixed()],
|
||||
// Create a GML layer with GeoRSS format and a style map.
|
||||
markerLayer = new OpenLayers.Layer.GML("Some images from Flickr",
|
||||
"xml/georss-flickr.xml", {
|
||||
format: OpenLayers.Format.GeoRSS,
|
||||
formatOptions: {
|
||||
// adds the thumbnail attribute to the feature
|
||||
createFeatureFromItem: function(item) {
|
||||
var feature = OpenLayers.Format.GeoRSS.prototype
|
||||
.createFeatureFromItem.apply(this, arguments);
|
||||
feature.attributes.thumbnail =
|
||||
this.getElementsByTagNameNS(
|
||||
item, "*", "thumbnail")[0].getAttribute("url");
|
||||
return feature;
|
||||
}
|
||||
},
|
||||
// Giving the style map keys for "default" and "select"
|
||||
// rendering intent, to make the image larger when selected
|
||||
styleMap: new OpenLayers.StyleMap({
|
||||
|
||||
@@ -105,7 +105,7 @@
|
||||
},
|
||||
queryVisible: true
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
map.addLayers([political, roads, cities, water, highlightLayer]);
|
||||
for (var i in infoControls) {
|
||||
|
||||
@@ -20,13 +20,7 @@
|
||||
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
|
||||
map.addLayer(layer);
|
||||
map.zoomToExtent(new OpenLayers.Bounds(-3.922119,44.335327,4.866943,49.553833));
|
||||
map.addLayer(new OpenLayers.Layer.Vector("GML", {
|
||||
protocol: new OpenLayers.Protocol.HTTP({
|
||||
url: "gml/polygon.xml",
|
||||
format: new OpenLayers.Format.GML()
|
||||
}),
|
||||
strategies: [new OpenLayers.Strategy.Fixed()]
|
||||
}));
|
||||
map.addLayer(new OpenLayers.Layer.GML("GML", "gml/polygon.xml"));
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
45
examples/google-ng.html
Normal file
45
examples/google-ng.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>OpenLayers Google NG 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">
|
||||
<style type="text/css">
|
||||
.olControlAttribution {
|
||||
left: 2px;
|
||||
right: inherit;
|
||||
bottom: 3px;
|
||||
line-height: 11px;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
</style>
|
||||
<script src="http://maps.google.com/maps/api/js?v=3.5&sensor=false"></script>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="google-ng.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Google NG Layer Example</h1>
|
||||
<div id="tags">
|
||||
Google, api key, apikey
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
Demonstrate use of tiles from the Google Maps v3 API.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
<p>
|
||||
If you use OpenLayers.Layer.GoogleNG, the getTile method of the
|
||||
GMaps v3 API's MapType is used to load tiles. This allows for
|
||||
better integration than interacting with a whole map generated
|
||||
by a google.maps.Map instance, as done with
|
||||
OpenLayers.Layer.Google. See the
|
||||
<a href="google-ng.js" target="_blank">google-ng.js source</a>
|
||||
to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
28
examples/google-ng.js
Normal file
28
examples/google-ng.js
Normal file
@@ -0,0 +1,28 @@
|
||||
var map;
|
||||
|
||||
function init() {
|
||||
map = new OpenLayers.Map('map');
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
|
||||
var gphy = new OpenLayers.Layer.GoogleNG(
|
||||
{type: google.maps.MapTypeId.TERRAIN}
|
||||
);
|
||||
var gmap = new OpenLayers.Layer.GoogleNG(
|
||||
// ROADMAP, the default
|
||||
);
|
||||
var ghyb = new OpenLayers.Layer.GoogleNG(
|
||||
{type: google.maps.MapTypeId.HYBRID}
|
||||
);
|
||||
var gsat = new OpenLayers.Layer.GoogleNG(
|
||||
{type: google.maps.MapTypeId.SATELLITE}
|
||||
);
|
||||
|
||||
map.addLayers([gphy, gmap, ghyb, gsat]);
|
||||
|
||||
// GoogleNG 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);
|
||||
}
|
||||
63
examples/google-reproject.html
Normal file
63
examples/google-reproject.html
Normal file
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>OpenLayers Google with Overlay Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<!-- this gmaps key generated for http://openlayers.org/dev/ -->
|
||||
<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map;
|
||||
|
||||
function init(){
|
||||
map = new OpenLayers.Map('map');
|
||||
|
||||
var satellite = new OpenLayers.Layer.Google(
|
||||
"Google Satellite" , {type: G_SATELLITE_MAP}
|
||||
);
|
||||
|
||||
var wms = 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'
|
||||
},
|
||||
{'reproject': true}
|
||||
);
|
||||
|
||||
map.addLayers([satellite, wms]);
|
||||
|
||||
map.setCenter(new OpenLayers.LonLat(10.205188,48.857593), 5);
|
||||
map.addControl( new OpenLayers.Control.LayerSwitcher() );
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Google with Overlay Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
Google, overlay, mercator, reproject, cleanup
|
||||
</div>
|
||||
|
||||
<p id="shortdesc">
|
||||
Demonstrate a Google basemap used with boundary overlay layer.
|
||||
</p>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
<div id="docs">
|
||||
<p>An overlay in a Geographic projection can be stretched to somewhat
|
||||
line up with Google tiles (in a Mercator projection). Results get
|
||||
worse farther from the equator. Use the "reproject" option on a
|
||||
layer to get this behavior. Use the sphericalMercator option on
|
||||
a Google layer to get proper overlays (with other layers in
|
||||
Spherical Mercator).</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,39 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>OpenLayers Google (Static Maps API) Grid Layer Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="title">Google (Static Maps API) Grid Layer Example</h1>
|
||||
<div id="tags">
|
||||
Google, grid, static, GMaps, light
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
Using the Google Static Maps API with a Grid Layer.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
<p>A Grid layer with a custom <code>getURL</code> method can be
|
||||
used to request static maps for a specific extent and zoom
|
||||
level. The Google Static Maps API is the most reliable way to
|
||||
get Google base maps in OpenLayers. Note, however, that the
|
||||
free version of this is limited to a map size of 640x640 pixels
|
||||
(1280x1280 if the <code>scale=2</code> url parameter is used)
|
||||
and 1000 page views per viewer per day. Every map center
|
||||
or zoom level change increases the page view counter by 1.
|
||||
</p>
|
||||
<p>Look at the
|
||||
<a href="google-static.js" target="_blank">google-static.js
|
||||
source</a> to see how this is done. See the
|
||||
<a href="http://code.google.com/apis/maps/documentation/staticmaps/">Static Maps API V2 Developer Guide</a>
|
||||
for details on the API.
|
||||
</div>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="google-static.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,61 +0,0 @@
|
||||
var options = {
|
||||
singleTile: true,
|
||||
ratio: 1,
|
||||
isBaseLayer: true,
|
||||
wrapDateLine: true,
|
||||
getURL: function() {
|
||||
var center = this.map.getCenter().transform("EPSG:3857", "EPSG:4326"),
|
||||
size = this.map.getSize();
|
||||
return [
|
||||
this.url, "¢er=", center.lat, ",", center.lon,
|
||||
"&zoom=", this.map.getZoom(), "&size=", size.w, "x", size.h
|
||||
].join("");
|
||||
}
|
||||
};
|
||||
|
||||
var map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
projection: "EPSG:3857",
|
||||
numZoomLevels: 22,
|
||||
layers: [
|
||||
new OpenLayers.Layer.Grid(
|
||||
"Google Physical",
|
||||
"http://maps.googleapis.com/maps/api/staticmap?sensor=false&maptype=terrain",
|
||||
null, options
|
||||
),
|
||||
new OpenLayers.Layer.Grid(
|
||||
"Google Streets",
|
||||
"http://maps.googleapis.com/maps/api/staticmap?sensor=false&maptype=roadmap",
|
||||
null, options
|
||||
),
|
||||
new OpenLayers.Layer.Grid(
|
||||
"Google Hybrid",
|
||||
"http://maps.googleapis.com/maps/api/staticmap?sensor=false&maptype=hybrid",
|
||||
null, options
|
||||
),
|
||||
new OpenLayers.Layer.Grid(
|
||||
"Google Satellite",
|
||||
"http://maps.googleapis.com/maps/api/staticmap?sensor=false&maptype=satellite",
|
||||
null, options
|
||||
),
|
||||
// the same layer again, but scaled to allow map sizes up to 1280x1280 pixels
|
||||
new OpenLayers.Layer.Grid(
|
||||
"Google Satellite (scale=2)",
|
||||
"http://maps.googleapis.com/maps/api/staticmap?sensor=false&maptype=satellite&scale=2",
|
||||
null, OpenLayers.Util.applyDefaults({
|
||||
getURL: function() {
|
||||
var center = this.map.getCenter().transform("EPSG:3857", "EPSG:4326"),
|
||||
size = this.map.getSize();
|
||||
return [
|
||||
this.url, "¢er=", center.lat, ",", center.lon,
|
||||
"&zoom=", (this.map.getZoom() - 1),
|
||||
"&size=", Math.floor(size.w / 2), "x", Math.floor(size.h / 2)
|
||||
].join("");
|
||||
}
|
||||
}, options)
|
||||
)
|
||||
],
|
||||
center: new OpenLayers.LonLat(10.2, 48.9).transform("EPSG:4326", "EPSG:3857"),
|
||||
zoom: 5
|
||||
});
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
@@ -8,14 +8,14 @@
|
||||
<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?v=3.6&sensor=false"></script>
|
||||
<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>
|
||||
<div id="tags">
|
||||
Google, overlay, light
|
||||
Google, overlay
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
Demonstrate use the Google Maps v3 API with allOverlays set to true on the map.
|
||||
|
||||
@@ -8,14 +8,14 @@
|
||||
<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?v=3.6&sensor=false"></script>
|
||||
<script src="http://maps.google.com/maps/api/js?v=3.5&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>
|
||||
<div id="tags">
|
||||
Google, api key, apikey, light
|
||||
Google, api key, apikey
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
Demonstrate use the Google Maps v3 API.
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<body onload="init();">
|
||||
<h1 id="title">Named Graphics Example</h1>
|
||||
<div id="tags">
|
||||
vector, named graphic, star, cross, x, square, triangle, circle, style, light
|
||||
vector, named graphic, star, cross, x, square, triangle, circle, style
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
Shows how to use well-known graphic names.
|
||||
|
||||
@@ -5,10 +5,6 @@ OpenLayers.Renderer.symbol.church = [4, 0, 6, 0, 6, 4, 10, 4, 10, 6, 6, 6, 6, 14
|
||||
var map;
|
||||
|
||||
function init(){
|
||||
// allow testing of specific renderers via "?renderer=Canvas", etc
|
||||
var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
|
||||
renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
|
||||
|
||||
map = new OpenLayers.Map('map', {
|
||||
controls: []
|
||||
});
|
||||
@@ -50,8 +46,7 @@ function init(){
|
||||
// Create a vector layer and give it your style map.
|
||||
var layer = new OpenLayers.Layer.Vector("Graphics", {
|
||||
styleMap: styles,
|
||||
isBaseLayer: true,
|
||||
renderers: renderer
|
||||
isBaseLayer: true
|
||||
});
|
||||
layer.addFeatures(features);
|
||||
map.addLayer(layer);
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
}
|
||||
</style>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="http://svn.osgeo.org/metacrs/proj4js/trunk/lib/proj4js-compressed.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";
|
||||
|
||||
|
||||
@@ -13,43 +13,48 @@
|
||||
}
|
||||
</style>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 2;
|
||||
var map;
|
||||
window.onload = function() {
|
||||
options = {maxExtent: new OpenLayers.Bounds(-73.5295, 41.2318,
|
||||
-69.9097, 42.8883),
|
||||
maxResolution: 0.0003}
|
||||
map = new OpenLayers.Map('map', options);
|
||||
var roads15 = new OpenLayers.Layer.WMS( "Roads (15px gutter)",
|
||||
"http://boston.freemap.in/cgi-bin/mapserv?map=/www/freemap.in/boston/map/gmaps.map&",
|
||||
{layers: 'roads_200_40'},
|
||||
{gutter: 15});
|
||||
var roads = new OpenLayers.Layer.WMS( "Roads (no gutter)",
|
||||
"http://boston.freemap.in/cgi-bin/mapserv?map=/www/freemap.in/boston/map/gmaps.map&",
|
||||
{layers: 'roads_200_40'});
|
||||
map.addLayers([roads, roads15]);
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
map.setCenter(new OpenLayers.LonLat(-71.848, 42.2), 0);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="title">Gutter Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
gutter, quality, tile, light
|
||||
gutter, quality, tile
|
||||
</div>
|
||||
|
||||
<p id="shortdesc">
|
||||
Demonstrates OpenLayer's facility for dealing with tiling artifacts.
|
||||
Demonstrates map tiling artifacts, and OpenLayer's facility for correcting this distortion.
|
||||
</p>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
<div id="docs">
|
||||
<p class="caption">
|
||||
When you render tiles with certain types of symbols, some map
|
||||
servers may render artifacts at tile edges that make symbology not
|
||||
look continuous. Look at the state abbreviations, open the layer
|
||||
switcher and change to the layer with a 15 pixel gutter to see how
|
||||
the symbology looks different (the server in this example doesn't
|
||||
render such artifacts, so the client-side gutter won't make things
|
||||
look nicer).
|
||||
When you render tiles with certain types of symbols, there are artifacts
|
||||
at tile edges that make symbology not look continuous. In the center of
|
||||
the above map (when it first loads), the large orange road is split
|
||||
vertically by a tile. Open the layer switcher and change to the layer
|
||||
with a 15 pixel gutter to see how the symbology looks nicer.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript">
|
||||
var map = new OpenLayers.Map('map');
|
||||
var states15 = new OpenLayers.Layer.WMS( "States (15px gutter)",
|
||||
"http://suite.opengeo.org/geoserver/wms",
|
||||
{layers: 'usa:states'},
|
||||
{gutter: 15, transitionEffect: "resize"});
|
||||
var states = new OpenLayers.Layer.WMS( "States (no gutter)",
|
||||
"http://suite.opengeo.org/geoserver/wms",
|
||||
{layers: 'usa:states'});
|
||||
map.addLayers([states, states15]);
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
map.setCenter(new OpenLayers.LonLat(-71.848, 42.2), 5);
|
||||
</script>
|
||||
</html>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 45 KiB |
@@ -1,6 +1,7 @@
|
||||
var map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
resolutions: [0.087890625, 0.0439453125, 0.02197265625, 0.010986328125],
|
||||
panDuration: 100,
|
||||
controls: [
|
||||
new OpenLayers.Control.Navigation(
|
||||
{dragPanOptions: {enableKinetic: true}}
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
<h1 id="title">Late Rendering</h1>
|
||||
|
||||
<div id="tags">
|
||||
creation, render, div, light
|
||||
creation, render, div
|
||||
</div>
|
||||
|
||||
<p id="shortdesc">
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
<h1 id="title">Layer Opacity Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
opacity, transparent, transparency, light
|
||||
opacity, transparent, transparency
|
||||
</div>
|
||||
|
||||
<p id="shortdesc">
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
layer.logEvent = function(event) {
|
||||
eventsLog.innerHTML += "<br>(" + getTimeStamp() + ") " +
|
||||
this.name + ": " + event;
|
||||
};
|
||||
}
|
||||
|
||||
layer.events.register("loadstart", layer, function() {
|
||||
this.logEvent("Load Start");
|
||||
@@ -112,14 +112,14 @@
|
||||
<h1 id="title">Layer Load Monitoring Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
monitor, loading, light
|
||||
monitor, loading
|
||||
</div>
|
||||
|
||||
<p id="shortdesc">
|
||||
Demonstrate a method for monitoring tile loading performance.
|
||||
</p>
|
||||
|
||||
<div id="map" class="smallmap" style="float:left;"></div>
|
||||
<div id="map" style="float:left;"></div>
|
||||
|
||||
<div id="controls">
|
||||
<div id="eventsLogID">
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
<h1 id="title">Layer Switcher Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
tree, layerswitcher, reposition, light
|
||||
tree, layerswitcher, reposition
|
||||
</div>
|
||||
|
||||
<p id="shortdesc">
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>OpenLayers Light - Basic Popups</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<script src="../OpenLayers.light.debug.js"></script>
|
||||
<script src="light-basic.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">OpenLayers Light - Basic Popups</h1>
|
||||
<div id="tags">
|
||||
light, vector, feature, popup
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
A basic use case example using the OpenLayers.light version of the library.<br>
|
||||
Shows popup info bubble when hovering over features on the map
|
||||
</p>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
<div id="docs">
|
||||
<p>
|
||||
This example uses OpenLayers.light.js to display features and show
|
||||
popup info bubbles when the feature is hovered over.
|
||||
</p>
|
||||
See the <a href="light-basic.js" target="_blank">
|
||||
light-basic.js source</a> to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,66 +0,0 @@
|
||||
var map;
|
||||
|
||||
function init() {
|
||||
map = new OpenLayers.Map("map",{projection:"EPSG:3857"});
|
||||
|
||||
var osm = new OpenLayers.Layer.OSM();
|
||||
var toMercator = OpenLayers.Projection.transforms['EPSG:4326']['EPSG:3857'];
|
||||
var center = toMercator({x:-0.05,y:51.5});
|
||||
|
||||
/**
|
||||
* Create 5 random vector features. Your features would typically be fetched
|
||||
* from the server. The features are given an attribute named "foo".
|
||||
* The value of this attribute is an integer that ranges from 0 to 100.
|
||||
*/
|
||||
var features = [];
|
||||
for(var i = 0; i < 5; i++) {
|
||||
features[i] = new OpenLayers.Feature.Vector(
|
||||
toMercator(new OpenLayers.Geometry.Point(
|
||||
-0.040 - 0.05*Math.random(),
|
||||
51.49 + 0.02*Math.random())),
|
||||
{
|
||||
foo : 100 * Math.random() | 0
|
||||
}, {
|
||||
fillColor : '#008040',
|
||||
fillOpacity : 0.8,
|
||||
strokeColor : "#ee9900",
|
||||
strokeOpacity : 1,
|
||||
strokeWidth : 1,
|
||||
pointRadius : 8
|
||||
});
|
||||
}
|
||||
|
||||
// create the layer with listeners to create and destroy popups
|
||||
var vector = new OpenLayers.Layer.Vector("Points",{
|
||||
eventListeners:{
|
||||
'featureselected':function(evt){
|
||||
var feature = evt.feature;
|
||||
var popup = new OpenLayers.Popup.FramedCloud("popup",
|
||||
OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
|
||||
null,
|
||||
"<div style='font-size:.8em'>Feature: " + feature.id +"<br>Foo: " + feature.attributes.foo+"</div>",
|
||||
null,
|
||||
true
|
||||
);
|
||||
feature.popup = popup;
|
||||
map.addPopup(popup);
|
||||
},
|
||||
'featureunselected':function(evt){
|
||||
var feature = evt.feature;
|
||||
map.removePopup(feature.popup);
|
||||
feature.popup.destroy();
|
||||
feature.popup = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
vector.addFeatures(features);
|
||||
|
||||
// create the select feature control
|
||||
var selector = new OpenLayers.Control.SelectFeature(vector,{
|
||||
autoActivate:true
|
||||
});
|
||||
|
||||
map.addLayers([osm, vector]);
|
||||
map.addControl(selector);
|
||||
map.setCenter(new OpenLayers.LonLat(center.x,center.y), 13);
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>OpenLayers MapBox Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<style>
|
||||
.olControlAttribution {
|
||||
bottom: 5px;
|
||||
font-size: 9px;
|
||||
}
|
||||
div.olControlZoomPanel {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomInItemInactive,
|
||||
div.olControlZoomPanel .olControlZoomOutItemInactive {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
position: absolute;
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomInItemInactive {
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomOutItemInactive {
|
||||
border-radius: 0 0 3px 3px ;
|
||||
top: 20px;
|
||||
}
|
||||
div.olControlZoomPanel div:hover {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomOutItemInactive:after ,
|
||||
div.olControlZoomPanel .olControlZoomInItemInactive:after {
|
||||
font-weight: bold;
|
||||
content: '+';
|
||||
font-size: 18px;
|
||||
padding: 0 2px;
|
||||
z-index: 2000;
|
||||
color: #fff;
|
||||
line-height: 1em;
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomOutItemInactive:after {
|
||||
content: '–';
|
||||
line-height: 0.9em;
|
||||
padding: 0 5px;
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="title">Basic MapBox OSM Example</h1>
|
||||
<div id="tags">mapbox xyz osm</div>
|
||||
|
||||
<div id="shortdesc">Shows how to use MapBox tiles in an OpenLayers map.</div>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
<div id="docs">
|
||||
<p>This example demonstrates the use of an XYZ layer that accesses tiles from MapBox.</p>
|
||||
<p>
|
||||
See the <a href="mapbox.js" target="_blank">mapbox.js</a> source
|
||||
for details. Make sure to read the <a href="http://mapbox.com/tos/">Terms of Service</a>
|
||||
before using MapBox tiles in your application.
|
||||
</p>
|
||||
</div>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="mapbox.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,34 +0,0 @@
|
||||
var streets = new OpenLayers.Layer.XYZ(
|
||||
"MapBox Streets",
|
||||
[
|
||||
"http://a.tiles.mapbox.com/v3/mapbox.mapbox-streets/${z}/${x}/${y}.png",
|
||||
"http://b.tiles.mapbox.com/v3/mapbox.mapbox-streets/${z}/${x}/${y}.png",
|
||||
"http://c.tiles.mapbox.com/v3/mapbox.mapbox-streets/${z}/${x}/${y}.png",
|
||||
"http://d.tiles.mapbox.com/v3/mapbox.mapbox-streets/${z}/${x}/${y}.png"
|
||||
], {
|
||||
attribution: "Tiles © <a href='http://mapbox.com/'>MapBox</a> | " +
|
||||
"Data © <a href='http://www.openstreetmap.org/'>OpenStreetMap</a> " +
|
||||
"and contributors, CC-BY-SA",
|
||||
sphericalMercator: true,
|
||||
transitionEffect: "resize",
|
||||
buffer: 1,
|
||||
numZoomLevels: 16
|
||||
}
|
||||
);
|
||||
|
||||
var map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
layers: [streets],
|
||||
controls: [
|
||||
new OpenLayers.Control.Attribution(),
|
||||
new OpenLayers.Control.Navigation({
|
||||
dragPanOptions: {
|
||||
enableKinetic: true
|
||||
}
|
||||
}),
|
||||
new OpenLayers.Control.ZoomPanel(),
|
||||
new OpenLayers.Control.Permalink({anchor: true})
|
||||
],
|
||||
center: [0, 0],
|
||||
zoom: 1
|
||||
});
|
||||
@@ -54,10 +54,10 @@
|
||||
var params = {
|
||||
mapdefinition: 'Library://Samples/Sheboygan/MapsTiled/Sheboygan.MapDefinition',
|
||||
basemaplayergroupname: "Base Layer Group"
|
||||
};
|
||||
}
|
||||
var options = {
|
||||
singleTile: false
|
||||
};
|
||||
}
|
||||
var layer = new OpenLayers.Layer.MapGuide( "MapGuide OS tiled layer", url, params, options );
|
||||
map.addLayer(layer);
|
||||
|
||||
|
||||
@@ -70,19 +70,12 @@
|
||||
]);
|
||||
var styleMap = new OpenLayers.StyleMap({"default": style});
|
||||
|
||||
// allow testing of specific renderers via "?renderer=Canvas", etc
|
||||
var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
|
||||
renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
|
||||
|
||||
measureControls = {
|
||||
line: new OpenLayers.Control.Measure(
|
||||
OpenLayers.Handler.Path, {
|
||||
persist: true,
|
||||
handlerOptions: {
|
||||
layerOptions: {
|
||||
renderers: renderer,
|
||||
styleMap: styleMap
|
||||
}
|
||||
layerOptions: {styleMap: styleMap}
|
||||
}
|
||||
}
|
||||
),
|
||||
@@ -90,10 +83,7 @@
|
||||
OpenLayers.Handler.Polygon, {
|
||||
persist: true,
|
||||
handlerOptions: {
|
||||
layerOptions: {
|
||||
renderers: renderer,
|
||||
styleMap: styleMap
|
||||
}
|
||||
layerOptions: {styleMap: styleMap}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
68
examples/mm.html
Normal file
68
examples/mm.html
Normal file
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>MultiMap</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: 100%;
|
||||
height: 512px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</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 src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var lon = 5;
|
||||
var lat = 40;
|
||||
var zoom = 5;
|
||||
var map, mmlayer, layer;
|
||||
|
||||
function init(){
|
||||
map = new OpenLayers.Map( 'map' ,
|
||||
{controls:[new OpenLayers.Control.MouseDefaults()]});
|
||||
|
||||
mmlayer = new OpenLayers.Layer.MultiMap( "MultiMap");
|
||||
map.addLayer(mmlayer);
|
||||
|
||||
markers = new OpenLayers.Layer.Markers("markers");
|
||||
map.addLayer(markers);
|
||||
|
||||
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
|
||||
map.addControl( new OpenLayers.Control.LayerSwitcher() );
|
||||
map.addControl( new OpenLayers.Control.PanZoomBar() );
|
||||
}
|
||||
|
||||
function add() {
|
||||
|
||||
marker = new OpenLayers.Marker(new OpenLayers.LonLat(2, 41));
|
||||
markers.addMarker(marker);
|
||||
}
|
||||
|
||||
function remove() {
|
||||
markers.removeMarker(marker);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">MultiMap Example</h1>
|
||||
<div id="tags">
|
||||
MultiMap, basic, cleanup
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
An example of using the Layer.MultiMap class.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div style="background-color:green" onclick="add()"> click to add the marker to the map</div>
|
||||
<div style="background-color:red" onclick="remove()"> click to remove the marker from the map</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -15,7 +15,7 @@ var init = function (onSelectFeatureFunction) {
|
||||
styleMap: new OpenLayers.StyleMap({
|
||||
externalGraphic: "img/mobile-loc.png",
|
||||
graphicOpacity: 1.0,
|
||||
graphicWidth: 16,
|
||||
graphicWith: 16,
|
||||
graphicHeight: 26,
|
||||
graphicYOffset: -26
|
||||
})
|
||||
@@ -41,7 +41,12 @@ var init = function (onSelectFeatureFunction) {
|
||||
div: "map",
|
||||
theme: null,
|
||||
projection: sm,
|
||||
units: "m",
|
||||
numZoomLevels: 18,
|
||||
maxResolution: 156543.0339,
|
||||
maxExtent: new OpenLayers.Bounds(
|
||||
-20037508.34, -20037508.34, 20037508.34, 20037508.34
|
||||
),
|
||||
controls: [
|
||||
new OpenLayers.Control.Attribution(),
|
||||
new OpenLayers.Control.TouchNavigation({
|
||||
|
||||
@@ -25,6 +25,36 @@
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomInItemInactive,
|
||||
div.olControlZoomPanel .olControlZoomOutItemInactive {
|
||||
background: rgba(0,0,0,0.2);
|
||||
position: absolute;
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomInItemInactive {
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomOutItemInactive {
|
||||
border-radius: 0 0 5px 5px ;
|
||||
top: 37px;
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomOutItemInactive:after,
|
||||
div.olControlZoomPanel .olControlZoomInItemInactive:after {
|
||||
font-weight: bold;
|
||||
content: '+';
|
||||
font-size: 36px;
|
||||
padding: 7px;
|
||||
z-index: 2000;
|
||||
color: #fff;
|
||||
line-height: 1em;
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomOutItemInactive:after {
|
||||
content: '–';
|
||||
line-height: 0.9em;
|
||||
padding: 0 8px;
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
|
||||
display: none;
|
||||
}
|
||||
.olControlEditingToolbar .olControlModifyFeatureItemInactive {
|
||||
background-position: -1px -1px;
|
||||
}
|
||||
|
||||
@@ -41,14 +41,15 @@ function init() {
|
||||
map = new OpenLayers.Map({
|
||||
div: 'map',
|
||||
projection: 'EPSG:900913',
|
||||
units: 'm',
|
||||
numZoomLevels: 18,
|
||||
maxResolution: 156543.0339,
|
||||
maxExtent: new OpenLayers.Bounds(
|
||||
-20037508.34, -20037508.34, 20037508.34, 20037508.34
|
||||
),
|
||||
controls: [
|
||||
new OpenLayers.Control.TouchNavigation({
|
||||
dragPanOptions: {
|
||||
enableKinetic: true
|
||||
}
|
||||
}),
|
||||
new OpenLayers.Control.Zoom(),
|
||||
new OpenLayers.Control.TouchNavigation(),
|
||||
new OpenLayers.Control.ZoomPanel(),
|
||||
toolbar
|
||||
],
|
||||
layers: [osm, vector],
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
<title>OpenLayers with jQuery Mobile</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
|
||||
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
|
||||
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
|
||||
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css">
|
||||
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
|
||||
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
|
||||
<link rel="stylesheet" href="style.mobile.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.mobile-jq.css" type="text/css">
|
||||
<script src="../lib/OpenLayers.js?mobile"></script>
|
||||
|
||||
@@ -17,7 +17,7 @@ $(document).ready(function() {
|
||||
content.height(contentHeight);
|
||||
}
|
||||
|
||||
if (window.map && window.map instanceof OpenLayers.Map) {
|
||||
if (window.map) {
|
||||
map.updateSize();
|
||||
} else {
|
||||
// initialize map
|
||||
@@ -62,7 +62,7 @@ $(document).ready(function() {
|
||||
if ($('#query')[0].value === '') {
|
||||
return;
|
||||
}
|
||||
$.mobile.showPageLoadingMsg();
|
||||
$.mobile.pageLoading();
|
||||
|
||||
// Prevent form send
|
||||
e.preventDefault();
|
||||
@@ -89,7 +89,7 @@ $(document).ready(function() {
|
||||
.show();
|
||||
});
|
||||
$('#search_results').listview('refresh');
|
||||
$.mobile.hidePageLoadingMsg();
|
||||
$.mobile.pageLoading(true);
|
||||
});
|
||||
});
|
||||
// only listen to the first event triggered
|
||||
|
||||
@@ -39,6 +39,42 @@
|
||||
border-radius: 5px 0 0 0;
|
||||
}
|
||||
|
||||
div.olControlZoomPanel .olControlZoomInItemInactive,
|
||||
div.olControlZoomPanel .olControlZoomOutItemInactive {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
div.olControlZoomPanel .olControlZoomInItemInactive {
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
div.olControlZoomPanel .olControlZoomOutItemInactive {
|
||||
border-radius: 0 0 5px 5px;
|
||||
top: 37px;
|
||||
}
|
||||
|
||||
div.olControlZoomPanel .olControlZoomOutItemInactive:after,
|
||||
div.olControlZoomPanel .olControlZoomInItemInactive:after {
|
||||
font-weight: bold;
|
||||
content: '+';
|
||||
font-size: 36px;
|
||||
padding: 7px;
|
||||
z-index: 2000;
|
||||
color: #fff;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
div.olControlZoomPanel .olControlZoomOutItemInactive:after {
|
||||
content: '–';
|
||||
line-height: 0.9em;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
div.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#title, #tags, #shortdesc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -32,7 +32,7 @@ function init() {
|
||||
enableKinetic: true
|
||||
}
|
||||
}),
|
||||
new OpenLayers.Control.Zoom()
|
||||
new OpenLayers.Control.ZoomPanel()
|
||||
]
|
||||
});
|
||||
|
||||
@@ -40,7 +40,7 @@ function init() {
|
||||
"http://vmap0.tiles.osgeo.org/wms/vmap0",
|
||||
{layers: 'basic'},
|
||||
{isBaseLayer: true, transitionEffect: 'resize'}
|
||||
);
|
||||
)
|
||||
|
||||
var kml = new OpenLayers.Layer.Vector("KML", {
|
||||
projection: map.displayProjection,
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The Zoom control provides + and - buttons for zooming in and
|
||||
The ZoomPanel control provides + and - buttons for zooming in and
|
||||
out. These buttons should work on any device, and the zoom out
|
||||
button is especially needed for devices that don't support
|
||||
multi-touch.
|
||||
|
||||
@@ -5,14 +5,19 @@ function init() {
|
||||
div: "map",
|
||||
theme: null,
|
||||
projection: new OpenLayers.Projection("EPSG:900913"),
|
||||
units: "m",
|
||||
numZoomLevels: 18,
|
||||
maxResolution: 156543.0339,
|
||||
maxExtent: new OpenLayers.Bounds(
|
||||
-20037508.34, -20037508.34, 20037508.34, 20037508.34
|
||||
),
|
||||
controls: [
|
||||
new OpenLayers.Control.TouchNavigation({
|
||||
dragPanOptions: {
|
||||
enableKinetic: true
|
||||
}
|
||||
}),
|
||||
new OpenLayers.Control.Zoom()
|
||||
new OpenLayers.Control.ZoomPanel()
|
||||
],
|
||||
layers: [
|
||||
new OpenLayers.Layer.OSM("OpenStreetMap", null, {
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
<title>OpenLayers with Sencha Touch</title>
|
||||
<script src="../lib/OpenLayers.js?mobile"></script>
|
||||
<link rel="stylesheet" href="style.mobile.css" type="text/css">
|
||||
<link rel="stylesheet" href="http://cdn.sencha.io/touch/1.1.0/resources/css/sencha-touch.css">
|
||||
<script src="http://cdn.sencha.io/touch/1.1.0/sencha-touch.js"></script>
|
||||
<link rel="stylesheet" href="http://dev.sencha.com/deploy/touch/resources/css/sencha-touch.css">
|
||||
<script src="http://dev.sencha.com/deploy/touch/sencha-touch.js"></script>
|
||||
<script src="mobile-sencha.js"></script>
|
||||
<script src="mobile-base.js"></script>
|
||||
<style>
|
||||
|
||||
@@ -1,166 +0,0 @@
|
||||
html, body, #map {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
#map {
|
||||
cursor: move;
|
||||
}
|
||||
#title, #tags, #shortdesc {
|
||||
display: none;
|
||||
}
|
||||
.olTileImage {
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
-moz-transition: opacity 0.2s linear;
|
||||
-o-transition: opacity 0.2s linear;
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
div.olControlAttribution {
|
||||
position: absolute;
|
||||
font-size: 10px;
|
||||
text-align: right;
|
||||
color: #BFEFFF;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0,0,100,0.2);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: bold;
|
||||
padding: 2px 4px;
|
||||
border-radius: 5px 0 0 0;
|
||||
}
|
||||
.olControlAttribution a {
|
||||
font-weight: bold;
|
||||
color: #BFEFFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
div.olControlZoomPanel {
|
||||
height: 108px;
|
||||
width: 36px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: inherit;
|
||||
right: 20px;
|
||||
}
|
||||
div.olControlZoomPanel div {
|
||||
cursor: pointer;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
left: 0;
|
||||
background-color: #ccc;
|
||||
background-image: none;
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomInItemInactive,
|
||||
div.olControlZoomPanel .olControlZoomOutItemInactive {
|
||||
top: 0;
|
||||
background: rgba(0,0,100,0.4);
|
||||
position: absolute;
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomInItemInactive {
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomOutItemInactive {
|
||||
border-radius: 0 0 5px 5px;
|
||||
top: 37px;
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomOutItemInactive:after,
|
||||
div.olControlZoomPanel .olControlZoomInItemInactive:after {
|
||||
font-weight: bold;
|
||||
content: '+';
|
||||
font-size: 36px;
|
||||
padding: 7px;
|
||||
z-index: 2000;
|
||||
color: #BFEFFF;
|
||||
line-height: 1em;
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomOutItemInactive:after {
|
||||
content: '–';
|
||||
line-height: 0.9em;
|
||||
padding: 0 8px;
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
|
||||
display: none;
|
||||
}
|
||||
div.olControlZoomPanel div.olControlGeolocateItemInactive,
|
||||
div.olControlZoomPanel div.olControlGeolocateItemActive {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 98px;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
background: #ccc url(img/locate.png) center no-repeat;
|
||||
background-color: rgba(0,0,100,0.4);
|
||||
}
|
||||
div.olControlZoomPanel div.olControlGeolocateItemActive {
|
||||
background-color: rgba(0,0,100,0.2);
|
||||
}
|
||||
div.olControlGeolocateItemInactive:after {
|
||||
font-weight: bold;
|
||||
font-size: 36px;
|
||||
padding: 7px;
|
||||
z-index: 2000;
|
||||
color: #BFEFFF;
|
||||
line-height: 1em;
|
||||
background: none;
|
||||
}
|
||||
.layerPanel {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 82px;
|
||||
}
|
||||
div.layerPanel div {
|
||||
display: inline;
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
div.layerPanel div:after {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
font-family: arial;
|
||||
padding: 8px;
|
||||
color: #BFEFFF;
|
||||
line-height: 36px;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
background-color: #ccc;
|
||||
background: rgba(0,0,100,0.4);
|
||||
}
|
||||
div.layerPanel div.labelButtonItemInactive:after,
|
||||
div.layerPanel div.labelButtonItemActive:after {
|
||||
content: 'Labels';
|
||||
}
|
||||
:lang(de) div.layerPanel div.labelButtonItemInactive:after,
|
||||
:lang(de) div.layerPanel div.labelButtonItemActive:after {
|
||||
content: 'Text';
|
||||
}
|
||||
div.layerPanel div.labelButtonItemActive:after {
|
||||
text-decoration: underline;
|
||||
background: rgba(0,0,100,0.2);
|
||||
}
|
||||
div.layerPanel div.aerialButtonItemInactive:after,
|
||||
div.layerPanel div.aerialButtonItemActive:after {
|
||||
content: 'Aerial';
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
:lang(de) div.layerPanel div.aerialButtonItemInactive:after,
|
||||
:lang(de) div.layerPanel div.aerialButtonItemActive:after {
|
||||
content: 'Luftbild';
|
||||
}
|
||||
div.layerPanel div.aerialButtonItemActive:after {
|
||||
text-decoration: underline;
|
||||
background: rgba(0,0,100,0.2);
|
||||
}
|
||||
div.layerPanel div.mapButtonItemInactive:after,
|
||||
div.layerPanel div.mapButtonItemActive:after {
|
||||
content: 'Map';
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
:lang(de) div.layerPanel div.mapButtonItemInactive:after,
|
||||
:lang(de) div.layerPanel div.mapButtonItemActive:after {
|
||||
content: 'Karte';
|
||||
}
|
||||
div.layerPanel div.mapButtonItemActive:after {
|
||||
text-decoration: underline;
|
||||
background: rgba(0,0,100,0.2);
|
||||
}
|
||||
div.layerPanel div.mapButtonItemInactive,
|
||||
div.layerPanel div.mapButtonItemActive {
|
||||
margin-left: 1px;
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>City of Vienna WMTS with REST Encoding and Geolocate</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<link rel="stylesheet" href="mobile-wmts-vienna.css" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="title">City of Vienna WMTS for Desktop and Mobile Devices</h1>
|
||||
<div id="tags">
|
||||
mobile, vienna, ogdwien, rest, restful, wmts, geolocate, permalink
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
A full-screen map for both desktop and mobile devices. Uses
|
||||
language dependent CSS content and the WMTSCapabilities format to
|
||||
retrieve layers from the ogdwien open data initiative of the City
|
||||
of Vienna. Also has a lightweight custom anchor permalink
|
||||
functionality and uses the Geolocate control.
|
||||
</p>
|
||||
<div id="map"></div>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="mobile-wmts-vienna.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,266 +0,0 @@
|
||||
var map;
|
||||
|
||||
(function() {
|
||||
// Set document language for css content
|
||||
document.documentElement.lang = (navigator.userLanguage || navigator.language).split("-")[0];
|
||||
|
||||
// A panel for switching between Aerial and Map, and for turning labels
|
||||
// on and off.
|
||||
var layerPanel = new OpenLayers.Control.Panel({
|
||||
displayClass: "layerPanel",
|
||||
autoActivate: true
|
||||
});
|
||||
var aerialButton = new OpenLayers.Control({
|
||||
type: OpenLayers.Control.TYPE_TOOL,
|
||||
displayClass: "aerialButton",
|
||||
eventListeners: {
|
||||
activate: function() {
|
||||
if (aerial) {map.setBaseLayer(aerial);}
|
||||
}
|
||||
}
|
||||
});
|
||||
var mapButton = new OpenLayers.Control({
|
||||
type: OpenLayers.Control.TYPE_TOOL,
|
||||
displayClass: "mapButton",
|
||||
eventListeners: {
|
||||
activate: function() {
|
||||
if (fmzk) {map.setBaseLayer(fmzk);}
|
||||
}
|
||||
}
|
||||
});
|
||||
var labelButton = new OpenLayers.Control({
|
||||
type: OpenLayers.Control.TYPE_TOGGLE,
|
||||
displayClass: "labelButton",
|
||||
eventListeners: {
|
||||
activate: function() {
|
||||
if (labels) {labels.setVisibility(true);}
|
||||
},
|
||||
deactivate: function() {
|
||||
if (labels) {labels.setVisibility(false);}
|
||||
}
|
||||
}
|
||||
});
|
||||
layerPanel.addControls([aerialButton, mapButton, labelButton]);
|
||||
|
||||
var zoomPanel = new OpenLayers.Control.ZoomPanel();
|
||||
|
||||
// Geolocate control for the Locate button - the locationupdated handler
|
||||
// draws a cross at the location and a circle showing the accuracy radius.
|
||||
zoomPanel.addControls([
|
||||
new OpenLayers.Control.Geolocate({
|
||||
type: OpenLayers.Control.TYPE_TOGGLE,
|
||||
geolocationOptions: {
|
||||
enableHighAccuracy: false,
|
||||
maximumAge: 0,
|
||||
timeout: 7000
|
||||
},
|
||||
eventListeners: {
|
||||
activate: function() {
|
||||
map.addLayer(vector);
|
||||
},
|
||||
deactivate: function() {
|
||||
map.removeLayer(vector);
|
||||
vector.removeAllFeatures();
|
||||
},
|
||||
locationupdated: function(e) {
|
||||
vector.removeAllFeatures();
|
||||
vector.addFeatures([
|
||||
new OpenLayers.Feature.Vector(e.point, null, {
|
||||
graphicName: 'cross',
|
||||
strokeColor: '#f00',
|
||||
strokeWidth: 2,
|
||||
fillOpacity: 0,
|
||||
pointRadius: 10
|
||||
}),
|
||||
new OpenLayers.Feature.Vector(
|
||||
OpenLayers.Geometry.Polygon.createRegularPolygon(
|
||||
new OpenLayers.Geometry.Point(e.point.x, e.point.y),
|
||||
e.position.coords.accuracy / 2, 50, 0
|
||||
), null, {
|
||||
fillOpacity: 0.1,
|
||||
fillColor: '#000',
|
||||
strokeColor: '#f00',
|
||||
strokeOpacity: 0.6
|
||||
}
|
||||
)
|
||||
]);
|
||||
map.zoomToExtent(vector.getDataExtent());
|
||||
}
|
||||
}
|
||||
})
|
||||
]);
|
||||
|
||||
// Map with navigation controls optimized for touch devices
|
||||
map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
theme: null,
|
||||
projection: "EPSG:3857",
|
||||
units: "m",
|
||||
maxExtent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34],
|
||||
maxResolution: 156543.0339,
|
||||
numZoomLevels: 20,
|
||||
controls: [
|
||||
new OpenLayers.Control.Navigation({
|
||||
mouseWheelOptions: {
|
||||
cumulative: false,
|
||||
interval: 20
|
||||
},
|
||||
dragPanOptions: {
|
||||
enableKinetic: {
|
||||
deceleration: 0.02
|
||||
}
|
||||
},
|
||||
zoomBoxEnabled: false
|
||||
}),
|
||||
new OpenLayers.Control.Attribution(),
|
||||
zoomPanel,
|
||||
layerPanel
|
||||
],
|
||||
eventListeners: {
|
||||
moveend: function() {
|
||||
// update anchor for permalinks
|
||||
var ctr = map.getCenter();
|
||||
window.location.hash = "x="+ctr.lon+"&y="+ctr.lat+"&z="+map.getZoom();
|
||||
}
|
||||
}
|
||||
});
|
||||
layerPanel.activateControl(mapButton);
|
||||
layerPanel.activateControl(labelButton);
|
||||
|
||||
// Vector layer for the location cross and circle
|
||||
var vector = new OpenLayers.Layer.Vector("Vector Layer");
|
||||
|
||||
// The WMTS layers we're going to add
|
||||
var fmzk, aerial, labels;
|
||||
|
||||
// zoom to initial extent or restore position from permalink
|
||||
function zoomToInitialExtent() {
|
||||
var extent = fmzk.tileFullExtent,
|
||||
ctr = extent.getCenterLonLat(),
|
||||
zoom = map.getZoomForExtent(extent, true),
|
||||
params = OpenLayers.Util.getParameters("?"+window.location.hash.substr(1));
|
||||
OpenLayers.Util.applyDefaults(params, {x:ctr.lon, y:ctr.lat, z:zoom});
|
||||
map.setCenter(new OpenLayers.LonLat(params.x, params.y), params.z);
|
||||
}
|
||||
|
||||
// Request capabilities and create layers
|
||||
OpenLayers.ProxyHost = "proxy.cgi?url=";
|
||||
OpenLayers.Request.GET({
|
||||
url: "http://maps.wien.gv.at/wmts/1.0.0/WMTSCapabilities.xml",
|
||||
success: function(request) {
|
||||
var format = new OpenLayers.Format.WMTSCapabilities();
|
||||
var defaults = {
|
||||
requestEncoding: "REST",
|
||||
matrixSet: "google3857",
|
||||
attribution: 'Datenquelle: Stadt Wien - <a href="http://data.wien.gv.at">data.wien.gv.at</a>'
|
||||
};
|
||||
var doc = request.responseText,
|
||||
caps = format.read(doc);
|
||||
fmzk = format.createLayer(caps, OpenLayers.Util.applyDefaults(
|
||||
{layer:"fmzk", requestEncoding:"REST", transitionEffect:"resize"}, defaults
|
||||
));
|
||||
aerial = format.createLayer(caps, OpenLayers.Util.applyDefaults(
|
||||
{layer:"lb", requestEncoding:"REST", transitionEffect:"resize"}, defaults
|
||||
));
|
||||
labels = format.createLayer(caps, OpenLayers.Util.applyDefaults(
|
||||
{layer:"beschriftung", requestEncoding:"REST", isBaseLayer: false},
|
||||
defaults
|
||||
));
|
||||
map.addLayers([fmzk, aerial, labels]);
|
||||
zoomToInitialExtent();
|
||||
}
|
||||
});
|
||||
|
||||
// Instead of building the layers from the capabilities document, we could
|
||||
// look at it ourselves and create the layers manually. If you want to try
|
||||
// that, uncomment the following code and remove the "Request capabilities
|
||||
// and create layers" block above.
|
||||
/*
|
||||
var extent = new OpenLayers.Bounds(1799448.394855, 6124949.74777, 1848250.442089, 6162571.828177);
|
||||
var defaults = {
|
||||
requestEncoding: "REST",
|
||||
matrixSet: "google3857",
|
||||
tileFullExtent: extent,
|
||||
attribution: 'Datenquelle: Stadt Wien - <a href="http://data.wien.gv.at">data.wien.gv.at</a>'
|
||||
};
|
||||
fmzk = new OpenLayers.Layer.WMTS(OpenLayers.Util.applyDefaults({
|
||||
url: "http://www.wien.gv.at/wmts/fmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg",
|
||||
layer: "fmzk",
|
||||
style: "pastell",
|
||||
transitionEffect: "resize"
|
||||
},
|
||||
defaults));
|
||||
aerial = new OpenLayers.Layer.WMTS(OpenLayers.Util.applyDefaults({
|
||||
url: "http://www.wien.gv.at/wmts/lb/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg",
|
||||
layer: "lb",
|
||||
style: "farbe",
|
||||
transitionEffect: "resize"
|
||||
},
|
||||
defaults));
|
||||
labels = new OpenLayers.Layer.WMTS(OpenLayers.Util.applyDefaults({
|
||||
url: "http://www.wien.gv.at/wmts/beschriftung/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png",
|
||||
layer: "beschriftung",
|
||||
style: "normal",
|
||||
transitionEffect: null,
|
||||
isBaseLayer: false
|
||||
},
|
||||
defaults));
|
||||
map.addLayers([fmzk, aerial, labels]);
|
||||
zoomToInitialExtent();
|
||||
*/
|
||||
|
||||
})();
|
||||
|
||||
// Reliably hide the address bar on Android and iOS devices. From
|
||||
// http://blog.nateps.com/how-to-hide-the-address-bar-in-a-full-screen
|
||||
(function() {
|
||||
var page = document.getElementById("map"),
|
||||
ua = navigator.userAgent,
|
||||
iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'),
|
||||
ipad = ~ua.indexOf('iPad'),
|
||||
ios = iphone || ipad,
|
||||
// Detect if this is running as a fullscreen app from the homescreen
|
||||
fullscreen = window.navigator.standalone,
|
||||
android = ~ua.indexOf('Android'),
|
||||
lastWidth = 0;
|
||||
|
||||
if (android) {
|
||||
// Android's browser adds the scroll position to the innerHeight, just to
|
||||
// make this really fucking difficult. Thus, once we are scrolled, the
|
||||
// page height value needs to be corrected in case the page is loaded
|
||||
// when already scrolled down. The pageYOffset is of no use, since it always
|
||||
// returns 0 while the address bar is displayed.
|
||||
window.onscroll = function() {
|
||||
page.style.height = window.innerHeight + 'px';
|
||||
};
|
||||
}
|
||||
var setupScroll = window.onload = function() {
|
||||
// Start out by adding the height of the location bar to the width, so that
|
||||
// we can scroll past it
|
||||
if (ios) {
|
||||
// iOS reliably returns the innerWindow size for documentElement.clientHeight
|
||||
// but window.innerHeight is sometimes the wrong value after rotating
|
||||
// the orientation
|
||||
var height = document.documentElement.clientHeight;
|
||||
// Only add extra padding to the height on iphone / ipod, since the ipad
|
||||
// browser doesn't scroll off the location bar.
|
||||
if (iphone && !fullscreen) height += 60;
|
||||
page.style.height = height + 'px';
|
||||
} else if (android) {
|
||||
// The stock Android browser has a location bar height of 56 pixels, but
|
||||
// this very likely could be broken in other Android browsers.
|
||||
page.style.height = (window.innerHeight + 56) + 'px';
|
||||
}
|
||||
// Scroll after a timeout, since iOS will scroll to the top of the page
|
||||
// after it fires the onload event
|
||||
setTimeout(scrollTo, 0, 0, 1);
|
||||
};
|
||||
(window.onresize = function() {
|
||||
var pageWidth = page.offsetWidth;
|
||||
// Android doesn't support orientation change, so check for when the width
|
||||
// changes to figure out when the orientation changes
|
||||
if (lastWidth == pageWidth) return;
|
||||
lastWidth = pageWidth;
|
||||
setupScroll();
|
||||
})();
|
||||
})();
|
||||
@@ -35,6 +35,36 @@
|
||||
padding : 2px 4px;
|
||||
border-radius : 5px 0 0 0;
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomInItemInactive,
|
||||
div.olControlZoomPanel .olControlZoomOutItemInactive {
|
||||
background: rgba(0,0,0,0.2);
|
||||
position: absolute;
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomInItemInactive {
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomOutItemInactive {
|
||||
border-radius: 0 0 5px 5px ;
|
||||
top: 37px;
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomOutItemInactive:after ,
|
||||
div.olControlZoomPanel .olControlZoomInItemInactive:after{
|
||||
font-weight: bold;
|
||||
content : '+';
|
||||
font-size : 36px;
|
||||
padding: 7px;
|
||||
z-index: 2000;
|
||||
color : #fff;
|
||||
line-height: 1em;
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomOutItemInactive:after{
|
||||
content: '–';
|
||||
line-height: 0.9em;
|
||||
padding: 0 8px;
|
||||
}
|
||||
div.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
|
||||
display: none;
|
||||
}
|
||||
#title, #tags, #shortdesc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -26,7 +26,7 @@ var init = function () {
|
||||
enableKinetic: true
|
||||
}
|
||||
}),
|
||||
new OpenLayers.Control.Zoom()
|
||||
new OpenLayers.Control.ZoomPanel()
|
||||
],
|
||||
layers: [
|
||||
new OpenLayers.Layer.OSM("OpenStreetMap", null, {
|
||||
|
||||
@@ -96,7 +96,6 @@
|
||||
if (rotate || drag) {
|
||||
controls.modify.mode &= ~OpenLayers.Control.ModifyFeature.RESHAPE;
|
||||
}
|
||||
controls.modify.createVertices = document.getElementById("createVertices").checked;
|
||||
var sides = parseInt(document.getElementById("sides").value);
|
||||
sides = Math.max(3, isNaN(sides) ? 0 : sides);
|
||||
controls.regular.handler.sides = sides;
|
||||
@@ -162,11 +161,6 @@
|
||||
onclick="toggleControl(this);" />
|
||||
<label for="modifyToggle">modify feature</label>
|
||||
<ul>
|
||||
<li>
|
||||
<input id="createVertices" type="checkbox" checked
|
||||
name="createVertices" onchange="update()" />
|
||||
<label for="createVertices">allow vertices creation</label>
|
||||
</li>
|
||||
<li>
|
||||
<input id="rotate" type="checkbox"
|
||||
name="rotate" onchange="update()" />
|
||||
|
||||
74
examples/multimap-mercator.html
Normal file
74
examples/multimap-mercator.html
Normal file
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>MultiMap SphericalMercator</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<!--[if lte IE 6]>
|
||||
<link rel="stylesheet" href="../theme/default/ie6-style.css" type="text/css" />
|
||||
<![endif]-->
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<style type="text/css">
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 512px;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
</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 src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
var map, ve, merc, vector;
|
||||
|
||||
function init(){
|
||||
var options = {
|
||||
projection: "EPSG:900913",
|
||||
units: "m",
|
||||
maxResolution: 156543.0339,
|
||||
maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
|
||||
20037508, 20037508)
|
||||
};
|
||||
map = new OpenLayers.Map('map', options);
|
||||
|
||||
ve = new OpenLayers.Layer.MultiMap(
|
||||
"multimap",
|
||||
{'sphericalMercator': true}
|
||||
);
|
||||
merc = new OpenLayers.Layer.WMS("World Map",
|
||||
"http://maps.opengeo.org/geowebcache/service/wms",
|
||||
{'layers': 'bluemarble'},
|
||||
{'opacity': 0.4,
|
||||
'isBaseLayer': false,
|
||||
'wrapDateLine': true});
|
||||
|
||||
// create a vector layer for drawing
|
||||
vector = new OpenLayers.Layer.Vector("Editable Vectors");
|
||||
|
||||
map.addLayers([ve, merc, vector]);
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
map.addControl(new OpenLayers.Control.EditingToolbar(vector));
|
||||
map.zoomToMaxExtent()
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">MultiMap Mercator Example</h1>
|
||||
<div id="tags">
|
||||
MultiMap, basic, cleanup
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
This sphericalMercator example using multimap demonstrates that the
|
||||
multimap layer does not fully support the sphericalMercator projection at
|
||||
this time.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></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