{"id":13701271,"url":"https://github.com/openlayers/ol-mapbox-style","last_synced_at":"2025-05-13T21:12:08.600Z","repository":{"id":33968387,"uuid":"66547658","full_name":"openlayers/ol-mapbox-style","owner":"openlayers","description":"Use Mapbox Style objects with OpenLayers","archived":false,"fork":false,"pushed_at":"2025-04-28T13:07:14.000Z","size":54938,"stargazers_count":376,"open_issues_count":52,"forks_count":127,"subscribers_count":37,"default_branch":"main","last_synced_at":"2025-04-28T14:13:17.294Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://openlayers.org/ol-mapbox-style/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/openlayers.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-08-25T10:11:58.000Z","updated_at":"2025-04-22T15:11:41.000Z","dependencies_parsed_at":"2023-12-16T15:44:44.420Z","dependency_job_id":"0ab6d74b-f3cd-4a00-b6da-c9ec4d6d4b32","html_url":"https://github.com/openlayers/ol-mapbox-style","commit_stats":{"total_commits":1112,"total_committers":47,"mean_commits":"23.659574468085108","dds":0.4928057553956835,"last_synced_commit":"7c85fd67ce52f43e39f1379f2a943d3987ceb5f9"},"previous_names":[],"tags_count":159,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openlayers%2Fol-mapbox-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openlayers%2Fol-mapbox-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openlayers%2Fol-mapbox-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openlayers%2Fol-mapbox-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/openlayers","download_url":"https://codeload.github.com/openlayers/ol-mapbox-style/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251326851,"owners_count":21571636,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T20:01:25.766Z","updated_at":"2025-04-28T14:13:28.751Z","avatar_url":"https://github.com/openlayers.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"Create [OpenLayers](https://openlayers.org/) maps from [Mapbox Style](https://docs.mapbox.com/mapbox-gl-js/style-spec/) or [MapLibre Style](https://maplibre.org/maplibre-style-spec/) objects.\n\n## Getting started\n\nGet an impression of what this library does by exploring the [live examples](https://openlayers.org/ol-mapbox-style/examples/). \n\n### Installation\n\nTo use the library in an application with an npm based dev environment, install it with\n\n    npm install ol-mapbox-style\n\nWhen installed this way, just import from ol-mapbox-style, as shown in the usage examples below. To use a standalone build of ol-mapbox-style, include 'dist/olms.js' on your HTML page, and access the exported functions from the global `olms` object (e.g. `olms.apply()`, `olms.applyBackground()`). Note that the standalone build depends on the full build of OpenLayers.\n\n**ol-mapbox-style \u003e=12.4 is required for [OpenLayers](https://npmjs.com/package/ol) \u003e10.3.1**.\n\n**ol-mapbox-style \u003e=9 requires [OpenLayers](https://npmjs.com/package/ol) version \u003e=7 \u0026lt;11**.\n\n**ol-mapbox-style 8 requires [OpenLayers](https://npmjs.com/package/ol) version \u003e=6.13 \u0026lt;7**.\n\n### Usage\n\n**See the [project page](https://openlayers.org/ol-mapbox-style/) for the full documentation.**\n\nThe code below creates an OpenLayers map from Mapbox's Bright v9 style, using a `https://` url:\n\n```js\nimport { apply } from 'ol-mapbox-style';\n\napply('map', 'https://api.mapbox.com/styles/v1/mapbox/bright-v9?access_token=YOUR_MAPBOX_TOKEN');\n```\n\nTo assign style and source to a layer only, use `applyStyle()`. `mapbox://` urls are also supported:\n\n```js\nimport {applyStyle} from 'ol-mapbox-style';\nimport VectorTileLayer from 'ol/layer/VectorTile.js'\n\nconst layer = new VectorTileLayer({declutter: true});\napplyStyle(layer, 'mapbox://styles/mapbox/bright-v9', {accessToken: 'YOUR_MAPBOX_TOKEN'});\n```\n\nTo apply the properties of the Mapbox/MapLibre Style's `background` layer to the map or a `VectorTile` layer, use the `applyBackground()` function.\n\nThere is also a low-level API available. To create a style function for individual OpenLayers vector or vector tile layers, use the `stylefunction` module:\n\n```js\nimport {stylefunction} from 'ol-mapbox-style';\nimport VectorLayer from 'ol/layer/Vector.js';\nimport VectorSource from 'ol/source/Vector.js';\nimport GeoJSON from 'ol/format/GeoJSON.js';\n\nconst layer = new VectorLayer({\n  source: new VectorSource({\n    format: new GeoJSON(),\n    url: 'data/states.geojson'\n  })\n});\n\nfetch('data/states.json').then(function(response) {\n  response.json().then(function(glStyle) {\n    stylefunction(layer, glStyle, 'states');\n  });\n});\n```\n\nNote that this low-level API does not create a source for the layer, and extra work is required to set up sprite handling for styles that use icons.\n\n## Compatibility notes\n\n### Font handling\n\n`ol-mapbox-style` cannot use PBF/SDF glyphs for `text-font` layout property, as defined in the Mapbox/MapLibre 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.\n\n```js\n{\n  \"version\": 8,\n  \"metadata\": {\n    \"ol:webfonts\": \"https://my.server/fonts/{font-family}/{fontweight}{-fontstyle}.css\"\n  }\n  // ...\n}\n```\n\nAs an alternative, the `webfonts` option of the `apply()` or `applyStyle()` functions can be used.\n\nThe following placeholders can be used in the template url:\n\n- `{font-family}`: CSS font family converted to lowercase, blanks replaced with -, e.g. noto-sans\n- `{Font+Family}`: CSS font family in original case, blanks replaced with +, e.g. Noto+Sans\n- `{fontweight}`: CSS font weight (numeric), e.g. 400, 700\n- `{fontstyle}`: CSS font style, e.g. normal, italic\n- `{-fontstyle}`: CSS font style other than normal, e.g. -italic or empty string for normal\n\nIf no `metadata['ol:webfonts']` property is available on the Style object, [Fontsource Fonts](https://fontsource.org/) will be used. It is also possible for the application to load other fonts, using css. If a font is already available in the browser, `ol-mapbox-style` will not load it.\n\nBecause 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.\n\n## Building the library\n\n    npm run build\n\nThe resulting distribution files will be in the `dist/` folder. To see the library in action, navigate to `dist/index.html`.\n\nTo run test locally, run\n\n    npm test\n\nFor debugging tests in the browser, run\n\n    npm run karma\n\nand open a browser on the host and port indicated in the console output (usually \u003chttp://localhost:9876/\u003e) and click the 'DEBUG' button to go to the debug environment.\n\n[![Test Job](https://github.com/openlayers/ol-mapbox-style/actions/workflows/test.yml/badge.svg)](https://github.com/openlayers/ol-mapbox-style/actions/workflows/test.yml)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopenlayers%2Fol-mapbox-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopenlayers%2Fol-mapbox-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopenlayers%2Fol-mapbox-style/lists"}