From 57faa5a4a26cf96b89f3a22b69aeb338df99b4d2 Mon Sep 17 00:00:00 2001 From: Lucas Wojciechowski Date: Wed, 22 Mar 2017 14:31:51 -0700 Subject: [PATCH 1/3] Add `Map#loadImage` method and "Map#addImage" examples --- .../3400-01-31-add-image-generated.html | 59 +++++++++++++++++++ .../_posts/examples/3400-01-31-add-image.html | 46 +++++++++++++++ src/ui/map.js | 15 +++++ 3 files changed, 120 insertions(+) create mode 100644 docs/_posts/examples/3400-01-31-add-image-generated.html create mode 100644 docs/_posts/examples/3400-01-31-add-image.html diff --git a/docs/_posts/examples/3400-01-31-add-image-generated.html b/docs/_posts/examples/3400-01-31-add-image-generated.html new file mode 100644 index 00000000000..8e8b70d55fe --- /dev/null +++ b/docs/_posts/examples/3400-01-31-add-image-generated.html @@ -0,0 +1,59 @@ +--- +layout: example +category: example +title: Add a generated icon to the map +description: Add an icon to the map that was generated at runtime. +tags: + - styles + - layers +--- +
+ + diff --git a/docs/_posts/examples/3400-01-31-add-image.html b/docs/_posts/examples/3400-01-31-add-image.html new file mode 100644 index 00000000000..0c238d9f860 --- /dev/null +++ b/docs/_posts/examples/3400-01-31-add-image.html @@ -0,0 +1,46 @@ +--- +layout: example +category: example +title: Add an icon to the map +description: Add an icon to the map from an external URL and use it in a symbol layer. +tags: + - styles + - layers +--- +
+ + diff --git a/src/ui/map.js b/src/ui/map.js index c88ade37013..a4ed35d98da 100755 --- a/src/ui/map.js +++ b/src/ui/map.js @@ -4,6 +4,7 @@ const util = require('../util/util'); const browser = require('../util/browser'); const window = require('../util/window'); const DOM = require('../util/dom'); +const ajax = require('../util/ajax'); const Style = require('../style/style'); const AnimationLoop = require('../style/animation_loop'); @@ -823,6 +824,8 @@ class Map extends Camera { * {@link Map#error} event will be fired if there is not enough space in the * sprite to add this image. * + * @see [Add an icon to the map](https://www.mapbox.com/mapbox-gl-js/example/add-image/) + * @see [Add a generated icon to the map](https://www.mapbox.com/mapbox-gl-js/example/add-image-generated/) * @param {string} name The name of the image. * @param {HTMLImageElement|ArrayBufferView} image The image as an `HTMLImageElement` or `ArrayBufferView` (using the format of [`ImageData#data`](https://developer.mozilla.org/en-US/docs/Web/API/ImageData/data)) * @param {Object} [options] Required if and only if passing an `ArrayBufferView` @@ -843,6 +846,18 @@ class Map extends Camera { this.style.spriteAtlas.removeImage(name); } + /** + * Load an image from an external URL for use with `Map#addImage`. External + * domains must support [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS). + * + * @param {string} url The URL of the image. + * @param {Function} callback Called when the image has loaded or with an error argument if there is an error. + * @see [Add an icon to the map](https://www.mapbox.com/mapbox-gl-js/example/add-image/) + */ + loadImage(url, callback) { + ajax.getImage(url, callback); + } + /** * Adds a [Mapbox style layer](https://www.mapbox.com/mapbox-gl-style-spec/#layers) * to the map's style. From ea263813884171c255cb7b9d52cc2b82886aa1b0 Mon Sep 17 00:00:00 2001 From: Lucas Wojciechowski Date: Wed, 22 Mar 2017 14:40:09 -0700 Subject: [PATCH 2/3] =?UTF-8?q?Fix=20eslint=20=F0=9F=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/_posts/examples/.eslintrc | 3 ++- docs/_posts/examples/3400-01-31-add-image.html | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/_posts/examples/.eslintrc b/docs/_posts/examples/.eslintrc index 1f57dfae8de..002eb1bdfe3 100644 --- a/docs/_posts/examples/.eslintrc +++ b/docs/_posts/examples/.eslintrc @@ -5,7 +5,8 @@ "MapboxGeocoder": true, "MapboxDirections": true, "turf": true, - "d3": true + "d3": true, + "Uint8Array": true }, "rules": { "strict": "off", diff --git a/docs/_posts/examples/3400-01-31-add-image.html b/docs/_posts/examples/3400-01-31-add-image.html index 0c238d9f860..f84c5193df0 100644 --- a/docs/_posts/examples/3400-01-31-add-image.html +++ b/docs/_posts/examples/3400-01-31-add-image.html @@ -17,7 +17,8 @@ }); map.on('load', () => { - map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png', (err, image) => { + map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png', (error, image) => { + if (error) throw error; map.addImage('cat', image); map.addLayer({ "id": "points", From 8fce5472c9a653b633ac6ec511468327aa3e0bac Mon Sep 17 00:00:00 2001 From: Lucas Wojciechowski Date: Wed, 22 Mar 2017 15:11:26 -0700 Subject: [PATCH 3/3] Simplify eslint rules by enabling es6 features --- docs/_posts/examples/.eslintrc | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/_posts/examples/.eslintrc b/docs/_posts/examples/.eslintrc index 002eb1bdfe3..9338cbaaabe 100644 --- a/docs/_posts/examples/.eslintrc +++ b/docs/_posts/examples/.eslintrc @@ -5,8 +5,7 @@ "MapboxGeocoder": true, "MapboxDirections": true, "turf": true, - "d3": true, - "Uint8Array": true + "d3": true }, "rules": { "strict": "off", @@ -17,7 +16,6 @@ "prefer-template": "off" }, "env": { - "es6": false, "browser": true } }