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

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ol-mapbox-style - npm Package Compare versions

Comparing version 10.3.4 to 10.4.0

dist/examples/mapbox-with-terrarium.css

41

CHANGELOG.md

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

## 10.4.0
### Changes that require attention
#### Font handling and loading
ol-mapbox-style no longer defaults to loading Google fonts when a required font is not available. Instead, it respects the new `metadata.ol:webfonts` field in the Mapbox Style document. Example:
```js
{
"version": 8,
"metadata": {
"ol:webfonts": "https://mytileservergl.com/fonts/{font-family}/{fontweight}{-fontstyle}.css"
}
// ...
}
```
The supported template placeholders are
* {font-family}: CSS font family converted to lowercase, blanks replaced with `-`, e.g. `noto-sans`
* {Font+Family}: CSS font family in original case, blanks replaced with `+`, e.g. `Noto+Sans`
* {fontweight}: CSS font weight (numeric), e.g. `400`, `700`
* {fontstyle}: CSS font style, e.g. `normal`, `italic`
* {-fontstyle}: CSS font style other than normal, e.g. `-italic` or empty string for normal
In addition to providing fonts along with the style, this can be used to retrieve fonts from a CDN (e.g. `@fontsource`) or Google fonts. If this metadata field is not set to the style, the following default template will be used:
https://cdn.jsdelivr.net/npm/@fontsource/{font-family}/{fontweight}{-fontstyle}.css
To retain the current behavior (i.e. use Google Fonts), the template URL will have to be
https://fonts.googleapis.com/css?family={Font+Family}:{fontweight}{fontstyle}
### Other changes
* Fix a potential tile cache issue
* Fix problem caused by `getUid` function missing in the full build
* Make `updateMapboxStyle()` work with objects that are not a reference to the original one
* Add support for the `tms` tile scheme for `raster` and `vector` layers
* Add support for the `terrarium` encoding for `raster-dem` sources
* Fix an issue where the `icon-offset` layout property modifies the underlying Mapbox Style object
* Set the correct input projection for `geojson` sources when the `projection` option is used
## 10.3.4

@@ -7,0 +48,0 @@

10

dist/apply.d.ts

@@ -188,6 +188,6 @@ /**

export type ResourceType = 'Style' | 'Source' | 'Sprite' | 'SpriteImage' | 'Tiles' | 'GeoJSON';
import VectorTileLayer from "ol/layer/VectorTile.js";
import VectorLayer from "ol/layer/Vector.js";
import Map from "ol/Map.js";
import LayerGroup from "ol/layer/Group.js";
import VectorTileLayer from 'ol/layer/VectorTile.js';
import VectorLayer from 'ol/layer/Vector.js';
import Map from 'ol/Map.js';
import LayerGroup from 'ol/layer/Group.js';
/**

@@ -212,2 +212,2 @@ * If layerIds is not empty, applies the style specified in glStyle to the layer,

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";
import Layer from 'ol/layer/Layer.js';

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

"use strict";(self.webpackChunkol_mapbox_style=self.webpackChunkol_mapbox_style||[]).push([[670],{2628:(e,o,t)=>{t(9789);var s=t(707),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"),fetch("https://api.maptiler.com/maps/outdoor-v2/style.json?key="+c).then((function(e){return e.json()})).then((function(e){(0,s.ZP)("map",Object.assign({},e,{center:[13.783578,47.609499],zoom:11}))}))}},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(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)}]);
//# sourceMappingURL=maptiler-hillshading.js.map

@@ -84,4 +84,5 @@ /**

* `sprite` property is specified in the Mapbox Style object.
* @param {function(Array<string>):Array<string>} getFonts Function that
* receives a font stack as arguments, and returns a (modified) font stack that
* @param {function(Array<string>, string=):Array<string>} getFonts Function that
* receives a font stack and the url template from the GL style's `metadata['ol:webfonts']`
* property (if set) as arguments, and returns a (modified) font stack that
* is available. Font names are the names used in the Mapbox Style object. If

@@ -97,3 +98,3 @@ * not provided, the font stack will be used as-is. This function can also be

*/
export function stylefunction(olLayer: import("ol/layer/Vector").default<any> | VectorTileLayer, glStyle: string | any, sourceOrLayers: string | Array<string>, resolutions?: Array<number>, spriteData?: any, spriteImageUrl?: string, getFonts?: (arg0: Array<string>) => Array<string>, getImage?: ((arg0: import("ol/layer/Vector").default<any> | VectorTileLayer, arg1: string) => HTMLImageElement | HTMLCanvasElement | string | undefined) | undefined, ...args: any[]): StyleFunction;
export function stylefunction(olLayer: import("ol/layer/Vector").default<any> | VectorTileLayer, glStyle: string | any, sourceOrLayers: string | Array<string>, resolutions?: Array<number>, spriteData?: any, spriteImageUrl?: string, getFonts?: (arg0: Array<string>, arg1: string | undefined) => Array<string>, getImage?: ((arg0: import("ol/layer/Vector").default<any> | VectorTileLayer, arg1: string) => HTMLImageElement | HTMLCanvasElement | string | undefined) | undefined, ...args: any[]): StyleFunction;
export const styleFunctionArgs: {};

