Merge pull request #4693 from openlayers/release-v3.13.0

Release v3.13.0

.eslintignore

@@ -0,0 +1,2 @@
+examples/Jugl.js
+examples/resources/

.jshintrc

@@ -1,5 +0,0 @@
-{
-  "-W030": true,
-  "-W083": true,
-  "-W069": true
-}

.travis.yml

@@ -1,5 +1,4 @@
-sudo: required
-dist: trusty
+sudo: false
 
 language: node_js
 
@@ -14,7 +13,6 @@ env:
 
 before_install:
   - "npm prune"
-  - "sudo pip install -r requirements.txt"
 
 before_script:
   - "rm src/ol/renderer/webgl/*shader.js"

CONTRIBUTING.md

@@ -81,8 +81,7 @@ include:
 
 OpenLayers 3 follows [Google's JavaScript Style
 Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml).
-This is checked using the [Closure
-Linter](https://developers.google.com/closure/utilities/) in strict mode.  You
+This is checked using [ESLint](http://eslint.org/), you
 can run the linter locally on your machine before committing using the `lint`
 target:
 

DEVELOPING.md

@@ -25,11 +25,11 @@ The minimum requirements are:
 
 * GNU Make
 * Git
-* [Node.js](http://nodejs.org/) (0.10.x or higher)
-* Python 2.6 or 2.7 with a couple of extra modules (see below)
+* [Node.js](http://nodejs.org/) (higher than 0.12.x)
+* Python 2.6 or 2.7
 * Java 7 (JRE and JDK)
 
-The executables `git`, `node`, `python` and `java` should be in your `PATH`.
+The executables `git`, `node`, and `java` should be in your `PATH`.
 
 You can check your configuration by running:
 
@@ -39,17 +39,6 @@ To install the Node.js dependencies run
 
     $ npm install
 
-To install the extra Python modules, run:
-
-    $ sudo pip install -r requirements.txt
-or
-
-    $ cat requirements.txt | sudo xargs easy_install
-
-depending on your OS and Python installation.
-
-(You can also install the Python modules in a Python virtual environment if you want to.)
-
 ## Working with the build tool
 
 As an ol3 developer you will use `make` to run build targets defined in the

LICENSE.md

@@ -1,4 +1,4 @@
-Copyright 2005-2015 OpenLayers Contributors. All rights reserved.
+Copyright 2005-2016 OpenLayers Contributors. All rights reserved.
 
 Redistribution and use in source and binary forms, with or without modification,
 are permitted provided that the following conditions are met:

Makefile

@@ -93,8 +93,7 @@ compile-examples: build/compiled-examples/all.combined.js
 
 .PHONY: clean
 clean:
-	rm -f build/timestamps/gjslint-timestamp
-	rm -f build/timestamps/jshint-timestamp
+	rm -f build/timestamps/eslint-timestamp
 	rm -f build/timestamps/check-*-timestamp
 	rm -f build/ol.css
 	rm -f build/ol.js
@@ -120,9 +119,8 @@ examples: $(BUILD_EXAMPLES)
 install: build/timestamps/node-modules-timestamp
 
 .PHONY: lint
-lint: build/timestamps/gjslint-timestamp build/timestamps/jshint-timestamp \
-      build/timestamps/check-requires-timestamp \
-      build/timestamps/check-whitespace-timestamp
+lint: build/timestamps/eslint-timestamp \
+      build/timestamps/check-requires-timestamp
 
 .PHONY: npm-install
 npm-install: build/timestamps/node-modules-timestamp
@@ -193,13 +191,6 @@ build/timestamps/check-requires-timestamp: $(SRC_JS) $(EXAMPLES_JS) \
 	@python bin/check-requires.py $(CLOSURE_LIB) $^
 	@touch $@
 
-build/timestamps/check-whitespace-timestamp: $(SRC_JS) $(EXAMPLES_JS) \
-                                             $(SPEC_JS) $(SPEC_RENDERING_JS) \
-                                             $(SRC_JSDOC)
-	@mkdir -p $(@D)
-	@python bin/check-whitespace.py $^
-	@touch $@
-
 build/compiled-examples/all.js: $(EXAMPLES_JS)
 	@mkdir -p $(@D)
 	@python bin/combine-examples.py $^ > $@
@@ -231,13 +222,6 @@ build/timestamps/jsdoc-$(BRANCH)-timestamp: config/jsdoc/api/index.md \
 	./node_modules/.bin/jsdoc config/jsdoc/api/index.md -c config/jsdoc/api/conf.json -d $(BUILD_HOSTED)/apidoc
 	@touch $@
 
-build/timestamps/gjslint-timestamp: $(SRC_JS) $(SPEC_JS) $(SPEC_RENDERING_JS) \
-                                    $(EXAMPLES_JS)
-	@mkdir -p $(@D)
-	@echo "Running gjslint..."
-	@gjslint --jslint_error=all --custom_jsdoc_tags=event,fires,function,classdesc,api,observable --strict $?
-	@touch $@
-
 $(BUILD_HOSTED_EXAMPLES_JS): $(BUILD_HOSTED)/examples/%.js: build/examples/%.js
 	@mkdir -p $(@D)
 	@python bin/split-example.py $< $(@D)
@@ -271,13 +255,12 @@ $(BUILD_HOSTED)/build/ol-deps.js: host-libraries
            --root_with_prefix "$(BUILD_HOSTED)/closure-library/third_party ../../third_party" \
            --output_file $@
 
-build/timestamps/jshint-timestamp: $(SRC_JS) $(SPEC_JS) $(SPEC_RENDERING_JS) \
+build/timestamps/eslint-timestamp: $(SRC_JS) $(SPEC_JS) $(SPEC_RENDERING_JS) \
                                    $(TASKS_JS) $(EXAMPLES_JS) \
-                                   examples/resources/common.js \
                                    build/timestamps/node-modules-timestamp
 	@mkdir -p $(@D)
-	@echo "Running jshint..."
-	@./node_modules/.bin/jshint --verbose $?
+	@echo "Running eslint..."
+	@./node_modules/.bin/eslint $?
 	@touch $@
 
 build/timestamps/node-modules-timestamp: package.json

bin/check-whitespace.py

@@ -1,46 +0,0 @@
-import logging
-import re
-import sys
-
-logging.basicConfig(format='%(asctime)s %(name)s: %(message)s',
-                    level=logging.INFO)
-
-logger = logging.getLogger('check-whitespace')
-
-CR_RE = re.compile(r'\r')
-LEADING_WHITESPACE_RE = re.compile(r'\s+')
-TRAILING_WHITESPACE_RE = re.compile(r'\s+\n\Z')
-NO_NEWLINE_RE = re.compile(r'[^\n]\Z')
-ALL_WHITESPACE_RE = re.compile(r'\s+\Z')
-
-
-def check_whitespace(*filenames):
-    errors = 0
-    for filename in sorted(filenames):
-        whitespace = False
-        for lineno, line in enumerate(open(filename, 'rU')):
-            if lineno == 0 and LEADING_WHITESPACE_RE.match(line):
-                logger.info('%s:%d: leading whitespace', filename, lineno + 1)
-                errors += 1
-            if CR_RE.search(line):
-                logger.info('%s:%d: carriage return character in line',
-                            filename, lineno + 1)
-                errors += 1
-            if TRAILING_WHITESPACE_RE.search(line):
-                logger.info('%s:%d: trailing whitespace', filename, lineno + 1)
-                errors += 1
-            if NO_NEWLINE_RE.search(line):
-                logger.info('%s:%d: no newline at end of file', filename,
-                            lineno + 1)
-                errors += 1
-            whitespace = ALL_WHITESPACE_RE.match(line)
-        if whitespace:
-            logger.info('%s: trailing whitespace at end of file', filename)
-            errors += 1
-    return errors
-
-if __name__ == "__main__":
-    errors = check_whitespace(*sys.argv[1:])
-    if errors > 0:
-        logger.error('%d whitespace errors' % (errors,))
-        sys.exit(1)

changelog/upgrade-notes.md

@@ -1,5 +1,31 @@
 ## Upgrade notes
 
+### v3.14.0
+
+### v3.13.0
+
+#### `proj4js` integration
+
+Before this release, OpenLayers depended on the global proj4 namespace. When using a module loader like Browserify, you might not want to depend on the global `proj4` namespace. You can use the `ol.proj.setProj4` function to set the proj4 function object. For example in a browserify ES6 environment:
+
+```js
+import ol from 'openlayers';
+import proj4 from 'proj4';
+ol.proj.setProj4(proj4);
+```
+
+#### `ol.source.TileJSON` changes
+
+The `ol.source.TileJSON` now uses `XMLHttpRequest` to load the TileJSON instead of JSONP with callback.
+When using server without proper CORS support, `jsonp: true` option can be passed to the constructor to get the same behavior as before:
+```js
+new ol.source.TileJSON({
+  url: 'http://serverwithoutcors.com/tilejson.json',
+  jsonp: true
+})
+```
+Also for Mapbox v3, make sure you use urls ending with `.json` (which are able to handle both `XMLHttpRequest` and JSONP) instead of `.jsonp`.
+
 ### v3.12.0
 
 #### `ol.Map#forEachFeatureAtPixel` changes

changelog/v3.13.0.md

@@ -0,0 +1,109 @@
+# v3.13.0
+
+## Summary
+
+The v3.13.0 release includes features and fixes from 68 pull requests since the v3.12.1 release.  New features and improvements include:
+
+* Improved tiles rendering for the canvas renderer
+* Improved MapQuest rendering
+* Add color option to ol.style.Icon
+* Load TileJSON sources via XMLHttpRequest by default
+* Add new ol.geom.LineString#getCoordinateAt function
+* Simplify meters per unit handling
+* Use ESLint as a replacement for gjslint.py and jshint
+
+## Upgrade notes
+
+#### `proj4js` integration
+
+Before this release, OpenLayers depended on the global proj4 namespace. When using a module loader like Browserify, you might not want to depend on the global `proj4` namespace. You can use the `ol.proj.setProj4` function to set the proj4 function object. For example in a browserify ES6 environment:
+
+```js
+import ol from 'openlayers';
+import proj4 from 'proj4';
+ol.proj.setProj4(proj4);
+```
+
+#### `ol.source.TileJSON` changes
+
+The `ol.source.TileJSON` now uses `XMLHttpRequest` to load the TileJSON instead of JSONP with callback.
+When using server without proper CORS support, `jsonp: true` option can be passed to the constructor to get the same behavior as before:
+```js
+new ol.source.TileJSON({
+  url: 'http://serverwithoutcors.com/tilejson.json',
+  jsonp: true
+})
+```
+Also for Mapbox v3, make sure you use urls ending with `.json` (which are able to handle both `XMLHttpRequest` and JSONP) instead of `.jsonp`.
+
+
+## Full list of changes
+
+ * [#4694](https://github.com/openlayers/ol3/pull/4694) - Fix eslint errors in wms-time example ([@fredj](https://github.com/fredj))
+ * [#4527](https://github.com/openlayers/ol3/pull/4527) - Add support for smooth TileWMS dimensions ([@bartvde](https://github.com/bartvde))
+ * [#4691](https://github.com/openlayers/ol3/pull/4691) - Updated Bing Maps key. ([@tschaub](https://github.com/tschaub))
+ * [#4673](https://github.com/openlayers/ol3/pull/4673) - Respect fixed tile url functions when setting url(s) ([@ahocevar](https://github.com/ahocevar))
+ * [#4689](https://github.com/openlayers/ol3/pull/4689) - Revert "Do not render in handleDownEvent" ([@openlayers](https://github.com/openlayers))
+ * [#4688](https://github.com/openlayers/ol3/pull/4688) - Give map a focus-outline in accessible-example ([@marcjansen](https://github.com/marcjansen))
+ * [#4642](https://github.com/openlayers/ol3/pull/4642) - Move the icon style color to its own example ([@alexbrault](https://github.com/alexbrault))
+ * [#4685](https://github.com/openlayers/ol3/pull/4685) - Remove bin/check-whitespace.py ([@fredj](https://github.com/fredj))
+ * [#4684](https://github.com/openlayers/ol3/pull/4684) - Update eslint-config-openlayers to version 3.0.0 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4677](https://github.com/openlayers/ol3/pull/4677) - Make pixel projection handling work in compiled mode ([@ahocevar](https://github.com/ahocevar))
+ * [#4639](https://github.com/openlayers/ol3/pull/4639) - Remove use of goog.bind and use ES5 .bind. ([@nicholas-l](https://github.com/nicholas-l))
+ * [#4655](https://github.com/openlayers/ol3/pull/4655) - Update browserify to version 13.0.0 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4666](https://github.com/openlayers/ol3/pull/4666) - Add a 'boxdrag' event to ol.interaction.DragBox. Resolves #4563 . ([@WeaveTeam](https://github.com/WeaveTeam))
+ * [#4669](https://github.com/openlayers/ol3/pull/4669) - Remove reference to Closure Linter in CONTRIBUTING.md ([@fredj](https://github.com/fredj))
+ * [#4665](https://github.com/openlayers/ol3/pull/4665) - Update istanbul to version 0.4.2 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4663](https://github.com/openlayers/ol3/pull/4663) - Update glob to version 6.0.4 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4667](https://github.com/openlayers/ol3/pull/4667) - Fix rendering of transparent MapQuest layer type ([@klokantech](https://github.com/klokantech))
+ * [#4661](https://github.com/openlayers/ol3/pull/4661) - Fixes #4654 Developer Documentation Updated ([@gaf-ag](https://github.com/gaf-ag))
+ * [#4658](https://github.com/openlayers/ol3/pull/4658) - Update jquery to version 2.2.0 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4659](https://github.com/openlayers/ol3/pull/4659) - Make sure icons show up in Safari ([@bartvde](https://github.com/bartvde))
+ * [#4652](https://github.com/openlayers/ol3/pull/4652) - Use map.getTargetElement instead of map.getTarget ([@fredj](https://github.com/fredj))
+ * [#4649](https://github.com/openlayers/ol3/pull/4649) - Missing parameter description for ol.source.Tile#getOpaque ([@klokantech](https://github.com/klokantech))
+ * [#4602](https://github.com/openlayers/ol3/pull/4602) - Use ESLint. ([@tschaub](https://github.com/tschaub))
+ * [#4628](https://github.com/openlayers/ol3/pull/4628) - Fix for reprojecting opaque tile sources ([@klokantech](https://github.com/klokantech))
+ * [#4618](https://github.com/openlayers/ol3/pull/4618) - Update resemblejs to version 2.1.0 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4647](https://github.com/openlayers/ol3/pull/4647) - Proper rounding for possibly negative numbers ([@ahocevar](https://github.com/ahocevar))
+ * [#4641](https://github.com/openlayers/ol3/pull/4641) - Remove extra options from icon example. ([@tschaub](https://github.com/tschaub))
+ * [#4629](https://github.com/openlayers/ol3/pull/4629) - Simplify scaleline calculation ([@ahocevar](https://github.com/ahocevar))
+ * [#4457](https://github.com/openlayers/ol3/pull/4457) - Add color option to ol.style.Icon ([@alexbrault](https://github.com/alexbrault))
+ * [#4638](https://github.com/openlayers/ol3/pull/4638) - Do not rely on projection extent ([@ahocevar](https://github.com/ahocevar))
+ * [#4635](https://github.com/openlayers/ol3/pull/4635) - Update async to version 1.5.2 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4581](https://github.com/openlayers/ol3/pull/4581) - Do not render in handleDownEvent ([@ahocevar](https://github.com/ahocevar))
+ * [#4541](https://github.com/openlayers/ol3/pull/4541) - Add new ol.geom.LineString#getCoordinateAt function ([@fredj](https://github.com/fredj))
+ * [#4489](https://github.com/openlayers/ol3/pull/4489) - Update phantomjs to version 1.9.19 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4625](https://github.com/openlayers/ol3/pull/4625) - Use XHR by default to load TileJSON in ol.source.TileJSON ([@klokantech](https://github.com/klokantech))
+ * [#4622](https://github.com/openlayers/ol3/pull/4622) - Update fs-extra to version 0.26.4 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4630](https://github.com/openlayers/ol3/pull/4630) - Simplify meters per unit handling ([@ahocevar](https://github.com/ahocevar))
+ * [#4490](https://github.com/openlayers/ol3/pull/4490) - Update istanbul to version 0.4.1 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4574](https://github.com/openlayers/ol3/pull/4574) - Added boxEndCondition to DragBoxOptions to replace the hardcoded chec… ([@WeaveTeam](https://github.com/WeaveTeam))
+ * [#4553](https://github.com/openlayers/ol3/pull/4553) - Update mustache to version 2.2.1 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4626](https://github.com/openlayers/ol3/pull/4626) - Fixed documentation error ([@simonseyock](https://github.com/simonseyock))
+ * [#4606](https://github.com/openlayers/ol3/pull/4606) - Include originating MapBrowserEvent in ol.DragBoxEvent ([@fredj](https://github.com/fredj))
+ * [#4614](https://github.com/openlayers/ol3/pull/4614) - Remove checksum interface. ([@tschaub](https://github.com/tschaub))
+ * [#4613](https://github.com/openlayers/ol3/pull/4613) - Include own layer in layerFilter and only select unselected features ([@ahocevar](https://github.com/ahocevar))
+ * [#4612](https://github.com/openlayers/ol3/pull/4612) - Set oli.source.VectorEvent#feature to ol.Feature|undefined ([@fredj](https://github.com/fredj))
+ * [#4620](https://github.com/openlayers/ol3/pull/4620) - Fix olx.format.PolylineOptions#factor type ([@fredj](https://github.com/fredj))
+ * [#4621](https://github.com/openlayers/ol3/pull/4621) - Fix olx.format.GPXOptions#readExtensions type ([@fredj](https://github.com/fredj))
+ * [#4619](https://github.com/openlayers/ol3/pull/4619) - Add option to load TileJSON via XHR ([@klokantech](https://github.com/klokantech))
+ * [#4617](https://github.com/openlayers/ol3/pull/4617) - Add missing return type to GeoJSON format ([@gberaudo](https://github.com/gberaudo))
+ * [#4615](https://github.com/openlayers/ol3/pull/4615) - Adjust copyright to include 2016 ([@marcjansen](https://github.com/marcjansen))
+ * [#4616](https://github.com/openlayers/ol3/pull/4616) - Update closure-util to version 1.10.0 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4596](https://github.com/openlayers/ol3/pull/4596) - Use consistent tile coordinate keys ([@ahocevar](https://github.com/ahocevar))
+ * [#4609](https://github.com/openlayers/ol3/pull/4609) - Add ol.proj.setProj4 function ([@bartvde](https://github.com/bartvde))
+ * [#4603](https://github.com/openlayers/ol3/pull/4603) - Update async to version 1.5.1 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4604](https://github.com/openlayers/ol3/pull/4604) - Update clean-css to version 3.4.9 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4600](https://github.com/openlayers/ol3/pull/4600) - Update glob to version 6.0.3 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4595](https://github.com/openlayers/ol3/pull/4595) - Pass 'opaque' option on to superclass ([@ahocevar](https://github.com/ahocevar))
+ * [#4598](https://github.com/openlayers/ol3/pull/4598) - Make ol.source.Tile#getTilePixelRatio work correctly for all sources ([@klokantech](https://github.com/klokantech))
+ * [#4594](https://github.com/openlayers/ol3/pull/4594) - Fix for TileQueue gradually choking up when using raster reprojection ([@klokantech](https://github.com/klokantech))
+ * [#4557](https://github.com/openlayers/ol3/pull/4557) - Conditionally render tiles to a separate tile canvas ([@ahocevar](https://github.com/ahocevar))
+ * [#4580](https://github.com/openlayers/ol3/pull/4580) - Update fs-extra to version 0.26.3 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4579](https://github.com/openlayers/ol3/pull/4579) - Release v3.12.1 ([@openlayers](https://github.com/openlayers))
+ * [#4578](https://github.com/openlayers/ol3/pull/4578) - Fix apidoc landing page markup ([@ahocevar](https://github.com/ahocevar))
+ * [#4575](https://github.com/openlayers/ol3/pull/4575) - Update rbush to version 1.4.2 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4571](https://github.com/openlayers/ol3/pull/4571) - Correct typedef of selectinteraction options obj ([@marcjansen](https://github.com/marcjansen))
+ * [#4570](https://github.com/openlayers/ol3/pull/4570) - Rename defaultSort to numberSafeCompareFunction on ol.array ([@bartvde](https://github.com/bartvde))
+ * [#4567](https://github.com/openlayers/ol3/pull/4567) - Always pass on a compare function to sort ([@bartvde](https://github.com/bartvde))
+ * [#4001](https://github.com/openlayers/ol3/pull/4001) - Export PDF's using jsPDF ([@bartvde](https://github.com/bartvde))

config/examples-all.json

@@ -18,6 +18,7 @@
       "externs/example.js",
       "externs/fastclick.js",
       "externs/geojson.js",
+      "externs/jspdf.js",
       "externs/jquery-1.9.js",
       "externs/proj4js.js",
       "externs/tilejson.js",

config/examples/example.html

@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="./resources/layout.css" type="text/css">
     {{{ extraHead.local }}}
     {{{ css.tag }}}
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,Function.prototype.bind|gated"></script>
     <script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
     <title>{{ title }}</title>
   </head>

examples/.eslintrc

@@ -0,0 +1,17 @@
+{
+  "globals": {
+    "FastClick": false,
+    "$": false,
+    "arc": false,
+    "common": false,
+    "createMapboxStreetsV6Style": false,
+    "d3": false,
+    "jsPDF": false,
+    "jsts": false,
+    "topojson": false,
+    "turf": false
+  },
+  "rules": {
+    "no-unused-vars": [2, {"varsIgnorePattern": "^map"}]
+  }
+}

examples/accessible.css

@@ -14,3 +14,6 @@ a.skiplink:focus {
   background-color: #fff;
   padding: 0.3em;
 }
+#map:focus {
+  outline: #4A74A8 solid 0.15em;
+}

examples/attributions.js

@@ -14,7 +14,7 @@ var map = new ol.Map({
       source: new ol.source.OSM()
     })
   ],
-  controls: ol.control.defaults({ attribution: false }).extend([attribution]),
+  controls: ol.control.defaults({attribution: false}).extend([attribution]),
   renderer: common.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View({

examples/bing-maps.html

@@ -6,7 +6,7 @@ docs: >
   <p>When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set <code>maxZoom</code> to <code>19</code> in the options passed to <code>ol.source.BingMaps</code>.</p>
 tags: "bing, bing-maps"
 cloak:
-  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
+  AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
  <div id="map" class="map"></div>
  <select id="layer-select">

examples/bing-maps.js

@@ -18,7 +18,7 @@ for (i = 0, ii = styles.length; i < ii; ++i) {
     visible: false,
     preload: Infinity,
     source: new ol.source.BingMaps({
-      key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
+      key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
       imagerySet: styles[i]
       // use maxZoom 19 to see stretched tiles instead of the BingMaps
       // "no photos at this zoom level" tiles

examples/blend-modes.js

@@ -85,8 +85,13 @@ var map = new ol.Map({
   })
 });
 
+// Get the form elements and bind the listeners
+var select = document.getElementById('blend-mode');
+var affectRed = document.getElementById('affect-red');
+var affectGreen = document.getElementById('affect-green');
+var affectBlue = document.getElementById('affect-blue');
+
 
-// Various helper methods and event handlers
 /**
  * This method sets the globalCompositeOperation to the value of the select
  * field and it is bound to the precompose event of the layers.
@@ -154,12 +159,6 @@ var affectLayerClicked = function() {
 };
 
 
-// Get the form elements and bind the listeners
-var select = document.getElementById('blend-mode');
-var affectRed = document.getElementById('affect-red');
-var affectGreen = document.getElementById('affect-green');
-var affectBlue = document.getElementById('affect-blue');
-
 // Rerender map when blend mode changes
 select.addEventListener('change', function() {
   map.render();

examples/box-selection.js

@@ -48,7 +48,7 @@ map.addInteraction(dragBox);
 
 var infoBox = document.getElementById('info');
 
-dragBox.on('boxend', function(e) {
+dragBox.on('boxend', function() {
   // features that intersect the box are added to the collection of
   // selected features, and their names are displayed in the "info"
   // div
@@ -64,7 +64,7 @@ dragBox.on('boxend', function(e) {
 });
 
 // clear selection when drawing a new box and when clicking on the map
-dragBox.on('boxstart', function(e) {
+dragBox.on('boxstart', function() {
   selectedFeatures.clear();
   infoBox.innerHTML = ' ';
 });

examples/center.js

@@ -65,14 +65,7 @@ zoomtoswitzerlandbest.addEventListener('click', function() {
   var feature = source.getFeatures()[0];
   var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
   var size = /** @type {ol.Size} */ (map.getSize());
-  view.fit(
-      polygon,
-      size,
-      {
-        padding: [170, 50, 30, 150],
-        constrainResolution: false
-      }
-  );
+  view.fit(polygon, size, {padding: [170, 50, 30, 150], constrainResolution: false});
 }, false);
 
 var zoomtoswitzerlandconstrained =
@@ -81,13 +74,7 @@ zoomtoswitzerlandconstrained.addEventListener('click', function() {
   var feature = source.getFeatures()[0];
   var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
   var size = /** @type {ol.Size} */ (map.getSize());
-  view.fit(
-      polygon,
-      size,
-      {
-        padding: [170, 50, 30, 150]
-      }
-  );
+  view.fit(polygon, size, {padding: [170, 50, 30, 150]});
 }, false);
 
 var zoomtoswitzerlandnearest =
@@ -96,14 +83,7 @@ zoomtoswitzerlandnearest.addEventListener('click', function() {
   var feature = source.getFeatures()[0];
   var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
   var size = /** @type {ol.Size} */ (map.getSize());
-  view.fit(
-      polygon,
-      size,
-      {
-        padding: [170, 50, 30, 150],
-        nearest: true
-      }
-  );
+  view.fit(polygon, size, {padding: [170, 50, 30, 150], nearest: true});
 }, false);
 
 var zoomtolausanne = document.getElementById('zoomtolausanne');
@@ -111,14 +91,7 @@ zoomtolausanne.addEventListener('click', function() {
   var feature = source.getFeatures()[1];
   var point = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
   var size = /** @type {ol.Size} */ (map.getSize());
-  view.fit(
-      point,
-      size,
-      {
-        padding: [170, 50, 30, 150],
-        minResolution: 50
-      }
-  );
+  view.fit(point, size, {padding: [170, 50, 30, 150], minResolution: 50});
 }, false);
 
 var centerlausanne = document.getElementById('centerlausanne');
@@ -126,9 +99,5 @@ centerlausanne.addEventListener('click', function() {
   var feature = source.getFeatures()[1];
   var point = /** @type {ol.geom.Point} */ (feature.getGeometry());
   var size = /** @type {ol.Size} */ (map.getSize());
-  view.centerOn(
-      point.getCoordinates(),
-      size,
-      [570, 500]
-  );
+  view.centerOn(point.getCoordinates(), size, [570, 500]);
 }, false);

examples/cluster.js

@@ -34,7 +34,7 @@ var clusterSource = new ol.source.Cluster({
 var styleCache = {};
 var clusters = new ol.layer.Vector({
   source: clusterSource,
-  style: function(feature, resolution) {
+  style: function(feature) {
     var size = feature.get('features').length;
     var style = styleCache[size];
     if (!style) {
@@ -65,10 +65,6 @@ var raster = new ol.layer.Tile({
   source: new ol.source.MapQuest({layer: 'sat'})
 });
 
-var raw = new ol.layer.Vector({
-  source: source
-});
-
 var map = new ol.Map({
   layers: [raster, clusters],
   renderer: 'canvas',

examples/color-manipulation.js

@@ -138,6 +138,8 @@ var raster = new ol.source.Raster({
   }
 });
 
+var controls = {};
+
 raster.on('beforeoperations', function(event) {
   var data = event.data;
   for (var id in controls) {
@@ -160,7 +162,6 @@ var map = new ol.Map({
 });
 
 var controlIds = ['hue', 'chroma', 'lightness'];
-var controls = {};
 controlIds.forEach(function(id) {
   var control = document.getElementById(id);
   var output = document.getElementById(id + 'Out');

examples/custom-controls.js

@@ -19,7 +19,6 @@ var app = window.app;
 //
 
 
-
 /**
  * @constructor
  * @extends {ol.control.Control}
@@ -33,7 +32,7 @@ app.RotateNorthControl = function(opt_options) {
   button.innerHTML = 'N';
 
   var this_ = this;
-  var handleRotateNorth = function(e) {
+  var handleRotateNorth = function() {
     this_.getMap().getView().setRotation(0);
   };
 

examples/custom-interactions.js

@@ -22,7 +22,6 @@ goog.require('ol.style.Style');
 var app = {};
 
 
-
 /**
  * @constructor
  * @extends {ol.interaction.Pointer}
@@ -72,7 +71,7 @@ app.Drag.prototype.handleDownEvent = function(evt) {
   var map = evt.map;
 
   var feature = map.forEachFeatureAtPixel(evt.pixel,
-      function(feature, layer) {
+      function(feature) {
         return feature;
       });
 
@@ -89,13 +88,6 @@ app.Drag.prototype.handleDownEvent = function(evt) {
  * @param {ol.MapBrowserEvent} evt Map browser event.
  */
 app.Drag.prototype.handleDragEvent = function(evt) {
-  var map = evt.map;
-
-  var feature = map.forEachFeatureAtPixel(evt.pixel,
-      function(feature, layer) {
-        return feature;
-      });
-
   var deltaX = evt.coordinate[0] - this.coordinate_[0];
   var deltaY = evt.coordinate[1] - this.coordinate_[1];
 
@@ -115,7 +107,7 @@ app.Drag.prototype.handleMoveEvent = function(evt) {
   if (this.cursor_) {
     var map = evt.map;
     var feature = map.forEachFeatureAtPixel(evt.pixel,
-        function(feature, layer) {
+        function(feature) {
           return feature;
         });
     var element = evt.map.getTargetElement();
@@ -133,10 +125,9 @@ app.Drag.prototype.handleMoveEvent = function(evt) {
 
 
 /**
- * @param {ol.MapBrowserEvent} evt Map browser event.
  * @return {boolean} `false` to stop the drag sequence.
  */
-app.Drag.prototype.handleUpEvent = function(evt) {
+app.Drag.prototype.handleUpEvent = function() {
   this.coordinate_ = null;
   this.feature_ = null;
   return false;
@@ -158,7 +149,7 @@ var map = new ol.Map({
   layers: [
     new ol.layer.Tile({
       source: new ol.source.TileJSON({
-        url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
+        url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json'
       })
     }),
     new ol.layer.Vector({

examples/d3.js

@@ -39,7 +39,7 @@ d3.json('data/topojson/us.json', function(error, us) {
    * @param {number} pixelRatio Pixel ratio.
    * @param {ol.Size} size Size.
    * @param {ol.proj.Projection} projection Projection.
-   * @return {HTMLCanvasElement}
+   * @return {HTMLCanvasElement} A canvas element.
    */
   var canvasFunction = function(extent, resolution, pixelRatio,
       size, projection) {

examples/device-orientation.js

@@ -39,7 +39,7 @@ el('track').addEventListener('change', function() {
   deviceOrientation.setTracking(this.checked);
 });
 
-deviceOrientation.on('change', function(event) {
+deviceOrientation.on('change', function() {
   el('alpha').innerText = deviceOrientation.getAlpha() + ' [rad]';
   el('beta').innerText = deviceOrientation.getBeta() + ' [rad]';
   el('gamma').innerText = deviceOrientation.getGamma() + ' [rad]';

examples/drag-and-drop-image-vector.html

@@ -6,7 +6,7 @@ docs: >
   Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
 tags: "drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image"
 cloak:
-  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
+  AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>

examples/drag-and-drop-image-vector.js

@@ -100,7 +100,7 @@ var map = new ol.Map({
     new ol.layer.Tile({
       source: new ol.source.BingMaps({
         imagerySet: 'Aerial',
-        key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
+        key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF'
       })
     })
   ],
@@ -128,7 +128,7 @@ dragAndDropInteraction.on('addfeatures', function(event) {
 
 var displayFeatureInfo = function(pixel) {
   var features = [];
-  map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+  map.forEachFeatureAtPixel(pixel, function(feature) {
     features.push(feature);
   });
   if (features.length > 0) {

examples/drag-and-drop.html

@@ -6,7 +6,7 @@ docs: >
   Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.
 tags: "drag-and-drop, gpx, geojson, igc, kml, topojson"
 cloak:
-  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
+  AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>

examples/drag-and-drop.js

@@ -99,7 +99,7 @@ var map = new ol.Map({
     new ol.layer.Tile({
       source: new ol.source.BingMaps({
         imagerySet: 'Aerial',
-        key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
+        key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF'
       })
     })
   ],
@@ -124,7 +124,7 @@ dragAndDropInteraction.on('addfeatures', function(event) {
 
 var displayFeatureInfo = function(pixel) {
   var features = [];
-  map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+  map.forEachFeatureAtPixel(pixel, function(feature) {
     features.push(feature);
   });
   if (features.length > 0) {

examples/draw-and-modify-features.js

@@ -60,6 +60,8 @@ var modify = new ol.interaction.Modify({
 map.addInteraction(modify);
 
 var draw; // global so we can remove it later
+var typeSelect = document.getElementById('type');
+
 function addInteraction() {
   draw = new ol.interaction.Draw({
     features: features,
@@ -68,14 +70,11 @@ function addInteraction() {
   map.addInteraction(draw);
 }
 
-var typeSelect = document.getElementById('type');
-
 
 /**
- * Let user change the geometry type.
- * @param {Event} e Change event.
+ * Handle change event.
  */
-typeSelect.onchange = function(e) {
+typeSelect.onchange = function() {
   map.removeInteraction(draw);
   addInteraction();
 };

examples/draw-features.js

@@ -83,10 +83,9 @@ function addInteraction() {
 
 
 /**
- * Let user change the geometry type.
- * @param {Event} e Change event.
+ * Handle change event.
  */
-typeSelect.onchange = function(e) {
+typeSelect.onchange = function() {
   map.removeInteraction(draw);
   addInteraction();
 };

examples/earthquake-clusters.js

@@ -56,7 +56,7 @@ function createEarthquakeStyle(feature) {
   });
 }
 
-var maxFeatureCount;
+var maxFeatureCount, vector;
 function calculateClusterInfo(resolution) {
   maxFeatureCount = 0;
   var features = vector.getSource().getFeatures();
@@ -65,7 +65,8 @@ function calculateClusterInfo(resolution) {
     feature = features[i];
     var originalFeatures = feature.get('features');
     var extent = ol.extent.createEmpty();
-    for (var j = 0, jj = originalFeatures.length; j < jj; ++j) {
+    var j, jj;
+    for (j = 0, jj = originalFeatures.length; j < jj; ++j) {
       ol.extent.extend(extent, originalFeatures[j].getGeometry().getExtent());
     }
     maxFeatureCount = Math.max(maxFeatureCount, jj);
@@ -104,7 +105,7 @@ function styleFunction(feature, resolution) {
   return style;
 }
 
-function selectStyleFunction(feature, resolution) {
+function selectStyleFunction(feature) {
   var styles = [new ol.style.Style({
     image: new ol.style.Circle({
       radius: feature.get('radius'),
@@ -120,7 +121,7 @@ function selectStyleFunction(feature, resolution) {
   return styles;
 }
 
-var vector = new ol.layer.Vector({
+vector = new ol.layer.Vector({
   source: new ol.source.Cluster({
     distance: 40,
     source: new ol.source.Vector({

examples/earthquake-custom-symbol.js

@@ -14,7 +14,7 @@ goog.require('ol.style.Style');
 
 
 var styleCache = {};
-var styleFunction = function(feature, resolution) {
+var styleFunction = function(feature) {
   // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
   // standards-violating <magnitude> tag in each Placemark.  We extract it from
   // the Placemark's name instead.
@@ -29,8 +29,8 @@ var styleFunction = function(feature, resolution) {
         /** @type {CanvasRenderingContext2D} */ (canvas.getContext('2d')),
         {size: [size + 2, size + 2], pixelRatio: size / 10});
     render.setFillStrokeStyle(
-        new ol.style.Fill({ color: 'rgba(255, 153, 0, 0.4)' }),
-        new ol.style.Stroke({ color: 'rgba(255, 204, 0, 0.2)', width: 1 }));
+        new ol.style.Fill({color: 'rgba(255, 153, 0, 0.4)'}),
+        new ol.style.Stroke({color: 'rgba(255, 204, 0, 0.2)', width: 1}));
     render.drawPolygonGeometry(new ol.geom.Polygon(
         [[[0, 0], [4, 2], [6, 0], [10, 5], [6, 3], [4, 5], [0, 0]]]));
     style = new ol.style.Style({

examples/export-map.js

@@ -34,7 +34,7 @@ var map = new ol.Map({
 var exportPNGElement = document.getElementById('export-png');
 
 if ('download' in exportPNGElement) {
-  exportPNGElement.addEventListener('click', function(e) {
+  exportPNGElement.addEventListener('click', function() {
     map.once('postcompose', function(event) {
       var canvas = event.context.canvas;
       exportPNGElement.href = canvas.toDataURL('image/png');

examples/export-pdf.css

@@ -0,0 +1,3 @@
+.map {
+  max-width: 566px;
+}

examples/export-pdf.html

@@ -0,0 +1,33 @@
+---
+layout: example.html
+title: Export PDF example
+shortdesc: Example of exporting a map as a PDF.
+docs: >
+  Example of exporting a map as a PDF using the <a href="https://github.com/MrRio/jsPDF" target="_blank">jsPDF</a> library.
+tags: "export, pdf, openstreetmap"
+resources:
+  - http://mrrio.github.io/jsPDF/dist/jspdf.min.js
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>
+<form class="form">
+  <label>Page size </label>
+  <select id="format">
+    <option value="a0">A0 (slow)</option>
+    <option value="a1">A1</option>
+    <option value="a2">A2</option>
+    <option value="a3">A3</option>
+    <option value="a4" selected>A4</option>
+    <option value="a5">A5 (fast)</option>
+  </select>
+  <label>Resolution </label>
+  <select id="resolution">
+    <option value="72">72 dpi (fast)</option>
+    <option value="150">150 dpi</option>
+    <option value="300">300 dpi (slow)</option>
+  </select>
+</form>
+<button id="export-pdf">Export PDF</button>

examples/export-pdf.js

@@ -0,0 +1,109 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.control');
+goog.require('ol.format.WKT');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.OSM');
+goog.require('ol.source.Vector');
+
+var raster = new ol.layer.Tile({
+  source: new ol.source.OSM()
+});
+
+var format = new ol.format.WKT();
+var feature = format.readFeature(
+    'POLYGON((10.689697265625 -25.0927734375, 34.595947265625 ' +
+        '-20.1708984375, 38.814697265625 -35.6396484375, 13.502197265625 ' +
+        '-39.1552734375, 10.689697265625 -25.0927734375))');
+feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
+
+var vector = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    features: [feature]
+  })
+});
+
+
+var map = new ol.Map({
+  layers: [raster, vector],
+  target: 'map',
+  controls: ol.control.defaults({
+    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+      collapsible: false
+    })
+  }),
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+
+var dims = {
+  a0: [1189, 841],
+  a1: [841, 594],
+  a2: [594, 420],
+  a3: [420, 297],
+  a4: [297, 210],
+  a5: [210, 148]
+};
+
+var loading = 0;
+var loaded = 0;
+
+var exportButton = document.getElementById('export-pdf');
+
+exportButton.addEventListener('click', function() {
+
+  exportButton.disabled = true;
+  document.body.style.cursor = 'progress';
+
+  var format = document.getElementById('format').value;
+  var resolution = document.getElementById('resolution').value;
+  var dim = dims[format];
+  var width = Math.round(dim[0] * resolution / 25.4);
+  var height = Math.round(dim[1] * resolution / 25.4);
+  var size = /** @type {ol.Size} */ (map.getSize());
+  var extent = map.getView().calculateExtent(size);
+
+  var source = raster.getSource();
+
+  var tileLoadStart = function() {
+    ++loading;
+  };
+
+  var tileLoadEnd = function() {
+    ++loaded;
+    if (loading === loaded) {
+      var canvas = this;
+      window.setTimeout(function() {
+        loading = 0;
+        loaded = 0;
+        var data = canvas.toDataURL('image/png');
+        var pdf = new jsPDF('landscape', undefined, format);
+        pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
+        pdf.save('map.pdf');
+        source.un('tileloadstart', tileLoadStart);
+        source.un('tileloadend', tileLoadEnd, canvas);
+        source.un('tileloaderror', tileLoadEnd, canvas);
+        map.setSize(size);
+        map.getView().fit(extent, size);
+        map.renderSync();
+        exportButton.disabled = false;
+        document.body.style.cursor = 'auto';
+      }, 100);
+    }
+  };
+
+  map.once('postcompose', function(event) {
+    source.on('tileloadstart', tileLoadStart);
+    source.on('tileloadend', tileLoadEnd, event.context.canvas);
+    source.on('tileloaderror', tileLoadEnd, event.context.canvas);
+  });
+
+  map.setSize([width, height]);
+  map.getView().fit(extent, /** @type {ol.Size} */ (map.getSize()));
+  map.renderSync();
+
+}, false);

examples/feature-move-animation.js

@@ -108,11 +108,16 @@ var styles = {
   })
 };
 
+var animating = false;
+var speed, now;
+var speedInput = document.getElementById('speed');
+var startButton = document.getElementById('start-animation');
+
 var vectorLayer = new ol.layer.Vector({
   source: new ol.source.Vector({
     features: [routeFeature, geoMarker, startMarker, endMarker]
   }),
-  style: function(feature, resolution) {
+  style: function(feature) {
     // hide geoMarker if animation is active
     if (animating && feature.get('type') === 'geoMarker') {
       return null;
@@ -135,7 +140,7 @@ var map = new ol.Map({
     new ol.layer.Tile({
       source: new ol.source.BingMaps({
         imagerySet: 'AerialWithLabels',
-        key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
+        key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF'
       })
     }),
     vectorLayer
@@ -198,8 +203,4 @@ function stopAnimation(ended) {
   map.un('postcompose', moveFeature);
 }
 
-var speed, now;
-var animating = false;
-var speedInput = document.getElementById('speed');
-var startButton = document.getElementById('start-animation');
 startButton.addEventListener('click', startAnimation, false);

examples/flight-animation.js

@@ -35,6 +35,14 @@ var defaultStyle = new ol.style.Style({
   stroke: defaultStroke
 });
 
+var flightsSource;
+var addLater = function(feature, timeout) {
+  window.setTimeout(function() {
+    feature.set('start', new Date().getTime());
+    flightsSource.addFeature(feature);
+  }, timeout);
+};
+
 var pointsPerMs = 0.1;
 var animateFlights = function(event) {
   var vectorContext = event.vectorContext;
@@ -66,20 +74,13 @@ var animateFlights = function(event) {
   map.render();
 };
 
-var addLater = function(feature, timeout) {
-  window.setTimeout(function() {
-    feature.set('start', new Date().getTime());
-    flightsSource.addFeature(feature);
-  }, timeout);
-};
-
-var flightsSource = new ol.source.Vector({
+flightsSource = new ol.source.Vector({
   wrapX: false,
   attributions: [new ol.Attribution({
     html: 'Flight data by ' +
         '<a href="http://openflights.org/data.html">OpenFlights</a>,'
   })],
-  loader: function(extent, resolution, projection) {
+  loader: function() {
     var url = 'data/openflights/flights.json';
     fetch(url).then(function(response) {
       return response.json();
@@ -116,7 +117,7 @@ var flightsSource = new ol.source.Vector({
 
 var flightsLayer = new ol.layer.Vector({
   source: flightsSource,
-  style: function(feature, resolution) {
+  style: function(feature) {
     // if the animation is still active for a feature, do not
     // render the feature with the layer style
     if (feature.get('finished')) {

examples/full-screen-drag-rotate-and-zoom.html

@@ -7,6 +7,6 @@ docs: >
   <p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
 tags: "full-screen, drag, rotate, zoom, bing, bing-maps"
 cloak:
-  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
+  AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>

examples/full-screen-drag-rotate-and-zoom.js

@@ -18,7 +18,7 @@ var map = new ol.Map({
   layers: [
     new ol.layer.Tile({
       source: new ol.source.BingMaps({
-        key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
+        key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
         imagerySet: 'Aerial'
       })
     })

examples/full-screen.html

@@ -7,6 +7,6 @@ docs: >
   <p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
 tags: "full-screen, bing, bing-maps"
 cloak:
-  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
+  AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>

examples/full-screen.js

@@ -18,7 +18,7 @@ var map = new ol.Map({
   layers: [
     new ol.layer.Tile({
       source: new ol.source.BingMaps({
-        key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
+        key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
         imagerySet: 'Aerial'
       })
     })

examples/geojson.js

@@ -85,7 +85,7 @@ var styles = {
   })
 };
 
-var styleFunction = function(feature, resolution) {
+var styleFunction = function(feature) {
   return styles[feature.getGeometry().getType()];
 };
 
@@ -97,79 +97,67 @@ var geojsonObject = {
       'name': 'EPSG:3857'
     }
   },
-  'features': [
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'Point',
-        'coordinates': [0, 0]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'LineString',
-        'coordinates': [[4e6, -2e6], [8e6, 2e6]]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'LineString',
-        'coordinates': [[4e6, 2e6], [8e6, -2e6]]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'Polygon',
-        'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'MultiLineString',
-        'coordinates': [
-          [[-1e6, -7.5e5], [-1e6, 7.5e5]],
-          [[1e6, -7.5e5], [1e6, 7.5e5]],
-          [[-7.5e5, -1e6], [7.5e5, -1e6]],
-          [[-7.5e5, 1e6], [7.5e5, 1e6]]
-        ]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'MultiPolygon',
-        'coordinates': [
-          [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6]]],
-          [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6]]],
-          [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]]
-        ]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'GeometryCollection',
-        'geometries': [
-          {
-            'type': 'LineString',
-            'coordinates': [[-5e6, -5e6], [0, -5e6]]
-          },
-          {
-            'type': 'Point',
-            'coordinates': [4e6, -5e6]
-          },
-          {
-            'type': 'Polygon',
-            'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]]
-          }
-        ]
-      }
+  'features': [{
+    'type': 'Feature',
+    'geometry': {
+      'type': 'Point',
+      'coordinates': [0, 0]
     }
-  ]
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'LineString',
+      'coordinates': [[4e6, -2e6], [8e6, 2e6]]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'LineString',
+      'coordinates': [[4e6, 2e6], [8e6, -2e6]]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'Polygon',
+      'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'MultiLineString',
+      'coordinates': [
+        [[-1e6, -7.5e5], [-1e6, 7.5e5]],
+        [[1e6, -7.5e5], [1e6, 7.5e5]],
+        [[-7.5e5, -1e6], [7.5e5, -1e6]],
+        [[-7.5e5, 1e6], [7.5e5, 1e6]]
+      ]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'MultiPolygon',
+      'coordinates': [
+        [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6]]],
+        [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6]]],
+        [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]]
+      ]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'GeometryCollection',
+      'geometries': [{
+        'type': 'LineString',
+        'coordinates': [[-5e6, -5e6], [0, -5e6]]
+      }, {
+        'type': 'Point',
+        'coordinates': [4e6, -5e6]
+      }, {
+        'type': 'Polygon',
+        'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]]
+      }]
+    }
+  }]
 };
 
 var vectorSource = new ol.source.Vector({

examples/geolocation-orientation.html

@@ -13,6 +13,7 @@ tags: "fullscreen, geolocation, orientation, mobile"
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="./resources/layout.css" type="text/css">
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Function.prototype.bind|gated"></script>
     <title>Mobile Geolocation Tracking with Orientation</title>
     <style type="text/css">
       html, body, .map {

examples/geolocation-orientation.js

@@ -58,7 +58,7 @@ var geolocation = new ol.Geolocation(/** @type {olx.GeolocationOptions} */ ({
 var deltaMean = 500; // the geolocation sampling period mean in ms
 
 // Listen to position changes
-geolocation.on('change', function(evt) {
+geolocation.on('change', function() {
   var position = geolocation.getPosition();
   var accuracy = geolocation.getAccuracy();
   var heading = geolocation.getHeading() || 0;
@@ -113,7 +113,7 @@ function addPosition(position, heading, m, speed) {
     // force the rotation change to be less than 180°
     if (Math.abs(headingDiff) > Math.PI) {
       var sign = (headingDiff >= 0) ? 1 : -1;
-      headingDiff = - sign * (2 * Math.PI - Math.abs(headingDiff));
+      headingDiff = -sign * (2 * Math.PI - Math.abs(headingDiff));
     }
     heading = prevHeading + headingDiff;
   }

examples/geolocation.js

@@ -86,7 +86,7 @@ geolocation.on('change:position', function() {
       new ol.geom.Point(coordinates) : null);
 });
 
-var featuresOverlay = new ol.layer.Vector({
+new ol.layer.Vector({
   map: map,
   source: new ol.source.Vector({
     features: [accuracyFeature, positionFeature]

examples/getfeatureinfo-image.js

@@ -44,7 +44,7 @@ map.on('pointermove', function(evt) {
     return;
   }
   var pixel = map.getEventPixel(evt.originalEvent);
-  var hit = map.forEachLayerAtPixel(pixel, function(layer) {
+  var hit = map.forEachLayerAtPixel(pixel, function() {
     return true;
   });
   map.getTargetElement().style.cursor = hit ? 'pointer' : '';

examples/getfeatureinfo-tile.js

@@ -44,7 +44,7 @@ map.on('pointermove', function(evt) {
     return;
   }
   var pixel = map.getEventPixel(evt.originalEvent);
-  var hit = map.forEachLayerAtPixel(pixel, function(layer) {
+  var hit = map.forEachLayerAtPixel(pixel, function() {
     return true;
   });
   map.getTargetElement().style.cursor = hit ? 'pointer' : '';

examples/gpx.html

@@ -6,7 +6,7 @@ docs: >
   Example of using the GPX source.
 tags: "GPX"
 cloak:
-  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
+  AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>

examples/gpx.js

@@ -3,7 +3,6 @@ goog.require('ol.View');
 goog.require('ol.format.GPX');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
-goog.require('ol.proj');
 goog.require('ol.source.BingMaps');
 goog.require('ol.source.Vector');
 goog.require('ol.style.Circle');
@@ -11,12 +10,10 @@ goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 
-var projection = ol.proj.get('EPSG:3857');
-
 var raster = new ol.layer.Tile({
   source: new ol.source.BingMaps({
     imagerySet: 'Aerial',
-    key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
+    key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF'
   })
 });
 
@@ -52,7 +49,7 @@ var vector = new ol.layer.Vector({
     url: 'data/gpx/fells_loop.gpx',
     format: new ol.format.GPX()
   }),
-  style: function(feature, resolution) {
+  style: function(feature) {
     return style[feature.getGeometry().getType()];
   }
 });
@@ -68,7 +65,7 @@ var map = new ol.Map({
 
 var displayFeatureInfo = function(pixel) {
   var features = [];
-  map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+  map.forEachFeatureAtPixel(pixel, function(feature) {
     features.push(feature);
   });
   if (features.length > 0) {

examples/icon-color.css

@@ -0,0 +1,3 @@
+#map {
+  position: relative;
+}

examples/icon-color.html

@@ -0,0 +1,10 @@
+---
+layout: example.html
+title: Icon Colors
+shortdesc: Example assigning a custom color to an icon
+docs: >
+  Example assigning a custom color to an icon. The features in this examples are all using the same image with the different colors coming from the javascript file
+tags: "vector, style, icon, marker"
+resources:
+---
+<div id="map" class="map"></div>

examples/icon-color.js

@@ -0,0 +1,71 @@
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.geom.Point');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.proj');
+goog.require('ol.source.TileJSON');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Icon');
+goog.require('ol.style.Style');
+
+
+var rome = new ol.Feature({
+  geometry: new ol.geom.Point(ol.proj.fromLonLat([12.5, 41.9]))
+});
+
+var london = new ol.Feature({
+  geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.12755, 51.507222]))
+});
+
+var madrid = new ol.Feature({
+  geometry: new ol.geom.Point(ol.proj.fromLonLat([-3.683333, 40.4]))
+});
+
+rome.setStyle(new ol.style.Style({
+  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+    color: '#8959A8',
+    src: 'data/dot.png'
+  }))
+}));
+
+london.setStyle(new ol.style.Style({
+  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+    color: '#4271AE',
+    src: 'data/dot.png'
+  }))
+}));
+
+madrid.setStyle(new ol.style.Style({
+  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+    color: [113, 140, 0],
+    src: 'data/dot.png'
+  }))
+}));
+
+
+var vectorSource = new ol.source.Vector({
+  features: [rome, london, madrid]
+});
+
+var vectorLayer = new ol.layer.Vector({
+  source: vectorSource
+});
+
+var rasterLayer = new ol.layer.Tile({
+  source: new ol.source.TileJSON({
+    url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json',
+    crossOrigin: ''
+  })
+});
+
+var map = new ol.Map({
+  renderer: common.getRendererFromQueryString(),
+  layers: [rasterLayer, vectorLayer],
+  target: document.getElementById('map'),
+  view: new ol.View({
+    center: ol.proj.fromLonLat([2.896372, 44.60240]),
+    zoom: 3
+  })
+});

examples/icon-negative.js

@@ -28,11 +28,13 @@ iconFeature.set('style', createStyle('data/icon.png', undefined));
 var map = new ol.Map({
   layers: [
     new ol.layer.Tile({
-      source: new ol.source.Stamen({ layer: 'watercolor' })
+      source: new ol.source.Stamen({layer: 'watercolor'})
     }),
     new ol.layer.Vector({
-      style: function(feature) { return feature.get('style'); },
-      source: new ol.source.Vector({ features: [iconFeature] })
+      style: function(feature) {
+        return feature.get('style');
+      },
+      source: new ol.source.Vector({features: [iconFeature]})
     })
   ],
   target: document.getElementById('map'),
@@ -44,7 +46,7 @@ var map = new ol.Map({
 
 var selectStyle = {};
 var select = new ol.interaction.Select({
-  style: function(feature, resolution) {
+  style: function(feature) {
     var image = feature.get('style').getImage().getImage();
     if (!selectStyle[image.src]) {
       var canvas = document.createElement('canvas');

examples/icon-sprite-webgl.js

@@ -95,7 +95,7 @@ for (i = 0; i < featureCount; i += 30) {
   overlayFeatures.push(clone);
 }
 
-var featureOverlay = new ol.layer.Vector({
+new ol.layer.Vector({
   map: map,
   source: new ol.source.Vector({
     features: overlayFeatures
@@ -112,8 +112,8 @@ map.on('click', function(evt) {
 
   window.setTimeout(function() {
     var features = [];
-    map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
-      features.push(features);
+    map.forEachFeatureAtPixel(evt.pixel, function(feature) {
+      features.push(feature);
       return false;
     });
 

examples/icon.js

@@ -23,7 +23,6 @@ var iconStyle = new ol.style.Style({
     anchor: [0.5, 46],
     anchorXUnits: 'fraction',
     anchorYUnits: 'pixels',
-    opacity: 0.75,
     src: 'data/icon.png'
   }))
 });
@@ -40,7 +39,7 @@ var vectorLayer = new ol.layer.Vector({
 
 var rasterLayer = new ol.layer.Tile({
   source: new ol.source.TileJSON({
-    url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp',
+    url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json',
     crossOrigin: ''
   })
 });
@@ -67,7 +66,7 @@ map.addOverlay(popup);
 // display popup on click
 map.on('click', function(evt) {
   var feature = map.forEachFeatureAtPixel(evt.pixel,
-      function(feature, layer) {
+      function(feature) {
         return feature;
       });
   if (feature) {

examples/igc.js

@@ -25,7 +25,7 @@ var colors = {
 };
 
 var styleCache = {};
-var styleFunction = function(feature, resolution) {
+var styleFunction = function(feature) {
   var color = colors[feature.get('PLT')];
   var style = styleCache[color];
   if (!style) {

examples/image-filter.html

@@ -8,7 +8,7 @@ docs: >
   In this example, the <code>postcompose</code> listener applies a filter to the image data.</p>
 tags: "filter, image manipulation"
 cloak:
-  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
+  AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
 <select id="kernel" name="kernel">

examples/image-filter.js

@@ -4,7 +4,7 @@ goog.require('ol.layer.Tile');
 goog.require('ol.proj');
 goog.require('ol.source.BingMaps');
 
-var key = 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3';
+var key = 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF';
 
 var imagery = new ol.layer.Tile({
   source: new ol.source.BingMaps({key: key, imagerySet: 'Aerial'})

examples/image-load-events.js

@@ -4,7 +4,6 @@ goog.require('ol.layer.Image');
 goog.require('ol.source.ImageWMS');
 
 
-
 /**
  * Renders a progress bar.
  * @param {Element} el The target element.
@@ -84,14 +83,14 @@ var source = new ol.source.ImageWMS({
   serverType: 'geoserver'
 });
 
-source.on('imageloadstart', function(event) {
+source.on('imageloadstart', function() {
   progress.addLoading();
 });
 
-source.on('imageloadend', function(event) {
+source.on('imageloadend', function() {
   progress.addLoaded();
 });
-source.on('imageloaderror', function(event) {
+source.on('imageloaderror', function() {
   progress.addLoaded();
 });
 

examples/image-vector-layer.js

@@ -59,7 +59,7 @@ var featureOverlay = new ol.layer.Vector({
 var highlight;
 var displayFeatureInfo = function(pixel) {
 
-  var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+  var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
     return feature;
   });
 

examples/kml-earthquakes.js

@@ -12,7 +12,7 @@ goog.require('ol.style.Style');
 
 
 var styleCache = {};
-var styleFunction = function(feature, resolution) {
+var styleFunction = function(feature) {
   // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
   // standards-violating <magnitude> tag in each Placemark.  We extract it from
   // the Placemark's name instead.
@@ -74,7 +74,7 @@ var displayFeatureInfo = function(pixel) {
     left: pixel[0] + 'px',
     top: (pixel[1] - 15) + 'px'
   });
-  var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+  var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
     return feature;
   });
   if (feature) {

examples/kml-timezones.js

@@ -17,7 +17,7 @@ goog.require('ol.style.Style');
  * currently midnight would have an opacity of 0.  This doesn't account for
  * daylight savings, so don't use it to plan your vacation.
  */
-var styleFunction = function(feature, resolution) {
+var styleFunction = function(feature) {
   var offset = 0;
   var name = feature.get('name'); // e.g. GMT -08:30
   var match = name.match(/([\-+]\d{2}):(\d{2})$/);
@@ -81,7 +81,7 @@ var displayFeatureInfo = function(pixel) {
     left: pixel[0] + 'px',
     top: (pixel[1] - 15) + 'px'
   });
-  var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+  var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
     return feature;
   });
   if (feature) {

examples/kml.html

@@ -6,7 +6,7 @@ docs: >
   This example uses the <code>ol.format.KML</code> to parse KML for rendering with a vector source.
 tags: "KML"
 cloak:
-  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
+  AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>

examples/kml.js

@@ -12,7 +12,7 @@ var projection = ol.proj.get('EPSG:3857');
 var raster = new ol.layer.Tile({
   source: new ol.source.BingMaps({
     imagerySet: 'Aerial',
-    key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
+    key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF'
   })
 });
 
@@ -35,7 +35,7 @@ var map = new ol.Map({
 
 var displayFeatureInfo = function(pixel) {
   var features = [];
-  map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+  map.forEachFeatureAtPixel(pixel, function(feature) {
     features.push(feature);
   });
   if (features.length > 0) {

examples/layer-extent.js

@@ -19,7 +19,7 @@ var extents = {
 var base = new ol.layer.Tile({
   source: new ol.source.TileJSON({
     url: 'http://api.tiles.mapbox.com/v3/' +
-        'mapbox.world-black.jsonp',
+        'mapbox.world-black.json',
     crossOrigin: 'anonymous'
   })
 });
@@ -28,7 +28,7 @@ var overlay = new ol.layer.Tile({
   extent: extents.northwest,
   source: new ol.source.TileJSON({
     url: 'http://api.tiles.mapbox.com/v3/' +
-        'mapbox.world-glass.jsonp',
+        'mapbox.world-glass.json',
     crossOrigin: 'anonymous'
   })
 });

examples/layer-group.js

@@ -15,14 +15,14 @@ var map = new ol.Map({
         new ol.layer.Tile({
           source: new ol.source.TileJSON({
             url: 'http://api.tiles.mapbox.com/v3/' +
-                'mapbox.20110804-hoa-foodinsecurity-3month.jsonp',
+                'mapbox.20110804-hoa-foodinsecurity-3month.json',
             crossOrigin: 'anonymous'
           })
         }),
         new ol.layer.Tile({
           source: new ol.source.TileJSON({
             url: 'http://api.tiles.mapbox.com/v3/' +
-                'mapbox.world-borders-light.jsonp',
+                'mapbox.world-borders-light.json',
             crossOrigin: 'anonymous'
           })
         })

examples/layer-spy.html

@@ -10,6 +10,6 @@ docs: >
   <p>Move around the map to see the effect.  Use the ↑ up and ↓ down arrow keys to adjust the spyglass size.</p>
 tags: "spy, image manipulation"
 cloak:
-  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
+  AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>

examples/layer-spy.js

@@ -4,7 +4,7 @@ goog.require('ol.layer.Tile');
 goog.require('ol.proj');
 goog.require('ol.source.BingMaps');
 
-var key = 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3';
+var key = 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF';
 
 var roads = new ol.layer.Tile({
   source: new ol.source.BingMaps({key: key, imagerySet: 'Road'})

examples/layer-swipe.html

@@ -6,7 +6,7 @@ docs: >
   Example of a Layer swipe map.
 tags: "swipe, openstreetmap"
 cloak:
-  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
+  AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
 <input id="swipe" type="range" style="width: 100%">

examples/layer-swipe.js

@@ -10,7 +10,7 @@ var osm = new ol.layer.Tile({
 });
 var bing = new ol.layer.Tile({
   source: new ol.source.BingMaps({
-    key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
+    key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
     imagerySet: 'Aerial'
   })
 });

examples/line-arrows.js

@@ -16,7 +16,7 @@ var raster = new ol.layer.Tile({
 
 var source = new ol.source.Vector();
 
-var styleFunction = function(feature, resolution) {
+var styleFunction = function(feature) {
   var geometry = feature.getGeometry();
   var styles = [
     // linestring

examples/measure.js

@@ -96,7 +96,7 @@ var continueLineMsg = 'Click to continue drawing the line';
 
 /**
  * Handle pointer move.
- * @param {ol.MapBrowserEvent} evt
+ * @param {ol.MapBrowserEvent} evt The event.
  */
 var pointerMoveHandler = function(evt) {
   if (evt.dragging) {
@@ -140,6 +140,66 @@ var typeSelect = document.getElementById('type');
 var geodesicCheckbox = document.getElementById('geodesic');
 
 var draw; // global so we can remove it later
+
+
+/**
+ * Format length output.
+ * @param {ol.geom.LineString} line The line.
+ * @return {string} The formatted length.
+ */
+var formatLength = function(line) {
+  var length;
+  if (geodesicCheckbox.checked) {
+    var coordinates = line.getCoordinates();
+    length = 0;
+    var sourceProj = map.getView().getProjection();
+    for (var i = 0, ii = coordinates.length - 1; i < ii; ++i) {
+      var c1 = ol.proj.transform(coordinates[i], sourceProj, 'EPSG:4326');
+      var c2 = ol.proj.transform(coordinates[i + 1], sourceProj, 'EPSG:4326');
+      length += wgs84Sphere.haversineDistance(c1, c2);
+    }
+  } else {
+    length = Math.round(line.getLength() * 100) / 100;
+  }
+  var output;
+  if (length > 100) {
+    output = (Math.round(length / 1000 * 100) / 100) +
+        ' ' + 'km';
+  } else {
+    output = (Math.round(length * 100) / 100) +
+        ' ' + 'm';
+  }
+  return output;
+};
+
+
+/**
+ * Format length output.
+ * @param {ol.geom.Polygon} polygon The polygon.
+ * @return {string} Formatted area.
+ */
+var formatArea = function(polygon) {
+  var area;
+  if (geodesicCheckbox.checked) {
+    var sourceProj = map.getView().getProjection();
+    var geom = /** @type {ol.geom.Polygon} */(polygon.clone().transform(
+        sourceProj, 'EPSG:4326'));
+    var coordinates = geom.getLinearRing(0).getCoordinates();
+    area = Math.abs(wgs84Sphere.geodesicArea(coordinates));
+  } else {
+    area = polygon.getArea();
+  }
+  var output;
+  if (area > 10000) {
+    output = (Math.round(area / 1000000 * 100) / 100) +
+        ' ' + 'km<sup>2</sup>';
+  } else {
+    output = (Math.round(area * 100) / 100) +
+        ' ' + 'm<sup>2</sup>';
+  }
+  return output;
+};
+
 function addInteraction() {
   var type = (typeSelect.value == 'area' ? 'Polygon' : 'LineString');
   draw = new ol.interaction.Draw({
@@ -186,7 +246,7 @@ function addInteraction() {
             output = formatArea(/** @type {ol.geom.Polygon} */ (geom));
             tooltipCoord = geom.getInteriorPoint().getCoordinates();
           } else if (geom instanceof ol.geom.LineString) {
-            output = formatLength( /** @type {ol.geom.LineString} */ (geom));
+            output = formatLength(/** @type {ol.geom.LineString} */ (geom));
             tooltipCoord = geom.getLastCoordinate();
           }
           measureTooltipElement.innerHTML = output;
@@ -195,7 +255,7 @@ function addInteraction() {
       }, this);
 
   draw.on('drawend',
-      function(evt) {
+      function() {
         measureTooltipElement.className = 'tooltip tooltip-static';
         measureTooltip.setOffset([0, -7]);
         // unset sketch
@@ -246,70 +306,10 @@ function createMeasureTooltip() {
 
 /**
  * Let user change the geometry type.
- * @param {Event} e Change event.
  */
-typeSelect.onchange = function(e) {
+typeSelect.onchange = function() {
   map.removeInteraction(draw);
   addInteraction();
 };
 
-
-/**
- * format length output
- * @param {ol.geom.LineString} line
- * @return {string}
- */
-var formatLength = function(line) {
-  var length;
-  if (geodesicCheckbox.checked) {
-    var coordinates = line.getCoordinates();
-    length = 0;
-    var sourceProj = map.getView().getProjection();
-    for (var i = 0, ii = coordinates.length - 1; i < ii; ++i) {
-      var c1 = ol.proj.transform(coordinates[i], sourceProj, 'EPSG:4326');
-      var c2 = ol.proj.transform(coordinates[i + 1], sourceProj, 'EPSG:4326');
-      length += wgs84Sphere.haversineDistance(c1, c2);
-    }
-  } else {
-    length = Math.round(line.getLength() * 100) / 100;
-  }
-  var output;
-  if (length > 100) {
-    output = (Math.round(length / 1000 * 100) / 100) +
-        ' ' + 'km';
-  } else {
-    output = (Math.round(length * 100) / 100) +
-        ' ' + 'm';
-  }
-  return output;
-};
-
-
-/**
- * format length output
- * @param {ol.geom.Polygon} polygon
- * @return {string}
- */
-var formatArea = function(polygon) {
-  var area;
-  if (geodesicCheckbox.checked) {
-    var sourceProj = map.getView().getProjection();
-    var geom = /** @type {ol.geom.Polygon} */(polygon.clone().transform(
-        sourceProj, 'EPSG:4326'));
-    var coordinates = geom.getLinearRing(0).getCoordinates();
-    area = Math.abs(wgs84Sphere.geodesicArea(coordinates));
-  } else {
-    area = polygon.getArea();
-  }
-  var output;
-  if (area > 10000) {
-    output = (Math.round(area / 1000000 * 100) / 100) +
-        ' ' + 'km<sup>2</sup>';
-  } else {
-    output = (Math.round(area * 100) / 100) +
-        ' ' + 'm<sup>2</sup>';
-  }
-  return output;
-};
-
 addInteraction();

examples/min-max-resolution.js

@@ -19,7 +19,7 @@ var map = new ol.Map({
     new ol.layer.Tile({
       source: new ol.source.TileJSON({
         url: 'http://api.tiles.mapbox.com/v3/' +
-            'mapbox.natural-earth-hypso-bathy.jsonp',
+            'mapbox.natural-earth-hypso-bathy.json',
         crossOrigin: 'anonymous'
       }),
       minResolution: 2000,

examples/mobile-full-screen.html

@@ -4,7 +4,7 @@ title: Full-Screen Mobile
 shortdesc: Example of a full screen map.
 tags: "fullscreen, geolocation, mobile"
 cloak:
-  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
+  AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <!doctype html>
 <html lang="en">
@@ -13,6 +13,7 @@ cloak:
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
     <title>Mobile full screen example</title>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Function.prototype.bind|gated"></script>
     <style type="text/css">
       html, body, .map {
         margin: 0;

examples/mobile-full-screen.js

@@ -14,7 +14,7 @@ var map = new ol.Map({
   layers: [
     new ol.layer.Tile({
       source: new ol.source.BingMaps({
-        key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
+        key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
         imagerySet: 'Road'
       })
     })

examples/modify-test.js

@@ -54,7 +54,7 @@ var styleFunction = (function() {
     }),
     image: image
   });
-  return function(feature, resolution) {
+  return function(feature) {
     return styles[feature.getGeometry().getType()] || styles['default'];
   };
 })();
@@ -67,94 +67,81 @@ var geojsonObject = {
       'name': 'EPSG:3857'
     }
   },
-  'features': [
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'Point',
-        'coordinates': [0, 0]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'MultiPoint',
-        'coordinates': [[-2e6, 0], [0, -2e6]]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'LineString',
-        'coordinates': [[4e6, -2e6], [8e6, 2e6], [9e6, 2e6]]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'LineString',
-        'coordinates': [[4e6, -2e6], [8e6, 2e6], [8e6, 3e6]]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'Polygon',
-        'coordinates': [[[-5e6, -1e6], [-4e6, 1e6],
-            [-3e6, -1e6], [-5e6, -1e6]], [[-4.5e6, -0.5e6],
-            [-3.5e6, -0.5e6], [-4e6, 0.5e6], [-4.5e6, -0.5e6]]]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'MultiLineString',
-        'coordinates': [
-          [[-1e6, -7.5e5], [-1e6, 7.5e5]],
-          [[-1e6, -7.5e5], [-1e6, 7.5e5], [-5e5, 0], [-1e6, -7.5e5]],
-          [[1e6, -7.5e5], [15e5, 0], [15e5, 0], [1e6, 7.5e5]],
-          [[-7.5e5, -1e6], [7.5e5, -1e6]],
-          [[-7.5e5, 1e6], [7.5e5, 1e6]]
-        ]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'MultiPolygon',
-        'coordinates': [
-          [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
-              [-3e6, 6e6], [-5e6, 6e6]]],
-          [[[-3e6, 6e6], [-2e6, 8e6], [0, 8e6],
-              [0, 6e6], [-3e6, 6e6]]],
-          [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
-              [3e6, 6e6], [1e6, 6e6]]]
-        ]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'GeometryCollection',
-        'geometries': [
-          {
-            'type': 'LineString',
-            'coordinates': [[-5e6, -5e6], [0, -5e6]]
-          },
-          {
-            'type': 'Point',
-            'coordinates': [4e6, -5e6]
-          },
-          {
-            'type': 'Polygon',
-            'coordinates': [
-              [[1e6, -6e6], [2e6, -4e6], [3e6, -6e6], [1e6, -6e6]]
-            ]
-          }
-        ]
-      }
+  'features': [{
+    'type': 'Feature',
+    'geometry': {
+      'type': 'Point',
+      'coordinates': [0, 0]
     }
-  ]
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'MultiPoint',
+      'coordinates': [[-2e6, 0], [0, -2e6]]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'LineString',
+      'coordinates': [[4e6, -2e6], [8e6, 2e6], [9e6, 2e6]]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'LineString',
+      'coordinates': [[4e6, -2e6], [8e6, 2e6], [8e6, 3e6]]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'Polygon',
+      'coordinates': [[[-5e6, -1e6], [-4e6, 1e6],
+          [-3e6, -1e6], [-5e6, -1e6]], [[-4.5e6, -0.5e6],
+          [-3.5e6, -0.5e6], [-4e6, 0.5e6], [-4.5e6, -0.5e6]]]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'MultiLineString',
+      'coordinates': [
+        [[-1e6, -7.5e5], [-1e6, 7.5e5]],
+        [[-1e6, -7.5e5], [-1e6, 7.5e5], [-5e5, 0], [-1e6, -7.5e5]],
+        [[1e6, -7.5e5], [15e5, 0], [15e5, 0], [1e6, 7.5e5]],
+        [[-7.5e5, -1e6], [7.5e5, -1e6]],
+        [[-7.5e5, 1e6], [7.5e5, 1e6]]
+      ]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'MultiPolygon',
+      'coordinates': [
+        [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
+            [-3e6, 6e6], [-5e6, 6e6]]],
+        [[[-3e6, 6e6], [-2e6, 8e6], [0, 8e6],
+            [0, 6e6], [-3e6, 6e6]]],
+        [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
+            [3e6, 6e6], [1e6, 6e6]]]
+      ]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'GeometryCollection',
+      'geometries': [{
+        'type': 'LineString',
+        'coordinates': [[-5e6, -5e6], [0, -5e6]]
+      }, {
+        'type': 'Point',
+        'coordinates': [4e6, -5e6]
+      }, {
+        'type': 'Polygon',
+        'coordinates': [
+          [[1e6, -6e6], [2e6, -4e6], [3e6, -6e6], [1e6, -6e6]]
+        ]
+      }]
+    }
+  }]
 };
 
 var source = new ol.source.Vector({
@@ -224,7 +211,7 @@ var overlayStyle = (function() {
 
   styles['GeometryCollection'] = styles['Polygon'].concat(styles['Point']);
 
-  return function(feature, resolution) {
+  return function(feature) {
     return styles[feature.getGeometry().getType()];
   };
 })();

examples/osm-vector-tiles.js

@@ -10,7 +10,7 @@ goog.require('ol.style.Style');
 
 
 var format = new ol.format.TopoJSON();
-var tileGrid = ol.tilegrid.createXYZ({ maxZoom: 19 });
+var tileGrid = ol.tilegrid.createXYZ({maxZoom: 19});
 var roadStyleCache = {};
 var roadColor = {
   'major_road': '#776',
@@ -51,7 +51,7 @@ var map = new ol.Map({
         url: 'http://{a-c}.tile.openstreetmap.us/' +
             'vectiles-highroad/{z}/{x}/{y}.topojson'
       }),
-      style: function(feature, resolution) {
+      style: function(feature) {
         var kind = feature.get('kind');
         var railway = feature.get('railway');
         var sort_key = feature.get('sort_key');
@@ -97,7 +97,7 @@ var map = new ol.Map({
             'vectiles-land-usages/{z}/{x}/{y}.topojson'
       }),
       visible: false,
-      style: function(feature, resolution) {
+      style: function(feature) {
         var kind = feature.get('kind');
         var styleKey = kind;
         var style = landuseStyleCache[styleKey];

examples/polygon-styles.js

@@ -49,40 +49,35 @@ var geojsonObject = {
       'name': 'EPSG:3857'
     }
   },
-  'features': [
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'Polygon',
-        'coordinates': [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
-            [-3e6, 6e6], [-5e6, 6e6]]]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'Polygon',
-        'coordinates': [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6],
-            [0, 6e6], [-2e6, 6e6]]]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'Polygon',
-        'coordinates': [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
-            [3e6, 6e6], [1e6, 6e6]]]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'Polygon',
-        'coordinates': [[[-2e6, -1e6], [-1e6, 1e6],
-            [0, -1e6], [-2e6, -1e6]]]
-      }
+  'features': [{
+    'type': 'Feature',
+    'geometry': {
+      'type': 'Polygon',
+      'coordinates': [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
+          [-3e6, 6e6], [-5e6, 6e6]]]
     }
-  ]
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'Polygon',
+      'coordinates': [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6],
+          [0, 6e6], [-2e6, 6e6]]]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'Polygon',
+      'coordinates': [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
+          [3e6, 6e6], [1e6, 6e6]]]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'Polygon',
+      'coordinates': [[[-2e6, -1e6], [-1e6, 1e6],
+          [0, -1e6], [-2e6, -1e6]]]
+    }
+  }]
 };
 
 var source = new ol.source.Vector({

examples/popup.js

@@ -15,17 +15,6 @@ var content = document.getElementById('popup-content');
 var closer = document.getElementById('popup-closer');
 
 
-/**
- * Add a click handler to hide the popup.
- * @return {boolean} Don't follow the href.
- */
-closer.onclick = function() {
-  overlay.setPosition(undefined);
-  closer.blur();
-  return false;
-};
-
-
 /**
  * Create an overlay to anchor the popup to the map.
  */
@@ -38,6 +27,17 @@ var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
 }));
 
 
+/**
+ * Add a click handler to hide the popup.
+ * @return {boolean} Don't follow the href.
+ */
+closer.onclick = function() {
+  overlay.setPosition(undefined);
+  closer.blur();
+  return false;
+};
+
+
 /**
  * Create the map.
  */
@@ -46,7 +46,7 @@ var map = new ol.Map({
     new ol.layer.Tile({
       source: new ol.source.TileJSON({
         url: 'http://api.tiles.mapbox.com/v3/' +
-            'mapbox.natural-earth-hypso-bathy.jsonp',
+            'mapbox.natural-earth-hypso-bathy.json',
         crossOrigin: 'anonymous'
       })
     })

examples/preload.html

@@ -6,7 +6,7 @@ docs: >
   <p>The map on the top preloads low resolution tiles.  The map on the bottom does not use any preloading.  Try zooming out and panning to see the difference.</p>
 tags: "preload, bing"
 cloak:
-  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
+  AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div id="map1" class="map"></div>
 <div id="map2" class="map"></div>

examples/preload.js

@@ -14,7 +14,7 @@ var map1 = new ol.Map({
     new ol.layer.Tile({
       preload: Infinity,
       source: new ol.source.BingMaps({
-        key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
+        key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
         imagerySet: 'Aerial'
       })
     })
@@ -29,7 +29,7 @@ var map2 = new ol.Map({
     new ol.layer.Tile({
       preload: 0, // default value
       source: new ol.source.BingMaps({
-        key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
+        key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
         imagerySet: 'AerialWithLabels'
       })
     })

examples/raster.html

@@ -22,7 +22,7 @@ tags: "raster, pixel"
 resources:
   - http://d3js.org/d3.v3.min.js
 cloak:
-  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
+  AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="rel">
   <div id="map" class="map"></div>

examples/raster.js

@@ -50,7 +50,7 @@ function summarize(value, counts) {
  * Use aerial imagery as the input data for the raster source.
  */
 var bing = new ol.source.BingMaps({
-  key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
+  key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
   imagerySet: 'Aerial'
 });
 
@@ -61,6 +61,12 @@ var bing = new ol.source.BingMaps({
  */
 var raster = new ol.source.Raster({
   sources: [bing],
+  /**
+   * Run calculations on pixel data.
+   * @param {Array} pixels List of pixels (one per source).
+   * @param {Object} data User data object.
+   * @return {Array} The output pixel.
+   */
   operation: function(pixels, data) {
     var pixel = pixels[0];
     var value = vgi(pixel);

examples/region-growing.html

@@ -25,7 +25,7 @@ docs: >
   </p>
 tags: "raster, region growing"
 cloak:
-  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
+  AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div id="map" class="map" style="cursor: pointer"></div>
 <table class="controls">

examples/region-growing.js

@@ -31,7 +31,7 @@ function growRegion(inputs, data) {
       // As noted in the Raster source constructor, this function is provided
       // using the `lib` option. Other functions will NOT be visible unless
       // provided using the `lib` option.
-      var next = nextEdges(edge[i]);
+      var next = next4Edges(edge[i]);
       for (var j = 0, jj = next.length; j < jj; j++) {
         var s = next[j][0], t = next[j][1];
         if (s >= 0 && s < width && t >= 0 && t < height) {
@@ -72,7 +72,7 @@ function next4Edges(edge) {
   ];
 }
 
-var key = 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3';
+var key = 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF';
 
 var imagery = new ol.layer.Tile({
   source: new ol.source.BingMaps({key: key, imagerySet: 'Aerial'})
@@ -85,7 +85,7 @@ var raster = new ol.source.Raster({
   // Functions in the `lib` object will be available to the operation run in
   // the web worker.
   lib: {
-    nextEdges: next4Edges
+    next4Edges: next4Edges
   }
 });
 
@@ -110,6 +110,8 @@ map.on('click', function(event) {
   raster.changed();
 });
 
+var thresholdControl = document.getElementById('threshold');
+
 raster.on('beforeoperations', function(event) {
   // the event.data object will be passed to operations
   var data = event.data;
@@ -119,8 +121,6 @@ raster.on('beforeoperations', function(event) {
   }
 });
 
-var thresholdControl = document.getElementById('threshold');
-
 function updateControlValue() {
   document.getElementById('threshold-value').innerText = thresholdControl.value;
 }

examples/render-geometry.js

@@ -10,8 +10,8 @@ goog.require('ol.style.Stroke');
 var canvas = document.getElementById('canvas');
 var render = ol.render.toContext(canvas.getContext('2d'), {size: [100, 100]});
 
-var fill = new ol.style.Fill({ color: 'blue' });
-var stroke = new ol.style.Stroke({ color: 'black' });
+var fill = new ol.style.Fill({color: 'blue'});
+var stroke = new ol.style.Stroke({color: 'black'});
 render.setFillStrokeStyle(fill, stroke);
 render.setImageStyle(new ol.style.Circle({
   radius: 10,

examples/reprojection-by-code.js

@@ -7,7 +7,6 @@ goog.require('ol.source.MapQuest');
 goog.require('ol.source.TileImage');
 
 
-
 var map = new ol.Map({
   layers: [
     new ol.layer.Tile({
@@ -89,18 +88,19 @@ function search(query) {
 
 
 /**
- * @param {Event} e Change event.
+ * Handle click event.
+ * @param {Event} event The event.
  */
-searchButton.onclick = function(e) {
+searchButton.onclick = function(event) {
   search(queryInput.value);
-  e.preventDefault();
+  event.preventDefault();
 };
 
 
 /**
- * @param {Event} e Change event.
+ * Handle change event.
  */
-renderEdgesCheckbox.onchange = function(e) {
+renderEdgesCheckbox.onchange = function() {
   map.getLayers().forEach(function(layer) {
     if (layer instanceof ol.layer.Tile) {
       var source = layer.getSource();

examples/reprojection.js

@@ -192,9 +192,9 @@ function updateViewProjection() {
 
 
 /**
- * @param {Event} e Change event.
+ * Handle change event.
  */
-viewProjSelect.onchange = function(e) {
+viewProjSelect.onchange = function() {
   updateViewProjection();
 };
 
@@ -211,9 +211,9 @@ var updateRenderEdgesOnLayer = function(layer) {
 
 
 /**
- * @param {Event} e Change event.
+ * Handle change event.
  */
-baseLayerSelect.onchange = function(e) {
+baseLayerSelect.onchange = function() {
   var layer = layers[baseLayerSelect.value];
   if (layer) {
     layer.setOpacity(1);
@@ -224,9 +224,9 @@ baseLayerSelect.onchange = function(e) {
 
 
 /**
- * @param {Event} e Change event.
+ * Handle change event.
  */
-overlayLayerSelect.onchange = function(e) {
+overlayLayerSelect.onchange = function() {
   var layer = layers[overlayLayerSelect.value];
   if (layer) {
     layer.setOpacity(0.7);
@@ -237,9 +237,9 @@ overlayLayerSelect.onchange = function(e) {
 
 
 /**
- * @param {Event} e Change event.
+ * Handle change event.
  */
-renderEdgesCheckbox.onchange = function(e) {
+renderEdgesCheckbox.onchange = function() {
   renderEdges = renderEdgesCheckbox.checked;
   map.getLayers().forEach(function(layer) {
     updateRenderEdgesOnLayer(layer);

examples/scaleline-indiana-east.html

@@ -0,0 +1,11 @@
+---
+layout: example.html
+title: OpenStreetMap Reprojection with ScaleLine Control
+shortdesc: Demonstrates client-side reprojection of OpenStreetMap to NAD83 Indiana East.
+docs: >
+  This example shows client-side reprojection of OpenStreetMap to NAD83 Indiana East, including a ScaleLine control with US units.
+tags: "reprojection, projection, openstreetmap, nad83, tile, scaleline"
+resources:
+  - http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js
+---
+<div id="map" class="map"></div>

examples/scaleline-indiana-east.js

@@ -0,0 +1,35 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.control.ScaleLine');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
+goog.require('ol.source.OSM');
+
+proj4.defs('Indiana-East', 'PROJCS["IN83-EF",GEOGCS["LL83",DATUM["NAD83",' +
+    'SPHEROID["GRS1980",6378137.000,298.25722210]],PRIMEM["Greenwich",0],' +
+    'UNIT["Degree",0.017453292519943295]],PROJECTION["Transverse_Mercator"],' +
+    'PARAMETER["false_easting",328083.333],' +
+    'PARAMETER["false_northing",820208.333],' +
+    'PARAMETER["scale_factor",0.999966666667],' +
+    'PARAMETER["central_meridian",-85.66666666666670],' +
+    'PARAMETER["latitude_of_origin",37.50000000000000],' +
+    'UNIT["Foot_US",0.30480060960122]]');
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  target: 'map',
+  view: new ol.View({
+    projection: 'Indiana-East',
+    center: ol.proj.fromLonLat([-85.685, 39.891], 'Indiana-East'),
+    zoom: 7,
+    extent: ol.proj.transformExtent([-172.54, 23.81, -47.74, 86.46],
+        'EPSG:4326', 'Indiana-East'),
+    minZoom: 6
+  })
+});
+
+map.addControl(new ol.control.ScaleLine({units: 'us'}));

examples/semi-transparent-layer.js

@@ -13,7 +13,7 @@ var map = new ol.Map({
     }),
     new ol.layer.Tile({
       source: new ol.source.TileJSON({
-        url: 'http://api.tiles.mapbox.com/v3/mapbox.va-quake-aug.jsonp',
+        url: 'http://api.tiles.mapbox.com/v3/mapbox.va-quake-aug.json',
         crossOrigin: 'anonymous'
       })
     })

examples/side-by-side.js

@@ -5,7 +5,7 @@ goog.require('ol.layer.Tile');
 goog.require('ol.source.MapQuest');
 
 
-var domMap = new ol.Map({
+var map1 = new ol.Map({
   layers: [
     new ol.layer.Tile({
       source: new ol.source.MapQuest({layer: 'sat'})
@@ -19,12 +19,18 @@ var domMap = new ol.Map({
   })
 });
 
+var map2 = new ol.Map({
+  target: 'canvasMap',
+  layers: map1.getLayers(),
+  view: map1.getView()
+});
+
 if (ol.has.WEBGL) {
-  var webglMap = new ol.Map({
+  var map3 = new ol.Map({
     renderer: 'webgl',
     target: 'webglMap',
-    layers: domMap.getLayers(),
-    view: domMap.getView()
+    layers: map1.getLayers(),
+    view: map1.getView()
   });
 } else {
   var info = document.getElementById('no-webgl');
@@ -33,9 +39,3 @@ if (ol.has.WEBGL) {
    */
   info.style.display = '';
 }
-
-var canvasMap = new ol.Map({
-  target: 'canvasMap',
-  layers: domMap.getLayers(),
-  view: domMap.getView()
-});

examples/snap.js

@@ -72,6 +72,7 @@ var Modify = {
 };
 Modify.init();
 
+var optionsForm = document.getElementById('options-form');
 
 var Draw = {
   init: function() {
@@ -111,8 +112,6 @@ var Draw = {
 };
 Draw.init();
 
-var optionsForm = document.getElementById('options-form');
-
 
 /**
  * Let user change the geometry type.

examples/sphere-mollweide.js

@@ -39,6 +39,6 @@ var map = new ol.Map({
   })
 });
 
-var graticule = new ol.Graticule({
+new ol.Graticule({
   map: map
 });

examples/synthetic-points.js

@@ -45,7 +45,7 @@ var vectorSource = new ol.source.Vector({
 });
 var vector = new ol.layer.Vector({
   source: vectorSource,
-  style: function(feature, resolution) {
+  style: function(feature) {
     return styles[feature.get('size')];
   }
 });

examples/tile-load-events.js

@@ -4,7 +4,6 @@ goog.require('ol.layer.Tile');
 goog.require('ol.source.TileJSON');
 
 
-
 /**
  * Renders a progress bar.
  * @param {Element} el The target element.
@@ -79,18 +78,18 @@ Progress.prototype.hide = function() {
 var progress = new Progress(document.getElementById('progress'));
 
 var source = new ol.source.TileJSON({
-  url: 'http://api.tiles.mapbox.com/v3/mapbox.world-bright.jsonp',
+  url: 'http://api.tiles.mapbox.com/v3/mapbox.world-bright.json',
   crossOrigin: 'anonymous'
 });
 
-source.on('tileloadstart', function(event) {
+source.on('tileloadstart', function() {
   progress.addLoading();
 });
 
-source.on('tileloadend', function(event) {
+source.on('tileloadend', function() {
   progress.addLoaded();
 });
-source.on('tileloaderror', function(event) {
+source.on('tileloaderror', function() {
   progress.addLoaded();
 });