ol-mapbox-style
Advanced tools
Comparing version 8.2.1 to 9.0.0
# Changelog | ||
## Next version | ||
## 9.0.0 | ||
### Breaking changes | ||
* ol-mapbox-style now requires OpenLayers 7 | ||
* `icon-offset` has been fixed. If you previously worked around the x-value moving left instead of right with increasing offset, you have to remove this workaround now. | ||
### Other changes | ||
* Added support for `text-justify` | ||
## 8.2.1 | ||
@@ -4,0 +17,0 @@ |
@@ -1,2 +0,2 @@ | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[945],{5569:(e,s,r)=>{r(9789),(0,r(5955).ZP)("map","https://www.arcgis.com/sharing/rest/content/items/2afe5b807fa74006be6363fd243ffb30/resources/styles/root.json",{transformRequest:function(e,s){if("Source"===s)return new Request(e.replace("/VectorTileServer","/VectorTileServer/"))}})}},e=>{e(e.s=5569)}]); | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[945],{5569:(e,s,r)=>{r(9789),(0,r(8031).ZP)("map","https://www.arcgis.com/sharing/rest/content/items/2afe5b807fa74006be6363fd243ffb30/resources/styles/root.json",{transformRequest:function(e,s){if("Source"===s)return new Request(e.replace("/VectorTileServer","/VectorTileServer/"))}})}},e=>{e(e.s=5569)}]); | ||
//# sourceMappingURL=esri-transformrequest.js.map |
@@ -1,2 +0,2 @@ | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[874],{8516:(e,t,l)=>{l(9789);var s=l(5955),n="data/geojson.json";fetch(n).then((function(e){return e.json()})).then((function(e){return e.layers.push({id:"state-hover",type:"fill",source:"states",paint:{"fill-color":"red","fill-opacity":["case",["boolean",["feature-state","hover"],!1],.5,0]}}),(0,s.ZP)("map",e,{styleUrl:n})})).then((function(e){var t=null;e.on("pointermove",(function(l){var n=e.getFeaturesAtPixel(l.pixel);n.length>0?(null!==t&&(0,s.LN)(e,{source:"states",id:t},null),t=n[0].getId(),(0,s.LN)(e,{source:"states",id:t},{hover:!0})):null!==t&&((0,s.LN)(e,{source:"states",id:t},null),t=null)}))}))}},e=>{e(e.s=8516)}]); | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[874],{8516:(e,t,l)=>{l(9789);var s=l(8031),n="data/geojson.json";fetch(n).then((function(e){return e.json()})).then((function(e){return e.layers.push({id:"state-hover",type:"fill",source:"states",paint:{"fill-color":"red","fill-opacity":["case",["boolean",["feature-state","hover"],!1],.5,0]}}),(0,s.ZP)("map",e,{styleUrl:n})})).then((function(e){var t=null;e.on("pointermove",(function(l){var n=e.getFeaturesAtPixel(l.pixel);n.length>0?(null!==t&&(0,s.LN)(e,{source:"states",id:t},null),t=n[0].getId(),(0,s.LN)(e,{source:"states",id:t},{hover:!0})):null!==t&&((0,s.LN)(e,{source:"states",id:t},null),t=null)}))}))}},e=>{e(e.s=8516)}]); | ||
//# sourceMappingURL=geojson-featurestate.js.map |
@@ -1,2 +0,2 @@ | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[223],{6065:(s,e,n)=>{n(9789),(0,n(5955).nn)("map","data/geojson-inline.json")}},s=>{s(s.s=6065)}]); | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[223],{6065:(s,e,n)=>{n(9789),(0,n(8031).nn)("map","data/geojson-inline.json")}},s=>{s(s.s=6065)}]); | ||
//# sourceMappingURL=geojson-inline.js.map |
@@ -1,2 +0,2 @@ | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[145],{2236:(e,s,a)=>{a(9789);var o=a(5218),n=a(6219),t=a(8615),l=a(5955),p=a(9786),w=new o.Z;(0,l.bg)(w,"data/geojson.json"),new n.Z({target:"map",layers:[w],view:new t.ZP({center:(0,p.mi)([-122.19952899999998,51.920367528011525]),zoom:3})})}},e=>{e(e.s=2236)}]); | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[145],{2236:(e,s,a)=>{a(9789);var o=a(5218),n=a(6985),t=a(8615),l=a(8031),p=a(9786),w=new o.Z;(0,l.bg)(w,"data/geojson.json"),new n.Z({target:"map",layers:[w],view:new t.ZP({center:(0,p.mi)([-122.19952899999998,51.920367528011525]),zoom:3})})}},e=>{e(e.s=2236)}]); | ||
//# sourceMappingURL=geojson-layer.js.map |
@@ -1,2 +0,2 @@ | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[346],{4783:(s,e,a)=>{a(9789),(0,a(5955).nn)("map","data/geojson.json")}},s=>{s(s.s=4783)}]); | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[346],{4783:(s,e,a)=>{a(9789),(0,a(8031).nn)("map","data/geojson.json")}},s=>{s(s.s=4783)}]); | ||
//# sourceMappingURL=geojson.js.map |
@@ -1,2 +0,2 @@ | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[862],{7018:(e,o,s)=>{s(9789);var c=s(5955),a=document.cookie.replace(/(?:(?:^|.*;\s*)mapbox_access_token\s*\=\s*([^;]*).*$)|^.*$/,"$1");a||(a=window.prompt("Enter your Mapbox API access token:"),document.cookie="mapbox_access_token="+a+"; expires=Fri, 31 Dec 9999 23:59:59 GMT"),(0,c.ZP)("map","mapbox://styles/mapbox/bright-v9",{accessToken:a})}},e=>{e(e.s=7018)}]); | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[862],{7018:(e,o,s)=>{s(9789);var c=s(8031),a=document.cookie.replace(/(?:(?:^|.*;\s*)mapbox_access_token\s*\=\s*([^;]*).*$)|^.*$/,"$1");a||(a=window.prompt("Enter your Mapbox API access token:"),document.cookie="mapbox_access_token="+a+"; expires=Fri, 31 Dec 9999 23:59:59 GMT"),(0,c.ZP)("map","mapbox://styles/mapbox/bright-v9",{accessToken:a})}},e=>{e(e.s=7018)}]); | ||
//# sourceMappingURL=mapbox.js.map |
@@ -1,2 +0,2 @@ | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[507],{8890:(e,s,t)=>{t(9789);var o=t(3015),c=t(6219),a=t(8615),n=t(5955),i=document.cookie.replace(/(?:(?:^|.*;\s*)tilehosting_access_token\s*\=\s*([^;]*).*$)|^.*$/,"$1");i||(i=window.prompt("Enter your tilehosting API access token:"),document.cookie="tilehosting_access_token="+i+"; expires=Fri, 31 Dec 9999 23:59:59 GMT");var l="https://api.maptiler.com/maps/basic/style.json?key="+i,p=new o.Z({declutter:!0});(0,n.bg)(p,l),(0,n.h0)(p,l),new c.Z({target:"map",layers:[p],view:new a.ZP({center:[0,0],zoom:2})})}},e=>{e(e.s=8890)}]); | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[507],{8890:(e,s,t)=>{t(9789);var o=t(3830),c=t(6985),a=t(8615),n=t(8031),i=document.cookie.replace(/(?:(?:^|.*;\s*)tilehosting_access_token\s*\=\s*([^;]*).*$)|^.*$/,"$1");i||(i=window.prompt("Enter your tilehosting API access token:"),document.cookie="tilehosting_access_token="+i+"; expires=Fri, 31 Dec 9999 23:59:59 GMT");var l="https://api.maptiler.com/maps/basic/style.json?key="+i,p=new o.Z({declutter:!0});(0,n.bg)(p,l),(0,n.h0)(p,l),new c.Z({target:"map",layers:[p],view:new a.ZP({center:[0,0],zoom:2})})}},e=>{e(e.s=8890)}]); | ||
//# sourceMappingURL=openmaptiles-layer.js.map |
@@ -1,2 +0,2 @@ | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[347],{3563:(e,s,o)=>{o(9789);var t=o(5955),c=document.cookie.replace(/(?:(?:^|.*;\s*)tilehosting_access_token\s*\=\s*([^;]*).*$)|^.*$/,"$1");c||(c=window.prompt("Enter your tilehosting API access token:"),document.cookie="tilehosting_access_token="+c+"; expires=Fri, 31 Dec 9999 23:59:59 GMT"),(0,t.ZP)("map","https://api.maptiler.com/maps/basic/style.json?key="+c)}},e=>{e(e.s=3563)}]); | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[347],{3563:(e,s,o)=>{o(9789);var t=o(8031),c=document.cookie.replace(/(?:(?:^|.*;\s*)tilehosting_access_token\s*\=\s*([^;]*).*$)|^.*$/,"$1");c||(c=window.prompt("Enter your tilehosting API access token:"),document.cookie="tilehosting_access_token="+c+"; expires=Fri, 31 Dec 9999 23:59:59 GMT"),(0,t.ZP)("map","https://api.maptiler.com/maps/basic/style.json?key="+c)}},e=>{e(e.s=3563)}]); | ||
//# sourceMappingURL=openmaptiles.js.map |
@@ -1,2 +0,2 @@ | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[890],{4468:(e,t,a)=>{a(9789);var n=a(8833),s=a(6219),o=a(5218),r=a(8275),u=a(8615),c=a(5955),l=new o.Z({declutter:!0,source:new r.Z({format:new n.Z,url:"data/states.geojson"})}),w=new s.Z({target:"map",view:new u.ZP({center:[-13603186.115192635,6785744.563386],zoom:2})});fetch("data/states.json").then((function(e){return e.json()})).then((function(e){(0,c.uX)(l,e,"states"),-1===w.getLayers().getArray().indexOf(l)&&w.addLayer(l)}))}},e=>{e(e.s=4468)}]); | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[890],{4468:(e,t,a)=>{a(9789);var n=a(8833),s=a(6985),o=a(5218),r=a(8275),u=a(8615),c=a(8031),l=new o.Z({declutter:!0,source:new r.Z({format:new n.Z,url:"data/states.geojson"})}),w=new s.Z({target:"map",view:new u.ZP({center:[-13603186.115192635,6785744.563386],zoom:2})});fetch("data/states.json").then((function(e){return e.json()})).then((function(e){(0,c.uX)(l,e,"states"),-1===w.getLayers().getArray().indexOf(l)&&w.addLayer(l)}))}},e=>{e(e.s=4468)}]); | ||
//# sourceMappingURL=stylefunction.js.map |
@@ -1,2 +0,2 @@ | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[366],{3327:(s,e,o)=>{o(9789),(0,o(5955).nn)("map"," https://demo.tegola.io/styles/hot-osm.json")}},s=>{s(s.s=3327)}]); | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[366],{3327:(s,e,o)=>{o(9789),(0,o(8031).nn)("map"," https://demo.tegola.io/styles/hot-osm.json")}},s=>{s(s.s=3327)}]); | ||
//# sourceMappingURL=tilejson-vectortile.js.map |
@@ -1,2 +0,2 @@ | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[177],{8492:(s,e,a)=>{a(9789),(0,a(5955).nn)("map","data/tilejson.json")}},s=>{s(s.s=8492)}]); | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[177],{8492:(s,e,a)=>{a(9789),(0,a(8031).nn)("map","data/tilejson.json")}},s=>{s(s.s=8492)}]); | ||
//# sourceMappingURL=tilejson.js.map |
@@ -1,2 +0,2 @@ | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[840],{2516:(s,a,e)=>{e(9789),(0,e(5955).ZP)("map","data/wms.json")}},s=>{s(s.s=2516)}]); | ||
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[840],{2516:(s,a,e)=>{e(9789),(0,e(8031).ZP)("map","data/wms.json")}},s=>{s(s.s=2516)}]); | ||
//# sourceMappingURL=wms.js.map |
{ | ||
"name": "ol-mapbox-style", | ||
"version": "8.2.1", | ||
"version": "9.0.0", | ||
"description": "Create OpenLayers maps from Mapbox Style objects", | ||
@@ -33,3 +33,3 @@ "type": "module", | ||
"build": "tsc --project tsconfig-build.json && rollup -c && esm=true rollup -c && webpack-cli --mode=production --config ./webpack.config.examples.cjs", | ||
"doc": "typedoc --plugin typedoc-plugin-markdown --plugin typedoc-plugin-missing-exports src/index.js --readme none --excludeExternals --internalNamespace 'types' --name API --hideBreadcrumbs --disableSources --tsconfig tsconfig-typecheck.json && npx concat-md docs --hide-anchor-links=false | npx md-insert README.md -i --region apidoc", | ||
"doc": "typedoc --plugin typedoc-plugin-markdown --plugin typedoc-plugin-missing-exports src/index.js --readme none --excludeExternals --preserveAnchorCasing --hideBreadcrumbs --disableSources --tsconfig tsconfig-typecheck.json && npx concat-md docs --hide-anchor-links=false | npx add-text-to-markdown README.md --section \"API\" --write", | ||
"karma": "karma start test/karma.conf.cjs", | ||
@@ -54,6 +54,7 @@ "lint": "eslint test examples src", | ||
"@types/topojson-specification": "^1.0.1", | ||
"add-text-to-markdown": "^2.0.0", | ||
"babel-loader": "^8.0.6", | ||
"buble": "^0.20.0", | ||
"buble-loader": "^0.5.1", | ||
"concat-md": "^0.4.0", | ||
"concat-md": "^0.5.0", | ||
"copy-webpack-plugin": "^11.0.0", | ||
@@ -75,18 +76,17 @@ "coverage-istanbul-loader": "^3.0.5", | ||
"mapbox-gl-styles": "^2.0.2", | ||
"md-insert": "^1.0.1", | ||
"mini-css-extract-plugin": "^2.4.4", | ||
"mocha": "^10.0.0", | ||
"nanoassert": "^2.0.0", | ||
"ol": "^6.14.2-dev.1652464787949", | ||
"puppeteer": "^15.3.0", | ||
"ol": "^7.0.0-dev.1660829860979", | ||
"puppeteer": "^16.1.0", | ||
"remove-flow-types-loader": "^1.1.0", | ||
"rollup": "^2.70.2", | ||
"rollup-plugin-terser": "^7.0.2", | ||
"rollup-plugin-unassert": "^0.4.0", | ||
"rollup-plugin-unassert": "^0.5.0", | ||
"should": "^13.2.3", | ||
"sinon": "^14.0.0", | ||
"style-loader": "^3.3.1", | ||
"typedoc": "0.22.18", | ||
"typedoc-plugin-markdown": "^3.11.14", | ||
"typedoc-plugin-missing-exports": "^0.23.0", | ||
"typedoc": "^0.23.10", | ||
"typedoc-plugin-markdown": "^3.13.4", | ||
"typedoc-plugin-missing-exports": "^1.0.0", | ||
"typescript": "^4.6.0-beta", | ||
@@ -93,0 +93,0 @@ "webpack": "^5.62.1", |
@@ -38,10 +38,9 @@ To create and publish a release, perform the following steps: | ||
Create build artifacts in the `dist` directory (ignored in git, but included in the npm package): | ||
npm publish | ||
npm run build | ||
### Commit release artifacts | ||
Publish the package: | ||
git add -f dist | ||
git commit -m "Add dist for v2.11.0" | ||
npm publish | ||
### Create and push a tag | ||
@@ -48,0 +47,0 @@ |
524
README.md
@@ -15,4 +15,6 @@ # ol-mapbox-style | ||
**ol-mapbox-style requires [OpenLayers](https://npmjs.com/package/ol) version >= 6.13.0 < 7**. | ||
**ol-mapbox-style v9 requires [OpenLayers](https://npmjs.com/package/ol) version >= 7 < 8**. | ||
**ol-mapbox-style v8 requires [OpenLayers](https://npmjs.com/package/ol) version >= 6.13.0 < 7**. | ||
### Usage | ||
@@ -72,8 +74,2 @@ | ||
### Support for old browsers | ||
Internet Explorer (version 11) and other old browsers (Android 4.x) are supported when polyfills for the following features are loaded: | ||
* `fetch` (including `Promise`) | ||
## Building the library | ||
@@ -97,516 +93,2 @@ | ||
<!--apidoc start--> | ||
<a name="readmemd"></a> | ||
# API | ||
## Table of contents | ||
### References | ||
- [default](#default) | ||
### Namespaces | ||
- [types](#modulestypesmd) | ||
### Functions | ||
- [apply](#apply) | ||
- [applyBackground](#applybackground) | ||
- [applyStyle](#applystyle) | ||
- [getFeatureState](#getfeaturestate) | ||
- [getLayer](#getlayer) | ||
- [getLayers](#getlayers) | ||
- [getSource](#getsource) | ||
- [recordStyleLayer](#recordstylelayer) | ||
- [renderTransparent](#rendertransparent) | ||
- [setFeatureState](#setfeaturestate) | ||
- [stylefunction](#stylefunction) | ||
## References | ||
### default | ||
Renames and re-exports [apply](#apply) | ||
## Functions | ||
### apply | ||
▸ **apply**(`map`, `style`, `options?`): `Promise`<`Map`\> | ||
Loads and applies a Mapbox Style object into an OpenLayers Map. This includes | ||
the map background, the layers, the center and the zoom. | ||
**Example:** | ||
```js | ||
import apply from 'ol-mapbox-style'; | ||
apply('map', 'mapbox://styles/mapbox/bright-v9', {accessToken: 'YOUR_MAPBOX_TOKEN'}); | ||
``` | ||
The center and zoom will only be set if present in the Mapbox Style document, | ||
and if not already set on the OpenLayers map. | ||
Layers will be added to the OpenLayers map, without affecting any layers that | ||
might already be set on the map. | ||
Layers added by `apply()` will have two additional properties: | ||
* `mapbox-source`: The `id` of the Mapbox Style document's source that the | ||
OpenLayers layer was created from. Usually `apply()` creates one | ||
OpenLayers layer per Mapbox Style source, unless the layer stack has | ||
layers from different sources in between. | ||
* `mapbox-layers`: The `id`s of the Mapbox Style document's layers that are | ||
included in the OpenLayers layer. | ||
This function sets an additional `mapbox-style` property on the OpenLayers | ||
map instance, which holds the Mapbox Style object. | ||
#### Parameters | ||
| Name | Type | Description | | ||
| :------ | :------ | :------ | | ||
| `map` | `string` \| `HTMLElement` \| `Map` | Either an existing OpenLayers Map instance, or a HTML element, or the id of a HTML element that will be the target of a new OpenLayers Map. | | ||
| `style` | `any` | JSON style object or style url pointing to a Mapbox Style object. When using Mapbox APIs, the url is the `styleUrl` shown in Mapbox Studio's "share" panel. In addition, the `accessToken` option (see below) must be set. When passed as JSON style object, all OpenLayers layers created by `apply()` will be immediately available, but they may not have a source yet (i.e. when they are defined by a TileJSON url in the Mapbox Style document). When passed as style url, layers will be added to the map when the Mapbox Style document is loaded and parsed. | | ||
| `options` | [`Options`](#interfacestypesoptionsmd) | Options. | | ||
#### Returns | ||
`Promise`<`Map`\> | ||
A promise that resolves after all layers have been added to | ||
the OpenLayers Map instance, their sources set, and their styles applied. The | ||
`resolve` callback will be called with the OpenLayers Map instance as | ||
argument. | ||
___ | ||
### applyBackground | ||
▸ **applyBackground**(`mapOrLayer`, `glStyle`, `options?`): `Promise`<`any`\> | ||
Applies properties of the Mapbox Style's first `background` layer to the | ||
provided map or VectorTile layer. | ||
**Example:** | ||
```js | ||
import {applyBackground} from 'ol-mapbox-style'; | ||
import {Map} from 'ol'; | ||
const map = new Map({target: 'map'}); | ||
applyBackground(map, 'https://api.maptiler.com/maps/basic/style.json?key=YOUR_OPENMAPTILES_TOKEN'); | ||
``` | ||
#### Parameters | ||
| Name | Type | Description | | ||
| :------ | :------ | :------ | | ||
| `mapOrLayer` | `VectorTileLayer` \| `Map` | OpenLayers Map or VectorTile layer. | | ||
| `glStyle` | `any` | Mapbox Style object or url. | | ||
| `options` | [`Options`](#interfacestypesoptionsmd) | Options. | | ||
#### Returns | ||
`Promise`<`any`\> | ||
Promise that resolves when the background is applied. | ||
___ | ||
### applyStyle | ||
▸ **applyStyle**(`layer`, `glStyle`, `sourceOrLayers?`, `optionsOrPath?`, `resolutions?`): `Promise`<`any`\> | ||
Applies a style function to an `ol/layer/VectorTile` or `ol/layer/Vector` | ||
with an `ol/source/VectorTile` or an `ol/source/Vector`. If the layer does not have a source | ||
yet, it will be created and populated from the information in the `glStyle`. | ||
**Example:** | ||
```js | ||
import {applyStyle} from 'ol-mapbox-style'; | ||
import {VectorTile} from 'ol/layer.js'; | ||
const layer = new VectorTile({declutter: true}); | ||
applyStyle(layer, 'https://api.maptiler.com/maps/basic/style.json?key=YOUR_OPENMAPTILES_TOKEN'); | ||
``` | ||
The style function will render all layers from the `glStyle` object that use the source | ||
of the first layer, the specified `source`, or a subset of layers from the same source. The | ||
source needs to be a `"type": "vector"` or `"type": "geojson"` source. | ||
Two additional properties will be set on the provided layer: | ||
* `mapbox-source`: The `id` of the Mapbox Style document's source that the | ||
OpenLayers layer was created from. Usually `apply()` creates one | ||
OpenLayers layer per Mapbox Style source, unless the layer stack has | ||
layers from different sources in between. | ||
* `mapbox-layers`: The `id`s of the Mapbox Style document's layers that are | ||
included in the OpenLayers layer. | ||
#### Parameters | ||
| Name | Type | Default value | Description | | ||
| :------ | :------ | :------ | :------ | | ||
| `layer` | `VectorLayer`<`any`\> \| `VectorTileLayer` | `undefined` | OpenLayers layer. When the layer has a source configured, it will be modified to use the configuration from the glStyle's `source`. Options specified on the layer's source will override those from the glStyle's `source`, except for `url`, `tileUrlFunction` and `tileGrid` (exception: when the source projection is not `EPSG:3857`). | | ||
| `glStyle` | `any` | `undefined` | Mapbox Style object. | | ||
| `sourceOrLayers` | `string` \| `string`[] | `''` | `source` key or an array of layer `id`s from the Mapbox Style object. When a `source` key is provided, all layers for the specified source will be included in the style function. When layer `id`s are provided, they must be from layers that use the same source. When not provided or a falsey value, all layers using the first source specified in the glStyle will be rendered. | | ||
| `optionsOrPath` | `string` \| [`Options`](#interfacestypesoptionsmd) | `{}` | Options. Alternatively the path of the style file (only required when a relative path is used for the `"sprite"` property of the style). | | ||
| `resolutions` | `number`[] | `undefined` | Resolutions for mapping resolution to zoom level. Only needed when working with non-standard tile grids or projections. | | ||
#### Returns | ||
`Promise`<`any`\> | ||
Promise which will be resolved when the style can be used | ||
for rendering. | ||
___ | ||
### getFeatureState | ||
▸ **getFeatureState**(`mapOrLayer`, `feature`): `any` | ||
Sets or removes a feature state. The feature state is taken into account for styling, | ||
just like the feature's properties, and can be used e.g. to conditionally render selected | ||
features differently. | ||
#### Parameters | ||
| Name | Type | Description | | ||
| :------ | :------ | :------ | | ||
| `mapOrLayer` | `VectorLayer`<`any`\> \| `VectorTileLayer` \| `Map` | Map or layer to set the feature state on. | | ||
| `feature` | [`FeatureIdentifier`](#interfacestypesfeatureidentifiermd) | Feature identifier. | | ||
#### Returns | ||
`any` | ||
Feature state or `null` when no feature state is set for the given | ||
feature identifier. | ||
___ | ||
### getLayer | ||
▸ **getLayer**(`map`, `layerId`): `Layer`<`Source`, `LayerRenderer`<`any`\>\> | ||
Get the OpenLayers layer instance that contains the provided Mapbox Style | ||
`layer`. Note that multiple Mapbox Style layers are combined in a single | ||
OpenLayers layer instance when they use the same Mapbox Style `source`. | ||
#### Parameters | ||
| Name | Type | Description | | ||
| :------ | :------ | :------ | | ||
| `map` | `Map` | OpenLayers Map. | | ||
| `layerId` | `string` | Mapbox Style layer id. | | ||
#### Returns | ||
`Layer`<`Source`, `LayerRenderer`<`any`\>\> | ||
OpenLayers layer instance. | ||
___ | ||
### getLayers | ||
▸ **getLayers**(`map`, `sourceId`): `Layer`<`Source`, `LayerRenderer`<`any`\>\>[] | ||
Get the OpenLayers layer instances for the provided Mapbox Style `source`. | ||
#### Parameters | ||
| Name | Type | Description | | ||
| :------ | :------ | :------ | | ||
| `map` | `Map` | OpenLayers Map. | | ||
| `sourceId` | `string` | Mapbox Style source id. | | ||
#### Returns | ||
`Layer`<`Source`, `LayerRenderer`<`any`\>\>[] | ||
OpenLayers layer instances. | ||
___ | ||
### getSource | ||
▸ **getSource**(`map`, `sourceId`): `Source` | ||
Get the OpenLayers source instance for the provided Mapbox Style `source`. | ||
#### Parameters | ||
| Name | Type | Description | | ||
| :------ | :------ | :------ | | ||
| `map` | `Map` | OpenLayers Map. | | ||
| `sourceId` | `string` | Mapbox Style source id. | | ||
#### Returns | ||
`Source` | ||
OpenLayers source instance. | ||
___ | ||
### recordStyleLayer | ||
▸ **recordStyleLayer**(`record?`): `void` | ||
Turns recording of the Mapbox Style's `layer` on and off. When turned on, | ||
the layer that a rendered feature belongs to will be set as the feature's | ||
`mapbox-layer` property. | ||
#### Parameters | ||
| Name | Type | Default value | Description | | ||
| :------ | :------ | :------ | :------ | | ||
| `record` | `boolean` | `false` | Recording of the style layer is on. | | ||
#### Returns | ||
`void` | ||
___ | ||
### renderTransparent | ||
▸ **renderTransparent**(`enabled`): `void` | ||
Configure whether features with a transparent style should be rendered. When | ||
set to `true`, it will be possible to hit detect content that is not visible, | ||
like transparent fills of polygons, using `ol/layer/Layer#getFeatures()` or | ||
`ol/Map#getFeaturesAtPixel()` | ||
#### Parameters | ||
| Name | Type | Description | | ||
| :------ | :------ | :------ | | ||
| `enabled` | `boolean` | Rendering of transparent elements is enabled. Default is `false`. | | ||
#### Returns | ||
`void` | ||
___ | ||
### setFeatureState | ||
▸ **setFeatureState**(`mapOrLayer`, `feature`, `state`): `void` | ||
Sets or removes a feature state. The feature state is taken into account for styling, | ||
just like the feature's properties, and can be used e.g. to conditionally render selected | ||
features differently. | ||
The feature state will be stored on the OpenLayers layer matching the feature identifier, in the | ||
`mapbox-featurestate` property. | ||
#### Parameters | ||
| Name | Type | Description | | ||
| :------ | :------ | :------ | | ||
| `mapOrLayer` | `VectorLayer`<`any`\> \| `VectorTileLayer` \| `Map` | OpenLayers Map or layer to set the feature state on. | | ||
| `feature` | [`FeatureIdentifier`](#interfacestypesfeatureidentifiermd) | Feature identifier. | | ||
| `state` | `any` | Feature state. Set to `null` to remove the feature state. | | ||
#### Returns | ||
`void` | ||
___ | ||
### stylefunction | ||
▸ **stylefunction**(`olLayer`, `glStyle`, `sourceOrLayers`, `resolutions?`, `spriteData?`, `spriteImageUrl?`, `getFonts?`): `StyleFunction` | ||
Creates a style function from the `glStyle` object for all layers that use | ||
the specified `source`, which needs to be a `"type": "vector"` or | ||
`"type": "geojson"` source and applies it to the specified OpenLayers layer. | ||
Two additional properties will be set on the provided layer: | ||
* `mapbox-source`: The `id` of the Mapbox Style document's source that the | ||
OpenLayers layer was created from. Usually `apply()` creates one | ||
OpenLayers layer per Mapbox Style source, unless the layer stack has | ||
layers from different sources in between. | ||
* `mapbox-layers`: The `id`s of the Mapbox Style document's layers that are | ||
included in the OpenLayers layer. | ||
This function also works in a web worker. In worker mode, the main thread needs | ||
to listen to messages from the worker and respond with another message to make | ||
sure that sprite image loading works: | ||
```js | ||
worker.addEventListener('message', event => { | ||
if (event.data.action === 'loadImage') { | ||
const image = new Image(); | ||
image.crossOrigin = 'anonymous'; | ||
image.addEventListener('load', function() { | ||
createImageBitmap(image, 0, 0, image.width, image.height).then(imageBitmap => { | ||
worker.postMessage({ | ||
action: 'imageLoaded', | ||
image: imageBitmap, | ||
src: event.data.src | ||
}, [imageBitmap]); | ||
}); | ||
}); | ||
image.src = event.data.src; | ||
} | ||
}); | ||
``` | ||
#### Parameters | ||
| Name | Type | Default value | Description | | ||
| :------ | :------ | :------ | :------ | | ||
| `olLayer` | `VectorLayer`<`any`\> \| `VectorTileLayer` | `undefined` | OpenLayers layer to apply the style to. In addition to the style, the layer will get two properties: `mapbox-source` will be the `id` of the `glStyle`'s source used for the layer, and `mapbox-layers` will be an array of the `id`s of the `glStyle`'s layers. | | ||
| `glStyle` | `any` | `undefined` | Mapbox Style object. | | ||
| `sourceOrLayers` | `string` \| `string`[] | `undefined` | `source` key or an array of layer `id`s from the Mapbox Style object. When a `source` key is provided, all layers for the specified source will be included in the style function. When layer `id`s are provided, they must be from layers that use the same source. | | ||
| `resolutions` | `number`[] | `defaultResolutions` | Resolutions for mapping resolution to zoom level. | | ||
| `spriteData` | `any` | `undefined` | Sprite data from the url specified in the Mapbox Style object's `sprite` property. Only required if a `sprite` property is specified in the Mapbox Style object. | | ||
| `spriteImageUrl` | `string` | `undefined` | Sprite image url for the sprite specified in the Mapbox Style object's `sprite` property. Only required if a `sprite` property is specified in the Mapbox Style object. | | ||
| `getFonts` | (`arg0`: `string`[]) => `string`[] | `undefined` | Function that receives a font stack as arguments, and returns a (modified) font stack that is available. Font names are the names used in the Mapbox Style object. If not provided, the font stack will be used as-is. This function can also be used for loading web fonts. | | ||
#### Returns | ||
`StyleFunction` | ||
Style function for use in | ||
`ol.layer.Vector` or `ol.layer.VectorTile`. | ||
<a name="interfacestypesfeatureidentifiermd"></a> | ||
# Interface: FeatureIdentifier<\> | ||
[types](#modulestypesmd).FeatureIdentifier | ||
## Table of contents | ||
### Properties | ||
- [id](#id) | ||
- [source](#source) | ||
## Properties | ||
### id | ||
• **id**: `string` \| `number` | ||
The feature id. | ||
___ | ||
### source | ||
• **source**: `string` | ||
The source id. | ||
<a name="interfacestypesoptionsmd"></a> | ||
# Interface: Options<\> | ||
[types](#modulestypesmd).Options | ||
## Table of contents | ||
### Properties | ||
- [accessToken](#accesstoken) | ||
- [accessTokenParam](#accesstokenparam) | ||
- [resolutions](#resolutions) | ||
- [styleUrl](#styleurl) | ||
- [transformRequest](#transformrequest) | ||
## Properties | ||
### accessToken | ||
• **accessToken**: `string` | ||
Access token for 'mapbox://' urls. | ||
___ | ||
### accessTokenParam | ||
• **accessTokenParam**: `string` | ||
Access token param. For internal use. | ||
___ | ||
### resolutions | ||
• **resolutions**: `number`[] | ||
Resolutions for mapping resolution to zoom level. | ||
Only needed when working with non-standard tile grids or projections. | ||
___ | ||
### styleUrl | ||
• **styleUrl**: `string` | ||
URL of the Mapbox GL style. Required for styles that were provided | ||
as object, when they contain a relative sprite url, or sources referencing data by relative url. | ||
___ | ||
### transformRequest | ||
• **transformRequest**: (`arg0`: `string`, `arg1`: [`ResourceType`](#resourcetype)) => `void` \| `Request` | ||
#### Type declaration | ||
▸ (`arg0`, `arg1`): `void` \| `Request` | ||
Function for controlling how `ol-mapbox-style` fetches resources. Can be used for modifying | ||
the url, adding headers or setting credentials options. Called with the url and the resource | ||
type as arguments, this function is supposed to return a `Request` object. Without a return value, | ||
the original request will not be modified. For `Tiles` and `GeoJSON` resources, only the `url` of | ||
the returned request will be respected. | ||
##### Parameters | ||
| Name | Type | | ||
| :------ | :------ | | ||
| `arg0` | `string` | | ||
| `arg1` | [`ResourceType`](#resourcetype) | | ||
##### Returns | ||
`void` \| `Request` | ||
<a name="modulestypesmd"></a> | ||
# Namespace: types | ||
## Table of contents | ||
### Interfaces | ||
- [FeatureIdentifier](#interfacestypesfeatureidentifiermd) | ||
- [Options](#interfacestypesoptionsmd) | ||
### Type Aliases | ||
- [ResourceType](#resourcetype) | ||
## Type Aliases | ||
### ResourceType | ||
Ƭ **ResourceType**<\>: ``"Style"`` \| ``"Source"`` \| ``"Sprite"`` \| ``"SpriteImage"`` \| ``"Tiles"`` \| ``"GeoJSON"`` | ||
<!--apidoc end--> |
@@ -833,2 +833,15 @@ /* | ||
); | ||
let displacement; | ||
if ('icon-offset' in layout) { | ||
displacement = getValue( | ||
layer, | ||
'layout', | ||
'icon-offset', | ||
zoom, | ||
f, | ||
functionCache, | ||
featureState | ||
); | ||
displacement[1] *= -1; | ||
} | ||
iconImg = new Icon({ | ||
@@ -849,14 +862,3 @@ color: iconColor | ||
scale: iconSize / spriteImageData.pixelRatio, | ||
displacement: | ||
'icon-offset' in layout | ||
? getValue( | ||
layer, | ||
'layout', | ||
'icon-offset', | ||
zoom, | ||
f, | ||
functionCache, | ||
featureState | ||
).map((v) => -v * spriteImageData.pixelRatio) | ||
: undefined, | ||
displacement: displacement, | ||
declutterMode: declutterMode, | ||
@@ -1313,2 +1315,12 @@ }); | ||
text.setTextBaseline(textBaseline); | ||
const textJustify = getValue( | ||
layer, | ||
'layout', | ||
'text-justify', | ||
zoom, | ||
f, | ||
functionCache, | ||
featureState | ||
); | ||
text.setJustify(textJustify === 'auto' ? undefined : textJustify); | ||
text.setOffsetX( | ||
@@ -1315,0 +1327,0 @@ textOffset[0] * textSize + hOffset + textTranslate[0] |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
101
18791
6
6037641
92