@@ -100,0 +101,0 @@ export type VectorLayer = import("ol/layer/Vector").default<any>;

@@ -5,5 +5,6 @@ export function applyLetterSpacing(text: any, letterSpacing: any): any;

* @param {Array} fonts Fonts.
* @param {string} [templateUrl] Template URL.
* @return {Array} Processed fonts.
* @private
*/
export function getFonts(fonts: any[]): any[];
export function getFonts(fonts: any[], templateUrl?: string | undefined): any[];
{
"name": "ol-mapbox-style",
"version": "10.3.4",
"version": "10.4.0",
"description": "Create OpenLayers maps from Mapbox Style objects",

@@ -89,3 +89,3 @@ "type": "module",

"typedoc-plugin-missing-exports": "^1.0.0",
"typescript": "^4.6.0-beta",
"typescript": "^5.0.3",
"webpack": "^5.62.1",

@@ -92,0 +92,0 @@ "webpack-cli": "^5.0.0",

@@ -73,4 +73,26 @@ # ol-mapbox-style

Only commonly available system fonts and [Google Fonts](https://developers.google.com/fonts/) will automatically be available for any `text-font` defined in the Mapbox Style object. It is the responsibility of the application to load other fonts. Because `ol-mapbox-style` uses system and web fonts instead of PBF/SDF glyphs, the [font stack](https://www.mapbox.com/help/manage-fontstacks/) is treated a little different: 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.
`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.
```js
{
"version": 8,
"metadata": {
"ol-webfonts": "https://my.server/fonts/{font-family}/{fontweight}{-fontstyle}.css"
}
// ...
}
```
The following placeholders can be used in the `ol-webfonts` url:
- `{font-family}`: CSS font family converted to lowercase, blanks replaced with -, e.g. noto-sans
- `{Font+Family}`: CSS font family in original case, blanks replaced with +, e.g. Noto+Sans
- `{fontweight}`: CSS font weight (numeric), e.g. 400, 700
- `{fontstyle}`: CSS font style, e.g. normal, italic
- `{-fontstyle}`: CSS font style other than normal, e.g. -italic or empty string for normal
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.
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.
## Building the library

@@ -530,13 +552,13 @@

| Name | Type | Default value | Description |
| :--------------- | :-------------------------------------------------------------------------------------------------------------------------------- | :------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `olLayer` | `VectorLayer`&lt;`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. |
| `getImage?` | (`arg0`: `VectorLayer`&lt;`any`> \| `VectorTileLayer`, `arg1`: `string`) => `string` \| `HTMLCanvasElement` \| `HTMLImageElement` | `undefined` | Function that returns an image or a URL for an image name. If the result is an HTMLImageElement, it must already be loaded. The layer can be used to call layer.changed() when the loading and processing of the image has finished. This function can be used for icons not in the sprite or to override sprite icons. |
| `...args` | `any`\[] | `undefined` | - |
| Name | Type | Default value | Description |
| :--------------- | :-------------------------------------------------------------------------------------------------------------------------------- | :------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `olLayer` | `VectorLayer`&lt;`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`\[], `arg1`: `string`) => `string`\[] | `undefined` | Function that receives a font stack and the url template from the GL style's `metadata['ol:webfonts']` property (if set) 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. |
| `getImage?` | (`arg0`: `VectorLayer`&lt;`any`> \| `VectorTileLayer`, `arg1`: `string`) => `string` \| `HTMLCanvasElement` \| `HTMLImageElement` | `undefined` | Function that returns an image or a URL for an image name. If the result is an HTMLImageElement, it must already be loaded. The layer can be used to call layer.changed() when the loading and processing of the image has finished. This function can be used for icons not in the sprite or to override sprite icons. |
| `...args` | `any` | `undefined` | - |

@@ -543,0 +565,0 @@ ##### Returns

@@ -270,2 +270,9 @@ /*

targetSource.setTileUrlFunction(source.getTileUrlFunction());
if (
typeof targetSource.setUrls === 'function' &&
typeof source.getUrls === 'function'
) {
// to get correct keys for tile cache and queue
targetSource.setUrls(source.getUrls());
}
//@ts-ignore

@@ -615,8 +622,2 @@ if (!targetSource.format_) {

sourceOptions.format = new MVT();
if (Array.isArray(tileJSON.tiles)) {
sourceOptions.urls = tileJSON.tiles;
} else {
sourceOptions.url = tileJSON.tiles;
}
resolve(new VectorTileSource(sourceOptions));

@@ -708,3 +709,2 @@ })

const geoJsonFormat = new GeoJSON();
/**

@@ -717,2 +717,5 @@ * @param {Object} glSource glStyle source.

function setupGeoJSONSource(glSource, styleUrl, options) {
const geoJsonFormat = options.projection
? new GeoJSON({dataProjection: options.projection})
: new GeoJSON();
const data = glSource.data;

@@ -942,2 +945,3 @@ const sourceOptions = {};

);
data.encoding = glSource.encoding;
data.vert =

@@ -944,0 +948,0 @@ 5 *

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

const accentColor = data.accentColor;
const encoding = data.encoding;

@@ -52,3 +53,3 @@ let pixelX,

function calculateElevation(pixel) {
function calculateElevation(pixel, encoding = 'mapbox') {
// The method used to extract elevations from the DEM.

@@ -63,3 +64,8 @@ // In this case the format used is

//
return (pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1 - 10000;
if (encoding === 'mapbox') {
return (pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1 - 10000;
}
if (encoding === 'terrarium') {
return pixel[0] * 256 + pixel[1] + pixel[2] / 256 - 32768;
}
}

@@ -79,3 +85,3 @@ for (pixelY = 0; pixelY <= maxY; ++pixelY) {

pixel[3] = elevationData[offset + 3];
z0 = data.vert * calculateElevation(pixel);
z0 = data.vert * calculateElevation(pixel, encoding);

@@ -88,3 +94,3 @@ // determine elevation for (x1, pixelY)

pixel[3] = elevationData[offset + 3];
z1 = data.vert * calculateElevation(pixel);
z1 = data.vert * calculateElevation(pixel, encoding);

@@ -99,3 +105,3 @@ dzdx = (z1 - z0) / dp;

pixel[3] = elevationData[offset + 3];
z0 = data.vert * calculateElevation(pixel);
z0 = data.vert * calculateElevation(pixel, encoding);

@@ -108,3 +114,3 @@ // determine elevation for (pixelX, y1)

pixel[3] = elevationData[offset + 3];
z1 = data.vert * calculateElevation(pixel);
z1 = data.vert * calculateElevation(pixel, encoding);

@@ -111,0 +117,0 @@ dzdy = (z1 - z0) / dp;

@@ -323,4 +323,5 @@ /*

* `sprite` property is specified in the Mapbox Style object.
* @param {function(Array<string>):Array<string>} getFonts Function that
* receives a font stack as arguments, and returns a (modified) font stack that
* @param {function(Array<string>, string=):Array<string>} getFonts Function that
* receives a font stack and the url template from the GL style's `metadata['ol:webfonts']`
* property (if set) as arguments, and returns a (modified) font stack that
* is available. Font names are the names used in the Mapbox Style object. If

@@ -882,3 +883,3 @@ * not provided, the font stack will be used as-is. This function can also be

featureState
);
).slice(0);
displacement[1] *= -1;

@@ -1150,3 +1151,8 @@ }

font = mb2css(
getFonts ? getFonts(fontArray) : fontArray,
getFonts
? getFonts(
fontArray,
glStyle.metadata ? glStyle.metadata['ol:webfonts'] : undefined
)
: fontArray,
textSize,

@@ -1153,0 +1159,0 @@ textLineHeight

@@ -154,6 +154,10 @@ import mb2css from 'mapbox-to-css-font';

* @param {Array} fonts Fonts.
* @param {string} [templateUrl] Template URL.
* @return {Array} Processed fonts.
* @private
*/
export function getFonts(fonts) {
export function getFonts(
fonts,
templateUrl = 'https://cdn.jsdelivr.net/npm/@fontsource/{font-family}/{fontweight}{-fontstyle}.css'
) {
const fontsKey = fonts.toString();

@@ -163,3 +167,3 @@ if (fontsKey in processedFontFamilies) {

}
const googleFontDescriptions = [];
const fontDescriptions = [];
for (let i = 0, ii = fonts.length; i < ii; ++i) {

@@ -171,3 +175,3 @@ fonts[i] = fonts[i].replace('Arial Unicode MS', 'Arial');

const parts = cssFont.split(' ');
googleFontDescriptions.push([
fontDescriptions.push([
parts.slice(3).join(' ').replace(/"/g, ''),

@@ -178,17 +182,20 @@ parts[1],

}
for (let i = 0, ii = googleFontDescriptions.length; i < ii; ++i) {
const googleFontDescription = googleFontDescriptions[i];
const family = googleFontDescription[0];
for (let i = 0, ii = fontDescriptions.length; i < ii; ++i) {
const fontDescription = fontDescriptions[i];
const family = fontDescription[0];
if (!hasFontFamily(family)) {
if (
checkedFonts.get(
`${googleFontDescription[2]}\n${googleFontDescription[1]} \n${family}`
`${fontDescription[2]}\n${fontDescription[1]} \n${family}`
) !== 100
) {
const fontUrl =
'https://fonts.googleapis.com/css?family=' +
family.replace(/ /g, '+') +
':' +
googleFontDescription[1] +
googleFontDescription[2];
const fontUrl = templateUrl
.replace('{font-family}', family.replace(/ /g, '-').toLowerCase())
.replace('{Font+Family}', family.replace(/ /g, '+'))
.replace('{fontweight}', fontDescription[1])
.replace(
'{-fontstyle}',
fontDescription[2].replace('normal', '').replace(/(.+)/, '-$1')
)
.replace('{fontstyle}', fontDescription[2]);
if (!document.querySelector('link[href="' + fontUrl + '"]')) {

@@ -195,0 +202,0 @@ const markup = document.createElement('link');

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

import {expandUrl} from 'ol/tileurlfunction.js';
import {getUid} from 'ol';
import {getUid} from 'ol/util.js';
import {normalizeSourceUrl, normalizeStyleUrl} from './mapbox.js';

@@ -214,2 +214,5 @@

tileJson.tiles = tileJson.tiles.map(function (tileUrl) {
if (tileJson.scheme === 'tms') {
tileUrl = tileUrl.replace('{y}', '{-y}');
}
return getTransformedTilesUrl(

@@ -231,2 +234,5 @@ normalizeSourceUrl(

tiles: glSource.tiles.map(function (tileUrl) {
if (glSource.scheme === 'tms') {
tileUrl = tileUrl.replace('{y}', '{-y}');
}
return getTransformedTilesUrl(

@@ -517,2 +523,3 @@ normalizeSourceUrl(

delete getFilterCache(glStyle)[mapboxLayer.id];
mapboxLayers[index] = mapboxLayer;
applyStylefunction.apply(

@@ -519,0 +526,0 @@ undefined,

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 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

SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc