Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Socket
Sign inDemoInstall

ol-mapbox-style

Package Overview
Dependencies
Maintainers
4
Versions
170
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ol-mapbox-style - npm Package Compare versions

Comparing version 10.5.0 to 10.6.0

5

CHANGELOG.md

@@ -5,2 +5,7 @@ # Changelog

## 10.6.0
* `addMapboxLayer()` can now also add a layer as first layer in the layer stack.
* `addMapboxLayer()` is no longer restricted go layers with the same source.
## 10.5.0

@@ -7,0 +12,0 @@

45

dist/apply.d.ts

@@ -76,2 +76,3 @@ /**

export function setupVectorSource(glSource: any, styleUrl: string | undefined, options: Options): Promise<import("ol/source/VectorTile").default>;
export function setupLayer(glStyle: any, styleUrl: any, glLayer: any, options: any): Layer<Source, import("ol/renderer/Layer.js").default<any>> | VectorTileLayer | TileLayer<import("ol/source/Tile.js").default> | ImageLayer<Raster> | undefined;
/**

@@ -127,3 +128,20 @@ * Loads and applies a Mapbox Style object into an OpenLayers Map or LayerGroup.

export function apply(mapOrGroupOrElement: Map | HTMLElement | string | LayerGroup, style: string | any, options?: Options): Promise<Map | LayerGroup>;
export { finalizeLayer as _finalizeLayer };
/**
* If layerIds is not empty, applies the style specified in glStyle to the layer,
* and adds the layer to the map.
*
* The layer may not yet have a source when the function is called. If so, the style
* is applied to the layer via a once listener on the 'change:source' event.
*
* @param {Layer} layer An OpenLayers layer instance.
* @param {Array<string>} layerIds Array containing layer ids of already-processed layers.
* @param {Object} glStyle Style as a JSON object.
* @param {string|undefined} styleUrl The original style URL. Only required
* when a relative path is used with the `"sprite"` property of the style.
* @param {Map|LayerGroup} mapOrGroup OpenLayers Map.
* @param {Options} options Options.
* @return {Promise} Returns a promise that resolves after the source has
* been set on the specified layer, and the style has been applied.
*/
export function finalizeLayer(layer: Layer, layerIds: Array<string>, glStyle: any, styleUrl: string | undefined, mapOrGroup: Map | LayerGroup, options?: Options): Promise<any>;
export type Options = {

@@ -193,22 +211,7 @@ /**

import Map from 'ol/Map.js';
import Source from 'ol/source/Source.js';
import Layer from 'ol/layer/Layer.js';
import TileLayer from 'ol/layer/Tile.js';
import Raster from 'ol/source/Raster.js';
import ImageLayer from 'ol/layer/Image.js';
import LayerGroup from 'ol/layer/Group.js';
/**
* If layerIds is not empty, applies the style specified in glStyle to the layer,
* and adds the layer to the map.
*
* The layer may not yet have a source when the function is called. If so, the style
* is applied to the layer via a once listener on the 'change:source' event.
*
* @param {Layer} layer An OpenLayers layer instance.
* @param {Array<string>} layerIds Array containing layer ids of already-processed layers.
* @param {Object} glStyle Style as a JSON object.
* @param {string|undefined} styleUrl The original style URL. Only required
* when a relative path is used with the `"sprite"` property of the style.
* @param {Map|LayerGroup} mapOrGroup OpenLayers Map.
* @param {Options} options Options.
* @return {Promise} Returns a promise that resolves after the source has
* been set on the specified layer, and the style has been applied.
* @private
*/
declare function finalizeLayer(layer: Layer, layerIds: Array<string>, glStyle: any, styleUrl: string | undefined, mapOrGroup: Map | LayerGroup, options?: Options): Promise<any>;
import Layer from 'ol/layer/Layer.js';

2

dist/examples/apply-layergroup.js

@@ -1,2 +0,2 @@

"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[835],{5385:(e,s,a)=>{a(9789);var n=a(4311),o=a(195),t=a(5495),l=a(707),w=new n.Z;(0,l.nn)(w,"data/geojson-wms.json"),new o.Z({target:"map",view:new t.ZP({center:[-10203186.115192635,4475744.563386],zoom:4}),layers:[w]})}},e=>{e(e.s=5385)}]);
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[835],{5385:(e,s,a)=>{a(9789);var n=a(4311),o=a(195),t=a(5495),l=a(3216),w=new n.Z;(0,l.nn)(w,"data/geojson-wms.json"),new o.Z({target:"map",view:new t.ZP({center:[-10203186.115192635,4475744.563386],zoom:4}),layers:[w]})}},e=>{e(e.s=5385)}]);
//# sourceMappingURL=apply-layergroup.js.map

2

dist/examples/esri-4326.js

@@ -1,2 +0,2 @@

"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[408],{3513:(s,e,r)=>{r(9789),(0,r(707).nn)("map","https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_GCS_v2/VectorTileServer/resources/styles/",{projection:"EPSG:4326"})}},s=>{s(s.s=3513)}]);
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[408],{3513:(s,e,r)=>{r(9789),(0,r(3216).nn)("map","https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_GCS_v2/VectorTileServer/resources/styles/",{projection:"EPSG:4326"})}},s=>{s(s.s=3513)}]);
//# sourceMappingURL=esri-4326.js.map

2

dist/examples/esri-transformrequest.js

@@ -1,2 +0,2 @@

"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[945],{3479:(e,s,r)=>{r(9789),(0,r(707).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=3479)}]);
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[945],{3479:(e,s,r)=>{r(9789),(0,r(3216).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=3479)}]);
//# sourceMappingURL=esri-transformrequest.js.map

2

dist/examples/geojson-featurestate.js

@@ -1,2 +0,2 @@

"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[874],{1438:(e,t,l)=>{l(9789);var s=l(707),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=1438)}]);
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[874],{1438:(e,t,l)=>{l(9789);var s=l(3216),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=1438)}]);
//# sourceMappingURL=geojson-featurestate.js.map

2

dist/examples/geojson-inline.js

@@ -1,2 +0,2 @@

"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[223],{1465:(s,e,n)=>{n(9789),(0,n(707).nn)("map","data/geojson-inline.json")}},s=>{s(s.s=1465)}]);
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[223],{1465:(s,e,n)=>{n(9789),(0,n(3216).nn)("map","data/geojson-inline.json")}},s=>{s(s.s=1465)}]);
//# sourceMappingURL=geojson-inline.js.map

2

dist/examples/geojson-layer.js

@@ -1,2 +0,2 @@

"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[145],{8263:(e,s,a)=>{a(9789);var o=a(6703),n=a(195),t=a(5495),l=a(707),p=a(8838),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=8263)}]);
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[145],{8263:(e,s,a)=>{a(9789);var o=a(6703),n=a(195),t=a(5495),l=a(3216),p=a(8838),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=8263)}]);
//# sourceMappingURL=geojson-layer.js.map

2

dist/examples/geojson-wfs.js

@@ -1,2 +0,2 @@

"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[711],{7907:(s,e,a)=>{a(9789),(0,a(707).nn)("map","data/geojson-wfs.json")}},s=>{s(s.s=7907)}]);
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[711],{7907:(s,e,a)=>{a(9789),(0,a(3216).nn)("map","data/geojson-wfs.json")}},s=>{s(s.s=7907)}]);
//# sourceMappingURL=geojson-wfs.js.map

2

dist/examples/geojson.js

@@ -1,2 +0,2 @@

"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[346],{4029:(s,e,a)=>{a(9789),(0,a(707).nn)("map","data/geojson.json")}},s=>{s(s.s=4029)}]);
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[346],{4029:(s,e,a)=>{a(9789),(0,a(3216).nn)("map","data/geojson.json")}},s=>{s(s.s=4029)}]);
//# sourceMappingURL=geojson.js.map

2

dist/examples/mapbox.js

@@ -1,2 +0,2 @@

"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[862],{9742:(e,o,s)=>{s(9789);var c=s(707),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=9742)}]);
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[862],{9742:(e,o,s)=>{s(9789);var c=s(3216),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=9742)}]);
//# sourceMappingURL=mapbox.js.map

2

dist/examples/maptiler-hillshading.js

@@ -1,2 +0,2 @@

"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[670],{2628:(e,t,o)=>{o(9789);var s=o(707),a=document.cookie.replace(/(?:(?:^|.*;\s*)maptiler_access_token\s*\=\s*([^;]*).*$)|^.*$/,"$1");a||(a=window.prompt("Enter your MapTiler API access token:"),document.cookie="maptiler_access_token="+a+"; expires=Fri, 31 Dec 9999 23:59:59 GMT"),fetch("https://api.maptiler.com/maps/outdoor-v2/style.json?key="+a).then((function(e){return e.json()})).then((function(e){(0,s.ZP)("map",Object.assign({},e,{center:[13.783578,47.609499],zoom:11,metadata:Object.assign(e.metadata,{"ol:webfonts":"https://fonts.googleapis.com/css?family={Font+Family}:{fontweight}{fontstyle}"})}))}))}},e=>{e(e.s=2628)}]);
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[670],{2628:(e,t,o)=>{o(9789);var s=o(3216),a=document.cookie.replace(/(?:(?:^|.*;\s*)maptiler_access_token\s*\=\s*([^;]*).*$)|^.*$/,"$1");a||(a=window.prompt("Enter your MapTiler API access token:"),document.cookie="maptiler_access_token="+a+"; expires=Fri, 31 Dec 9999 23:59:59 GMT"),fetch("https://api.maptiler.com/maps/outdoor-v2/style.json?key="+a).then((function(e){return e.json()})).then((function(e){(0,s.ZP)("map",Object.assign({},e,{center:[13.783578,47.609499],zoom:11,metadata:Object.assign(e.metadata,{"ol:webfonts":"https://fonts.googleapis.com/css?family={Font+Family}:{fontweight}{fontstyle}"})}))}))}},e=>{e(e.s=2628)}]);
//# sourceMappingURL=maptiler-hillshading.js.map

2

dist/examples/openmaptiles-layer.js

@@ -1,2 +0,2 @@

"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[507],{7279:(e,s,t)=>{t(9789);var o=t(7622),c=t(195),a=t(5495),n=t(707),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=7279)}]);
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[507],{7279:(e,s,t)=>{t(9789);var a=t(7622),o=t(195),c=t(5495),p=t(3216),r=document.cookie.replace(/(?:(?:^|.*;\s*)maptiler_access_token\s*\=\s*([^;]*).*$)|^.*$/,"$1");r||(r=window.prompt("Enter your MapTiler API access token:"),document.cookie="maptiler_access_token="+r+"; expires=Fri, 31 Dec 9999 23:59:59 GMT");var l="https://api.maptiler.com/maps/basic/style.json?key="+r,n=new a.Z({declutter:!0});(0,p.bg)(n,l),(0,p.h0)(n,l),new o.Z({target:"map",layers:[n],view:new c.ZP({center:[0,0],zoom:2})})}},e=>{e(e.s=7279)}]);
//# sourceMappingURL=openmaptiles-layer.js.map

2

dist/examples/openmaptiles.js

@@ -1,2 +0,2 @@

"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[347],{4944:(e,s,o)=>{o(9789);var t=o(707),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=4944)}]);
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[347],{4944:(e,s,o)=>{o(9789);var a=o(3216),c=document.cookie.replace(/(?:(?:^|.*;\s*)maptiler_access_token\s*\=\s*([^;]*).*$)|^.*$/,"$1");c||(c=window.prompt("Enter your MapTiler API access token:"),document.cookie="maptiler_access_token="+c+"; expires=Fri, 31 Dec 9999 23:59:59 GMT"),(0,a.ZP)("map","https://api.maptiler.com/maps/basic/style.json?key="+c)}},e=>{e(e.s=4944)}]);
//# sourceMappingURL=openmaptiles.js.map

2

dist/examples/stylefunction.js

@@ -1,2 +0,2 @@

"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[890],{6506:(e,t,a)=>{a(9789);var n=a(8897),s=a(195),o=a(6703),r=a(3296),u=a(5495),c=a(707),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=6506)}]);
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[890],{6506:(e,t,a)=>{a(9789);var n=a(8897),s=a(195),o=a(6703),r=a(3296),u=a(5495),c=a(3216),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=6506)}]);
//# sourceMappingURL=stylefunction.js.map

2

dist/examples/terrarium-hillshading.js

@@ -1,2 +0,2 @@

"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[452],{7797:(e,t,r)=>{r(9789),(0,r(707).ZP)("map",{version:8,name:"Terrarium",center:[13.783578,47.609499],zoom:11,sources:{osm:{type:"raster",attribution:'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.',tileSize:256,tiles:["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],maxzoom:19},terrarium:{type:"raster-dem",attribution:'<a href="https://github.com/tilezen/joerd/blob/master/docs/attribution.md" target="_blank">Data sources and attribution</a>',tileSize:256,tiles:["https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png"],maxzoom:15,encoding:"terrarium"}},layers:[{id:"osm",type:"raster",source:"osm"},{id:"hillshade",type:"hillshade",source:"terrarium",paint:{"hillshade-accent-color":"#D8E8CF","hillshade-exaggeration":{stops:[[6,.4],[14,.35],[18,.25]]},"hillshade-shadow-color":"#6C6665","hillshade-highlight-color":"#B8AAA3"}}]})}},e=>{e(e.s=7797)}]);
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[452],{7797:(e,t,r)=>{r(9789),(0,r(3216).ZP)("map",{version:8,name:"Terrarium",center:[13.783578,47.609499],zoom:11,sources:{osm:{type:"raster",attribution:'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.',tileSize:256,tiles:["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],maxzoom:19},terrarium:{type:"raster-dem",attribution:'<a href="https://github.com/tilezen/joerd/blob/master/docs/attribution.md" target="_blank">Data sources and attribution</a>',tileSize:256,tiles:["https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png"],maxzoom:15,encoding:"terrarium"}},layers:[{id:"osm",type:"raster",source:"osm"},{id:"hillshade",type:"hillshade",source:"terrarium",paint:{"hillshade-accent-color":"#D8E8CF","hillshade-exaggeration":{stops:[[6,.4],[14,.35],[18,.25]]},"hillshade-shadow-color":"#6C6665","hillshade-highlight-color":"#B8AAA3"}}]})}},e=>{e(e.s=7797)}]);
//# sourceMappingURL=terrarium-hillshading.js.map

2

dist/examples/tilejson-vectortile.js

@@ -1,2 +0,2 @@

"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[366],{140:(s,e,o)=>{o(9789),(0,o(707).nn)("map"," https://demo.tegola.io/styles/hot-osm.json")}},s=>{s(s.s=140)}]);
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[366],{140:(s,e,o)=>{o(9789),(0,o(3216).nn)("map"," https://demo.tegola.io/styles/hot-osm.json")}},s=>{s(s.s=140)}]);
//# sourceMappingURL=tilejson-vectortile.js.map

2

dist/examples/tilejson.js

@@ -1,2 +0,2 @@

"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[177],{2122:(s,e,a)=>{a(9789),(0,a(707).nn)("map","data/tilejson.json")}},s=>{s(s.s=2122)}]);
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[177],{2122:(s,e,a)=>{a(9789),(0,a(3216).nn)("map","data/tilejson.json")}},s=>{s(s.s=2122)}]);
//# sourceMappingURL=tilejson.js.map

2

dist/examples/wms.js

@@ -1,2 +0,2 @@

"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[840],{367:(s,a,e)=>{e(9789),(0,e(707).ZP)("map","data/wms.json")}},s=>{s(s.s=367)}]);
"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[840],{367:(s,a,e)=>{e(9789),(0,e(3216).ZP)("map","data/wms.json")}},s=>{s(s.s=367)}]);
//# sourceMappingURL=wms.js.map

3

dist/util.d.ts

@@ -119,4 +119,5 @@ export function getStyleId(glStyle: any): any;

* @param {string} [beforeLayerId] Optional id of the Mapbox Layer before the new layer that will be added.
* @return {Promise<void>} Resolves when the added layer is available.
*/
export function addMapboxLayer(mapOrGroup: Map | LayerGroup, mapboxLayer: any, beforeLayerId?: string | undefined): void;
export function addMapboxLayer(mapOrGroup: Map | LayerGroup, mapboxLayer: any, beforeLayerId?: string | undefined): Promise<void>;
/**

@@ -123,0 +124,0 @@ * Update a Mapbox Layer object in the style. The map will be re-rendered with the new style.

14

package.json
{
"name": "ol-mapbox-style",
"version": "10.5.0",
"version": "10.6.0",
"description": "Create OpenLayers maps from Mapbox Style objects",

@@ -42,3 +42,4 @@ "type": "module",

"@mapbox/mapbox-gl-style-spec": "^13.23.1",
"mapbox-to-css-font": "^2.4.1"
"mapbox-to-css-font": "^2.4.1",
"ol": "^7.3.0"
},

@@ -78,4 +79,3 @@ "devDependencies": {

"nanoassert": "^2.0.0",
"ol": "^7.2.3-dev.1672696068643",
"puppeteer": "^19.2.2",
"puppeteer": "^20.2.0",
"remove-flow-types-loader": "^1.1.0",

@@ -88,5 +88,5 @@ "rollup": "^2.70.2",

"style-loader": "^3.3.1",
"typedoc": "0.23.x",
"typedoc-plugin-markdown": "^3.13.4",
"typedoc-plugin-missing-exports": "^1.0.0",
"typedoc": "0.24.x",
"typedoc-plugin-markdown": "^3.15.2",
"typedoc-plugin-missing-exports": "^2.0.0",
"typescript": "^5.0.3",

@@ -93,0 +93,0 @@ "webpack": "^5.62.1",

14

README.md

@@ -73,3 +73,3 @@ # ol-mapbox-style

`ol-mapbox-style` cannot use PBF/SDF glyphs for `text-font` layout property, as defined in the Mapbox Style specification. Instead, it relies on web fonts. A `ol-webfonts` metadata property can be set on the root of the Style object to specify a location for webfonts, e.g.
`ol-mapbox-style` cannot use PBF/SDF glyphs for `text-font` layout property, as defined in the Mapbox Style specification. Instead, it relies on web fonts. A `ol:webfonts` metadata property can be set on the root of the Style object to specify a location for webfonts, e.g.

@@ -80,3 +80,3 @@ ```js

"metadata": {
"ol-webfonts": "https://my.server/fonts/{font-family}/{fontweight}{-fontstyle}.css"
"ol:webfonts": "https://my.server/fonts/{font-family}/{fontweight}{-fontstyle}.css"
}

@@ -87,3 +87,3 @@ // ...

The following placeholders can be used in the `ol-webfonts` url:
The following placeholders can be used in the `ol:webfonts` url:

@@ -96,3 +96,3 @@ - `{font-family}`: CSS font family converted to lowercase, blanks replaced with -, e.g. noto-sans

If no `metadata['ol-webfonts']` property is available on the Style object, [Fontsource Fonts](https://fontsource.org/fonts) will be used. It is also possible for the application to load other fonts. If a font is already available in the browser, `ol-mapbox-style` will not load it.
If no `metadata['ol:webfonts']` property is available on the Style object, [Fontsource Fonts](https://fontsource.org/fonts) will be used. It is also possible for the application to load other fonts. If a font is already available in the browser, `ol-mapbox-style` will not load it.

@@ -164,3 +164,3 @@ Because of this difference, the [font stack](https://www.mapbox.com/help/manage-fontstacks/) is treated a little different than defined in the spec: style and weight are taken from the primary font (i.e. the first one in the font stack). Subsequent fonts in the font stack are only used if the primary font is not available/loaded, and they will be used with the style and weight of the primary font.

▸ **addMapboxLayer**(`mapOrGroup`, `mapboxLayer`, `beforeLayerId?`): `void`
▸ **addMapboxLayer**(`mapOrGroup`, `mapboxLayer`, `beforeLayerId?`): `Promise`&lt;`void`>

@@ -179,4 +179,6 @@ Add a new Mapbox Layer object to the style. The map will be re-rendered.

`void`
`Promise`&lt;`void`>
Resolves when the added layer is available.
* * *

@@ -183,0 +185,0 @@

189

src/apply.js

@@ -829,2 +829,89 @@ /*

export function setupLayer(glStyle, styleUrl, glLayer, options) {
const functionCache = getFunctionCache(glStyle);
const glLayers = glStyle.layers;
const type = glLayer.type;
const id = glLayer.source || getSourceIdByRef(glLayers, glLayer.ref);
const glSource = glStyle.sources[id];
let layer;
if (type == 'background') {
layer = setupBackgroundLayer(glLayer, options, functionCache);
} else if (glSource.type == 'vector') {
layer = setupVectorLayer(glSource, styleUrl, options);
} else if (glSource.type == 'raster') {
layer = setupRasterLayer(glSource, styleUrl, options);
layer.setVisible(
glLayer.layout ? glLayer.layout.visibility !== 'none' : true
);
layer.on('prerender', prerenderRasterLayer(glLayer, layer, functionCache));
} else if (glSource.type == 'geojson') {
layer = setupGeoJSONLayer(glSource, styleUrl, options);
} else if (glSource.type == 'raster-dem' && glLayer.type == 'hillshade') {
const hillshadeLayer = setupHillshadeLayer(glSource, styleUrl, options);
layer = hillshadeLayer;
hillshadeLayer.getSource().on('beforeoperations', function (event) {
const data = event.data;
data.resolution = event.resolution;
const zoom = getZoomForResolution(
event.resolution,
options.resolutions || defaultResolutions
);
data.encoding = glSource.encoding;
data.vert =
5 *
getValue(
glLayer,
'paint',
'hillshade-exaggeration',
zoom,
emptyObj,
functionCache
);
data.sunAz = getValue(
glLayer,
'paint',
'hillshade-illumination-direction',
zoom,
emptyObj,
functionCache
);
data.sunEl = 35;
data.opacity = 0.3;
data.highlightColor = getValue(
glLayer,
'paint',
'hillshade-highlight-color',
zoom,
emptyObj,
functionCache
);
data.shadowColor = getValue(
glLayer,
'paint',
'hillshade-shadow-color',
zoom,
emptyObj,
functionCache
);
data.accentColor = getValue(
glLayer,
'paint',
'hillshade-accent-color',
zoom,
emptyObj,
functionCache
);
});
layer.setVisible(
glLayer.layout ? glLayer.layout.visibility !== 'none' : true
);
}
const glSourceId = id;
if (layer) {
layer.set('mapbox-source', glSourceId);
}
return layer;
}
/**

@@ -874,2 +961,4 @@ * @param {*} glStyle Mapbox Style.

}
mapOrGroup.set('mapbox-style', glStyle);
mapOrGroup.set('mapbox-metadata', {styleUrl, options});

@@ -879,3 +968,3 @@ const glLayers = glStyle.layers;

let layer, glSource, glSourceId, id;
let layer, glSourceId, id;
for (let i = 0, ii = glLayers.length; i < ii; ++i) {

@@ -905,93 +994,9 @@ const glLayer = glLayers[i];

const functionCache = getFunctionCache(glStyle);
glSource = glStyle.sources[id];
if (type == 'background') {
layer = setupBackgroundLayer(glLayer, options, functionCache);
} else if (glSource.type == 'vector') {
layer = setupVectorLayer(glSource, styleUrl, options);
} else if (glSource.type == 'raster') {
layerIds = [];
layer = setupRasterLayer(glSource, styleUrl, options);
layer.setVisible(
glLayer.layout ? glLayer.layout.visibility !== 'none' : true
);
layer.on(
'prerender',
prerenderRasterLayer(glLayer, layer, functionCache)
);
} else if (glSource.type == 'geojson') {
layer = setupGeoJSONLayer(glSource, styleUrl, options);
} else if (
glSource.type == 'raster-dem' &&
glLayer.type == 'hillshade'
layer = setupLayer(glStyle, styleUrl, glLayer, options);
if (
!(layer instanceof VectorLayer || layer instanceof VectorTileLayer)
) {
layerIds = [];
const hillshadeLayer = setupHillshadeLayer(
glSource,
styleUrl,
options
);
layer = hillshadeLayer;
hillshadeLayer.getSource().on('beforeoperations', function (event) {
const data = event.data;
data.resolution = event.resolution;
const zoom = getZoomForResolution(
event.resolution,
options.resolutions || defaultResolutions
);
data.encoding = glSource.encoding;
data.vert =
5 *
getValue(
glLayer,
'paint',
'hillshade-exaggeration',
zoom,
emptyObj,
functionCache
);
data.sunAz = getValue(
glLayer,
'paint',
'hillshade-illumination-direction',
zoom,
emptyObj,
functionCache
);
data.sunEl = 35;
data.opacity = 0.3;
data.highlightColor = getValue(
glLayer,
'paint',
'hillshade-highlight-color',
zoom,
emptyObj,
functionCache
);
data.shadowColor = getValue(
glLayer,
'paint',
'hillshade-shadow-color',
zoom,
emptyObj,
functionCache
);
data.accentColor = getValue(
glLayer,
'paint',
'hillshade-accent-color',
zoom,
emptyObj,
functionCache
);
});
layer.setVisible(
glLayer.layout ? glLayer.layout.visibility !== 'none' : true
);
}
glSourceId = id;
if (layer) {
layer.set('mapbox-source', glSourceId);
}
glSourceId = layer.get('mapbox-source');
}

@@ -1004,3 +1009,2 @@ layerIds.push(glLayer.id);

);
mapOrGroup.set('mapbox-style', glStyle);
return Promise.all(promises);

@@ -1128,5 +1132,4 @@ }

* been set on the specified layer, and the style has been applied.
* @private
*/
function finalizeLayer(
export function finalizeLayer(
layer,

@@ -1219,3 +1222,1 @@ layerIds,

}
export {finalizeLayer as _finalizeLayer};

67

src/util.js

@@ -6,2 +6,3 @@ import {

import {expandUrl} from 'ol/tileurlfunction.js';
import {finalizeLayer, setupLayer} from './apply.js';
import {getUid} from 'ol/util.js';

@@ -438,26 +439,58 @@ import {normalizeSourceUrl, normalizeStyleUrl} from './mapbox.js';

* @param {string} [beforeLayerId] Optional id of the Mapbox Layer before the new layer that will be added.
* @return {Promise<void>} Resolves when the added layer is available.
*/
export function addMapboxLayer(mapOrGroup, mapboxLayer, beforeLayerId) {
const mapboxLayers = mapOrGroup.get('mapbox-style').layers;
let index;
const glStyle = mapOrGroup.get('mapbox-style');
const mapboxLayers = glStyle.layers;
let spliceIndex;
let sourceIndex = -1;
if (beforeLayerId !== undefined) {
const beforeLayer = getMapboxLayer(mapOrGroup, beforeLayerId);
if (beforeLayer === undefined) {
const beforeMapboxLayer = getMapboxLayer(mapOrGroup, beforeLayerId);
if (beforeMapboxLayer === undefined) {
throw new Error(`Layer with id "${beforeLayerId}" not found.`);
}
index = mapboxLayers.indexOf(beforeLayer);
spliceIndex = mapboxLayers.indexOf(beforeMapboxLayer);
} else {
index = mapboxLayers.length;
spliceIndex = mapboxLayers.length;
}
if (index === 0) {
throw new Error('Cannot add layer before first layer.');
let sourceOffset;
if (
spliceIndex > 0 &&
mapboxLayers[spliceIndex - 1].source === mapboxLayer.source
) {
sourceIndex = spliceIndex - 1;
sourceOffset = -1;
} else if (
spliceIndex < mapboxLayers.length &&
mapboxLayers[spliceIndex].source === mapboxLayer.source
) {
sourceIndex = spliceIndex;
sourceOffset = 0;
}
if (mapboxLayers[index - 1].source !== mapboxLayer.source) {
throw new Error('Added layer and layer before must use the same source.');
if (sourceIndex === -1) {
const {options, styleUrl} = mapOrGroup.get('mapbox-metadata');
const layer = setupLayer(glStyle, styleUrl, mapboxLayer, options);
if (beforeLayerId) {
const beforeLayer = getLayer(mapOrGroup, beforeLayerId);
const beforeLayerIndex = mapOrGroup
.getLayers()
.getArray()
.indexOf(beforeLayer);
mapOrGroup.getLayers().insertAt(beforeLayerIndex, layer);
}
mapboxLayers.splice(spliceIndex, 0, mapboxLayer);
return finalizeLayer(
layer,
[mapboxLayer.id],
glStyle,
styleUrl,
mapOrGroup,
options
);
}
if (mapboxLayers.some((layer) => layer.id === mapboxLayer.id)) {
throw new Error(`Layer with id "${mapboxLayer.id}" already exists.`);
}
mapboxLayers.splice(index, 0, mapboxLayer);
const sourceLayerId = mapboxLayers[sourceIndex].id;
const args =

@@ -467,5 +500,6 @@ styleFunctionArgs[

mapOrGroup.get('mapbox-style'),
getLayer(mapOrGroup, mapboxLayers[index - 1].id)
getLayer(mapOrGroup, sourceLayerId)
)
];
mapboxLayers.splice(spliceIndex, 0, mapboxLayer);
if (args) {

@@ -483,5 +517,3 @@ const [

if (Array.isArray(sourceOrLayers)) {
const layerIndex = beforeLayerId
? sourceOrLayers.indexOf(beforeLayerId)
: sourceOrLayers.length;
const layerIndex = sourceOrLayers.indexOf(sourceLayerId) + sourceOffset;
sourceOrLayers.splice(layerIndex, 0, mapboxLayer.id);

@@ -500,4 +532,5 @@ }

} else {
getLayer(mapOrGroup, mapboxLayers[index - 1].id).changed();
getLayer(mapOrGroup, mapboxLayers[sourceIndex].id).changed();
}
return Promise.resolve();
}

@@ -504,0 +537,0 @@ 

dist/examples/apply-layergroup.js.map

Sorry, the diff of this file is not supported yet

dist/examples/common.js

Sorry, the diff of this file is too big to display

dist/examples/common.js.map

Sorry, the diff of this file is not supported yet

dist/examples/esri-4326.js.map

Sorry, the diff of this file is not supported yet

dist/examples/esri-transformrequest.js.map

Sorry, the diff of this file is not supported yet

dist/examples/geojson-featurestate.js.map

Sorry, the diff of this file is not supported yet

dist/examples/geojson-inline.js.map

Sorry, the diff of this file is not supported yet

dist/examples/geojson-layer.js.map

Sorry, the diff of this file is not supported yet

dist/examples/geojson-wfs.js.map

Sorry, the diff of this file is not supported yet

dist/examples/geojson.js.map

Sorry, the diff of this file is not supported yet

dist/examples/mapbox.js.map

Sorry, the diff of this file is not supported yet

dist/examples/maptiler-hillshading.js.map

Sorry, the diff of this file is not supported yet

dist/examples/openmaptiles-layer.js.map

Sorry, the diff of this file is not supported yet

dist/examples/openmaptiles.js.map

Sorry, the diff of this file is not supported yet

dist/examples/stylefunction.js.map

Sorry, the diff of this file is not supported yet

dist/examples/terrarium-hillshading.js.map

Sorry, the diff of this file is not supported yet

dist/examples/tilejson-vectortile.js.map

Sorry, the diff of this file is not supported yet

dist/examples/tilejson.js.map

Sorry, the diff of this file is not supported yet

dist/examples/wms.js.map

Sorry, the diff of this file is not supported yet

dist/index.js

Sorry, the diff of this file is too big to display

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/olms.js

Sorry, the diff of this file is too big to display

dist/olms.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc