Hi, do you experienced any incompatibility with Angular 5 and the latest Openlayers version?

I'm getting a

ERROR TypeError: targetElement.appendChild is not a function
    at _ol_Map_._ol_PluggableMap_.handleTargetChanged_ (pluggablemap.js:817)
    at _ol_Map_.boundListener (events.js:16)
    at _ol_Map_._ol_events_EventTarget_.dispatchEvent (eventtarget.js:77)
    at _ol_Map_._ol_Object_.notify (object.js:120)
    at _ol_Map_._ol_Object_.set (object.js:139)
    at _ol_Map_._ol_Object_.setProperties (object.js:153)
    at _ol_Map_._ol_PluggableMap_ [as constructor] (pluggablemap.js:241)
    at new _ol_Map_ (map.js:92)
    at c.apply (index.js:452)
    at AppComponent.ngOnInit

as soon as I call the apply on a simple map with one vector layer.

I'm trying to replicate the issue on stackblitz to help you understand what happens but in the meanwhile I was wondering if already know that I will not solve the issue.

Thanks.

Version
3.0.0-beta.7 - work fine
but "ol-mapbox-style": "^3.0.0-beta.9" - generate errors

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

ERROR Failed to compile with 7 errors13:15:45

error in ./node_modules/@mapbox/mapbox-gl-style-spec/util/color.js

Module parse failed

: Unexpected token (17:5)
You may need an appropriate loader to handle this file type.
| */
| class Color {
| r: number;
| g: number;
| b: number;

@ ./node_modules/ol-mapbox-style/index.js 23:0-60
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/pages/OlMap/OlMap.vue
@ ./src/components/pages/OlMap/OlMap.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?https://localhost:8080 webpack/hot/dev-server ./src/main.js

and etc. see atachment
rr.txt

When I build the olms.js file using npm install the resulting dist/olms.js file doesn't work in the browser. There's lots of network errors as it tries to download /openlayers/map.js and a load of other missing files.

This is a quite interesting bug.

As long as I've used ol-debug.js it worked just fine. However, using a custom build ol.js, it stopped working (does not even render the layer with the basic OL styles), throwing mysterious errors to the console.

I managed to get it up and running again with this patch, but I'd like to hear what you think.

@ahocevar Would it make sense to have a patched Mapbox GL spec that only contains the properties and layer types that are supported by ol-mapbox-style?

I would take care of it. It could be in this repo or in another one.

For https://github.com/maputnik/editor this would allow me to only display properties for a OL3 style that can be supported.
And in general it would help to specify and document the subset of the Mapbox GL spec that is supported by ol-mapbox-style.

As always - I love this plugin.

AFAICT from testing with mapbox GL JS it seems that the assumption we make in ol-mapbox-style is incorrect, i.e. the type background layer can be anywhere in the stack, not just at the bottom

Hi was looking forward to trying react-openlayers out but it won't npm install because it depends on ol-mapbox-style - and ol-mapbox-style won't install because your dependency mapbox-gl-style-spec is gone(?)

i.e. It appears the mapbox-gl-style-spec repo is now just a placeholder see:
https://github.com/mapbox/mapbox-gl-style-spec

It says: "This repository has been merged with mapbox-gl-js"

Here's my full install ouput JIC it helps:

npm install react-openlayers --save-dev
npm ERR! Darwin 15.6.0
npm ERR! argv "/Users/dcrus/.nvm/versions/node/v6.10.0/bin/node" "/Users/dcrus/.nvm/versions/node/v6.10.0/bin/npm" "install" "react-openlayers" "--save-dev"
npm ERR! node v6.10.0
npm ERR! npm v3.10.10
npm ERR! code E404

npm ERR! 404 Not found : @mapbox/mapbox-gl-style-spec
npm ERR! 404
npm ERR! 404 '' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of 'ol-mapbox-style'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/dcrus/field-maps-nav/npm-debug.log

When rendering a mapbox style with a spritesheet on a high-resolution display, if there is no high resolution version on the spritesheet, ol-mapbox-style should fall back to using the regular spritesheet.

Current behavior is to try and read the response as a spritesheet anyways, even if a 404 is returned:

[email protected]:1 GET http://localhost:8080/geoserver/styles/[email protected] 404 ()
olms.js:193 GET http://localhost:8080/geoserver/styles/[email protected] 404 ()
VM4263:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.xhr.onload.xhr.onerror (olms.js:190)

I got an Uncaught TypeError: geometry.getFlatInteriorPoint is not a function unless I define format: new ol.format.MVT({featureClass: ol.Feature}) on ol.source.VectorTile, which suggests that getFlatInteriorPoint is not defined for ol.render.Feature features.

Interestingly your example works just fine without featureClass: ol.Feature.

I'll investigate this issue further, just wanted to mention this at the first place - maybe you have a suggestion from the top of your head.

Hi, I have some vector tiles are not well displayd, I found that the reason of it is the resolutions. My vectorTiles ues different resolutions.
.

I saw the code and found that

"applyStyleFunction" function supports "resolutions" parameter, but "onchange" function passed "undefined" to it.

If possible i want to add a "resolutions" parameter to "applyStyle" function , and pass it to "applyStyleFunction"

Hi ,I am using olms to load arcgis style in my ol vector tile. there i have set max zoom to 15. but some of the .pbf request at certain areas fails at zoom level 14 and map gets blurred. i am not sure this is the right place to post. Help me with your suggestions :)

I have a problem to build the lib.
When I do a npm install, the process is stopped to the canvas install.

C:\Users\xxx.node-gyp\6.10.0\include\node\v8.h(19): fatal error C1083: Impossible d'ouvrir le fichier include : 'stdint.h' : No such file or directory [C:\Users\xxx\Downloads\ol-mapbox-style3.3.0\node_modules\canvas\build\binding.sln]

Could you help me please ?

thx

Using an old version of the library I get to work mapbox styles but in a slowly way. Now, I am using the last version of this library but I don't see how I do to make it work.

I am doing something like this:

Layer definition

const vtLayer = new ol.layer.VectorTileLayer({
 declutter: true,
 renderMode: 'image',
 renderBuffer: 2,
 source: new ol.source.VectorTileSource({
   format: new ol.format.MVT(),
   overlaps: false,
   url: 'http://10.0.2.93:8080/geoserver/gwc/service/tms/1.0.0/bl:B_PARC@EPSG:900913@pbf/{z}/{x}/{-y}.pbf?1537872297191'
 })
});

• note that I am using my own Geoserver as a MVT server

VT Style definition

var stylelyrs= {
    "version": 8,
    "name": "test",
   "sources": {
     "test": {
        "type": "vector"
      }
    },
    "layers": [{
        "id": "bl:B_PARC",
        "type": "fill",
        "source": "bl:B_PARC",
        "paint": {
          "fill-color": "#00cc00",
          "fill-opacity": 0.6,
          "line-color": "#004d00",
          "line-width": 1
        }
}]
  };

Assigning style function

 olms.stylefunction(vtLayer, stylelyrs, 'bl:B_PARC');

pbf's are loading behind but I can't see any geometry on my map, I guess it must be something related with olms applyiing style (as I said, with old version is working - getStyleFunction method). Do you know why is not working with the newest? Do you have more examples or documentation?

Thank you.

First, thanks for this module.

Do you have any working example page using plunker, jsfiddle, or any?

I am an author of react-openlayers, and tried to implement with ol.layer.VectorTile with MapBox style json object.

Currently, I am trying to achieve this with the current version of olms, but not successful yet.

Ref. allenhwkim/react-openlayers#2
https://rawgit.com/allenhwkim/react-openlayers/master/app/index.html#/layers/vector-tile-2

Hello,

So it looks like the apply() function doesn't return a promise, only the applyStyle() does. Is there a particular reason for this? Is it somehow infeasible? I'd like to know if there's a reason it can't be done before heading down the rabbit hole...

thanks,
fleur

Hiya,

Just came across this issue where the stylefunction.js' fromTemplate function receives an array as it's text argument, therefore it throws a wobbly.

Uncaught TypeError: text.match is not a function

Within Mapbox Studio one might use a function (to-string()) to convert non-string fields to string fields and use those as labels, hence the issue.

The text argument looks something like this:

["to-string", ["get", "<attributeName>"]]

A quick and dirty workaround can look like this:

if (Array.isArray(text) && text.length === 2 && text[0] === 'to-string' && Array.isArray(text[1]) && text[1].length === 2 && text[1][0] === 'get') {
  text = properties[text[1][1]].toString();
}

Hello!

I work on at Mapbox on Mapbox GL. We are preparing to make some changes to the mapbox-gl-style-spec package which may affect you:

• the mapbox-gl-style-spec package will be deprecated and replaced by @mapbox/mapbox-gl-style-spec
• mapbox-gl-style-spec package will begin using es6 features, requiring the use of transpilation (if you're using browserify, this'll happen automatically via bubleify)
• the file structure of mapbox-gl-style-spec will change (which will affect the use of require(mapbox-gl-style-spec/lib/**/*.js))

You can read more about these changes at mapbox/mapbox-gl-js#3946 and mapbox/mapbox-gl-js#3656.

Let me know if you have any questions or need any help!

Hello,

I think it would be interesting to add in the documentation a note about browser compatibility.

Can you confirm that using this module it is possible to render full mapbox styles without depending on webgl and therefore support much older browsers than mapbox-gl-js ?

If so I think it is the great strength of this module as it provides an alternative to webgl and server side rendering.

Hı ,
I am using olms to load arcgis style in my ol vector tile. I have two basic problems.

1. Some icons do not appear in a certain zoom range.
   just max appears at zoom level.

in fact ==>

ol-mapbox-style ==>

2. some icons do not appear in the correct position.

in fact ==>

ol-mapbox-style ==>

Help me with your suggestions :)

Hello,
I am using Tileserver GL and/or Tileserver GL light to serve vector tiles.
I ran into two an issues with ol-mapbox-style :

• I don't have an "access_token" in the sprite URL parameters, but I have a "style" parameter leading to malformed URL when getting sprites files ".json" and ".png". I think this can be resolved using this regex : var spriteRegEx = /^(.*)(\?.*)$/;
• I have an openlayers error when using apply function. I found that the URL used in processStyle (url = glSource.url; line 252) is in fact a TileJSON URL http://127.0.0.1/data/planet.json with Tileserver. The vector URL can be accessed using TileJSON URL {"tiles":["http://127.0.0.1/data/planet/{z}/{x}/{y}.pbf"], ...}

Are those Is this issues only related to Tileserver GL? Is it possible to make a patch for the first issue (I was able to work around the second issue using applyBackground and applyStyle)?

Hi ,I am using olms to load arcgis style in my ol vector tile.
I use many fonts . some fonts can not be displayed correctly

how can i solve this problem ?

Thank You :)

currently apply only takes a string to a url. In my case I want to parse the JSON doc myself so I can update the redux store's state with the doc's info, and then pass on the parsed doc to ol-mapbox-style.

I have a problem related with a label layer which has a field itself that indicates the angle of rotation. I am trying to make it work but I can't.

The example below has the style to represent the rotated labels:

http://jsfiddle.net/8kyp19qz/8/

If I delete the "text-rotate" : "{AA_TXANG}" property labels are displayed with no rotation.

Could someone help me on how I should have to describe the Style configuration?

It would be nice to be able to generate a regular OL Style descriptor as a string. Could then just be copied into the code and wouldn´t make it necessary to deliver your lib in production (at least for static styles).
Do you think that would make sense?

Hi,Do you have plans to support 'fill-pattern' parameter?
Like http://openlayers.org/en/latest/examples/canvas-gradient-pattern.html?q=Pattern
It is helpful for land-related maps.

The version number in package.json (currently 2.10.4) doesn't match the released version on npm (currently 2.11.2)

For users that just want to display a Mapbox GL style JSON with ol-mapbox-style there could be a more convenient higher level API.

Perhaps something like this. Ideally just passing the style URL.

var olms = require('ol-mapbox-style');
olms.addStyleLayer('https://raw.githubusercontent.com/openmaptiles/osm-bright-gl-style/master/style.json');

Would this be something that would fit into this repo? Otherwise I would put it into another repo which includes ol-mapbox-style.

In Maputnik right now I generate the vector sources dynamically (it is quite a hack though) for ol-mapbox-style but I would also like that users have this functionality when they use the style with OL3.

This would be an additional higher level API that takes care of:

• Fetching the style
• Resolving TileJSON
• Create the layer
• Create and apply the style func

When using IE11 (unfortunately still used in many companies) the code for vector tiles is not working. Even the example crashed with exception "symbol undefined".
Is there a possibility that someone can look at it and fix it if possible?

https://rawgit.com/boundlessgeo/ol-mapbox-style/v2.10.1/example/tilejson-vectortile.html

Addtional for older browsers:
Uncaught exception: TypeError: 'inputs[Symbol.iterator]' is not a function

Error thrown at line 1118, column 9 in <anonymous function: module.exports>(output) in http://www.example.com/modules/maps/js/olms.js:
    throw _iteratorError;
called from line 771, column 8 in createFunction(parameters, propertySpec) in http://www.example.com/modules/maps/js/olms.js:
    parameters = extend({}, parameters);
called from line 2018, column 8 in convertToFunctions(properties, type) in http://www.example.com/modules/maps/js/olms.js:
    properties[property] = (0, _function2.default)(value, {
called from line 2072, column 6 in preprocess(layer, fonts) in http://www.example.com/modules/maps/js/olms.js:
    convertToFunctions(layer.paint, 'interpolated');
called from line 1635, column 8 in <anonymous function: exports.default>(olLayer, glStyle, source, resolutions, spriteData, spriteImageUrl, fonts) in http://www.example.com/modules/maps/js/olms.js:
    preprocess(layer, fonts);
called from line 237, column 9 in onChange() in http://www.example.com/modules/maps/js/olms.js:
    style = (0, _mapboxToOlStyle2.default)(layer, glStyle, source, undefined, spriteData, spriteImageUrl, availableFonts);
called from line 225, column 12 in <anonymous function: xhr.onerror>() in http://www.example.com/modules/maps/js/olms.js:
    onChange();

I'm just trying out this library, and it looks great, but there's an obvious issue with labels showing up at the wrong zooms.

Mapbox-gl-js (zoom 13):

ol-mapbox-style (zoom 14):

One of the layers that shouldn't be displaying (containing the churches, primary schools etc) is defined thus:

    {
      "id": "foi-label",
      "type": "symbol",
      "source": "VMFEAT",
      "source-layer": "foi_index_centroid",
      "filter": [
        "!in",
        "FTYPE",
        "sign",
        "care facility",
        "residential building",
        "community venue",
        "communication service"
      ],
      "layout": {
        "text-field": "{NAME_LABEL}",
        "text-size": 10,
        "text-max-width": 6
      },
      "paint": {
        "text-color": {
          "property": "FTYPE",
          "type": "categorical",
          "default": "green",
          "stops": [
            [
              "reserve",
              "green"
            ],
            [
              "education centre",
              "hsl(30, 50%, 50%)"
            ],
            [
              "place of worship",
              "hsl(30, 50%, 50%)"
            ],
            [
              "dumping ground",
              "hsl(0, 0%, 50%)"
            ],
            [
              "hospital",
              "hsl(0, 50%, 50%)"
            ]
          ]
        },
        "text-opacity": {
          "stops": [
            [
              14.5,
              0
            ],
            [
              15,
              1
            ]
          ]
        },
        "text-halo-width": 1,
        "text-halo-color": "hsla(0, 0%, 100%, 70%)"
      }
    },

AFAIK, using text-opacity like this is the recommended way to have a layer only show up above a certain zoom level in mapbox-gl-js. Is there a workaround in ol-mapbox-style, perhaps minzoom?

If fill-opacity is zoom-based (uses stops), black polygons appear instead of parks, nature reserves, buildings, towns etc. with their correct color codes.

"fill-opacity": {
    "stops": [
        [
            6,
            0.7
        ],
        [
            9,
            0.9
        ]
    ]
}

My current workaround is using a constant, then the issue does not appear:

"fill-opacity": 1,

The style I am trying to use is available at: https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json (there are several places where fill-opacity needs to be changed)

Sample javascript to reproduce the issue:

var baseUrl = 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json'; 
// var baseUrl = 'voyager.json';
var map = olms.apply('map', baseUrl);

Most likely culprit is alpha interpolation, but so far I have been unable to find the exact issue.

Image of issue:

Hello,
I have a OL5 map using a projection of EPSG:4326. I am adding a Vector Tile layer with a projection of ESPG:4326.

When I am using OLMS to apply a style to my Vector Tile I am seeing weird issues with how the styling is being rendered. I am assuming there is a disconnect with the Vector Tile Styling data vs the projection my map supports.

Any idea on why the below code does not seem to style the Vector Tile correctly? Is this a issue with the plugin or a issue with the way the layer is configured.

// Create vector tile layer
var layer = new ol.layer.VectorTile({
    source: new ol.source.VectorTile({
    format: new ol.format.MVT({ featureClass: ol.render.Feature }),
   url: 'https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf',
   projection: ol.proj.get("EPSG:4326")
   })
});
// Create map
var map = new ol.Map({
	target: 'map',
	view: new ol.View({
	   projection: 'EPSG:4326',
	   center: [0, 0],
	   zoom: 2
	}),
	layers: [layer]
});

// Get style
$.get("https://www.arcgis.com/sharing/rest/content/items/291da5eab3a0412593b66d384379f89f/resources/styles/root.json")
   .then(function(res) {
	olms.applyStyle(layer, res, "esri");
});

Is it possible to use this library as AMD module? Now I get erros about not found files from this section of code:

if (typeof define === 'function' && define.amd) {
    define([
        "_",
        "ol/observable",
        "ol/proj",
        "ol/tilegrid",
        "ol/map",
        "ol/format/geojson",
        "ol/format/mvt",
        "ol/layer/tile",
        "ol/layer/vector",
        "ol/layer/vectortile",
        "ol/source/tilejson",
        "ol/source/vector",
        "ol/source/xyz",
        "ol/source/vectortile",
        "ol/style/style",
        "ol/style/fill",
        "ol/style/stroke",
        "ol/style/circle"
], f.bind(_g, r))
} 

Does it make sense to add support of passing ol object to ol-mapbox-style?

FYI. This is on the master tree. It references the URL https://osm.tegola.io/capabilities/osm.json and fails due to CORS headers. It appears the URL is no longer available:

$ wget https://osm.tegola.io/capabilities/osm.json
--2018-10-16 14:11:12--  https://osm.tegola.io/capabilities/osm.json
Resolving osm.tegola.io (osm.tegola.io)... 52.85.201.42, 52.85.201.10, 52.85.201.59, ...
Connecting to osm.tegola.io (osm.tegola.io)|52.85.201.42|:443... connected.
HTTP request sent, awaiting response... 503 Service Unavailable
2018-10-16 14:11:12 ERROR 503: Service Unavailable.

Hi, i used Maputnik to create a new style object: http://192.168.1.55:8080/styles/klokantech-basic.json

I'm using webpack to bundle the source (ol 4.1.0) and try to build a map inside a react app like so:

this.map = new Map({target: this.map_wrapper});
apply(this.map, 'http://192.168.1.55:8080/styles/klokantech-basic.json');

and I get the following error

I'm a bit none-plussed about what is causing this error - any help is much appreciated!

In package.json, the pretest is:

eslint src & npm run test-bundle

But there's not src directory. Shouldn't it be changed to something like:

eslint index.js & npm run test-bundle

I am trying to style a point features in an ol.layer.Vector with a simple icon-image defined in a Mapbox GL Style. Therefore I am executing the API function getStyleFunction, which raises an exception:

In line 408 of the index script the function fromTemplate is executed which leads to the mentioned exception. The regex used in this function does not match with the expression in the style property icon-image and returns null (see here ). Which kind of expression is expected here? Has the regex to be adapted or is the style description (see code below) incorrect although it is exported from Mapbox studio?

The style object used looks like this:

{
   "id": "foo",
   "type": "symbol",
   "source": "composite",
   "source-layer": "foolayer",
   "interactive": true,
   "filter": [
     "all",
     [
       "==",
       "$type",
       "Point"
     ],
     [
       "all",
       [
         "==",
         "propertyFoo",
         2
       ]
     ]
   ],
   "layout": {
     "icon-image": "dam-15",
     "visibility": "visible"
   }
}

The https://www.mapbox.com/mapbox-gl-style-spec/#layers-background layer type is not supported by ol-mapbox-style. Is that correct?

The background stays transparent (so here instead of white, I see the black color of my HTML page).

For instance if I modify wms.json to:

      "id": "states-wms",
      "source": "states",
      "layout": {
        "visibility": "none"
      }

it is not taken into account. Same applies to osm in that same file.

I import latest ol and ol-mapbox-style pakcage, and I only write one line code 'apply('map', this.serverHost + 'event_didi.json');', but error occured when compiling.

ERROR in ./node_modules/@mapbox/mapbox-gl-style-spec/util/color.js
Module parse failed: Unexpected token (17:5)
You may need an appropriate loader to handle this file type.
| */
| class Color {
| r: number;
| g: number;
| b: number;
ERROR in ./node_modules/@mapbox/mapbox-gl-style-spec/expression/index.js
Module parse failed: Unexpected token (19:12)
You may need an appropriate loader to handle this file type.
| import { success, error } from '../util/result';
|
| import type {Type} from './types';
| import type {Value} from './values';
| import type {Expression} from './expression';
ERROR in ./node_modules/@mapbox/mapbox-gl-style-spec/feature_filter/index.js
Module parse failed: Unexpected token (5:12)
You may need an appropriate loader to handle this file type.
| import { createExpression } from '../expression';
|
| import type {GlobalProperties} from '../expression';
| export type FeatureFilter = (globalProperties: GlobalProperties, feature: VectorTileFeature) => boolean;
|
ERROR in ./node_modules/@mapbox/mapbox-gl-style-spec/util/interpolate.js
Module parse failed: Unexpected token (5:24)
You may need an appropriate loader to handle this file type.
| import Color from './color';
|
| export function number(a: number, b: number, t: number) {
| return (a * (1 - t)) + (b * t);
| }
ERROR in ./node_modules/@mapbox/mapbox-gl-style-spec/function/convert.js
Module parse failed: Unexpected token (7:12)
You may need an appropriate loader to handle this file type.
| import extend from '../util/extend';
|
| import type {StylePropertySpecification} from '../style-spec';
|
| export default convertFunction;
ERROR in ./node_modules/@mapbox/mapbox-gl-style-spec/util/color_spaces.js
Module parse failed: Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
| import {number as interpolateNumber} from './interpolate';
|
| type LABColor = {
| l: number,
| a: number,
ERROR in ./node_modules/@mapbox/mapbox-gl-style-spec/expression/definitions/interpolate.js
Module parse failed: Unexpected token (9:12)
You may need an appropriate loader to handle this file type.
| import { findStopLessThanOrEqualTo } from '../stops';
|
| import type { Stops } from '../stops';
| import type { Expression } from '../expression';
| import type ParsingContext from '../parsing_context';

With the update to the polygon fill hit detection in openlayers/openlayers#7750, I cannot set a fill-color to have a 0 opacity or fill-opacity: 0 within a stylesheet and have any kind of hit detection within a polygon. When the styles are converted into a style function through this package, it treats a 0 opacity polygon fill instead as having no fill and so no hit is detected.

node-gyp rebuild

./util/has_lib.sh: line 31: pkg-config: command not found
gyp: Call to './util/has_lib.sh freetype' returned exit status 0 while in binding.gyp. while trying to load binding.gyp
gyp ERR! configure error
gyp ERR! stack Error: gyp failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:345:16)
gyp ERR! stack at ChildProcess.emit (events.js:182:13)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:238:12)
gyp ERR! System Darwin 16.7.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/didi/wanglei/codes/styles/ol-mapbox-style/node_modules/canvas
gyp ERR! node -v v10.8.0
gyp ERR! node-gyp -v v3.7.0
gyp ERR! not ok
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: node-gyp rebuild
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/didi/.npm/_logs/2018-08-20T04_01_11_568Z-debug.log

When writing unit tests, intercepting will be easier if we use fetch instead of XMLHttpRequest

See also: https://stackoverflow.com/questions/41706042/nock-is-intercepting-my-request-but-my-ajax-request-is-erroring-out

I know it this is still not production ready but could you publish ol-mapbox-gl-style to npm?

BTW. I am really amazed by this project. Hope to contribute. This could be the corner stone of building an style editor for OL3. maplibre/maputnik#7

Hi,

Using this package in a react app, when i try to build for prod, i've got the following error :

`

npm run build

[email protected] build /app/front
react-scripts build

Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file:

   ./node_modules/@mapbox/mapbox-gl-style-spec/function/index.js:15 

`

(npm run build launch react-scripts build)

I'm trying to solve that problem. If you have any clue on what's happening. I'm not a master on npm builds.

Thanks.

Hi, I'm trying to implement a mapbox style I've made using the apply functionality. However since this errors shows up during the building during webpack, the website won't work.

Removing import {apply} from 'ol-mapbox-style'; solves the loading, so it's an issue within the package itself.

Environment:
Vue.js + Webpack 3.11.0

Hi

I'm trying to get a map to display with multiple styles of map ( street / satellite )
I can get the map to load with a single style... and i have also added some button which then ADD the other style. However i want the previous style to be removed.

`var satJson = 'https://maps.tilehosting.com/styles/hybrid/style.json?key=[MYKEYGOESHERE]' ;
var styleJson = 'content/mapping/openmaptiles-street/style-basic-original.json';

var map_view = new ol.View({
center: ol.proj.fromLonLat([-1.0, 53]),
zoom: 16
})

    var map = new ol.Map({
     target: 'map',
    view: map_view
});

olms.apply(map, satJson);`

how would i go about toggle between the 2 styles?

Thanks

I have a Mapbox style that is a composite of multiple sources: Mapbox Streets V7 + Vector Terrain V2(Composite source). How can I load multiple sources into the ol.source.VectorTile?

I am trying something like this:

var tilegrid = ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22});
    var layer = new ol.layer.VectorTile({
      source: new ol.source.VectorTile({
        format: new ol.format.MVT(),
        tileGrid: tilegrid,
        tilePixelRatio: 8,
        urls: [
          'http://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v7/{z}/{x}/{y}.vector.pbf?access_token=' + mapboxKey,
          'http://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-terrain-v2/{z}/{x}/{y}.vector.pbf?access_token=' + mapboxKey
          ]
      })
  });

I saw some code in stylefunction.js which must use ol-debug.js because getFlatMidpoint is not an api function.

In ol/geom/LineString

If possible i want to use getCoordinateAt(0,5) instead of getFlatMidpoint() because getCoordinateAt is an api function.

Hi @ahocevar , this script is a very great work, but I'm not sure if I was missed some configuration for this problem.

I'm not familar with NodeJS so I'll put my proposals here ;-)
Now the code für multi language is usable. But If you have e.g. german, english or similar things with line breaks as "\n", than your OL code will not wrap. Instead it will put a white space for it and the multi line formatting is gone.
Here are my changes to have it like it should.

wrapText (around line 1850 in /dist)

      var textSplit = /\s+/g;
      var words = text.split(textSplit);

fromTemplate (around line 2550 in /dist)

var templateRegEx = /(\s*\S*)\{(.*)\}/g;

String.prototype.matchAll = function(regexp) {
	var matches = [];
	this.replace(regexp, function() {
		var arr = ([]).slice.call(arguments, 0);
		var extras = arr.splice(-2);
		arr.index = extras[0];
		arr.input = extras[1];
		matches.push(arr);
	});
	return matches.length ? matches : null;
}
function fromTemplate(text, properties) {
  var parts = text.matchAll(templateRegEx);
  if (parts) {
	var returnStr = "";
	for (var i in parts) {
		var part = parts[i];
		returnStr += part[1] + (properties[part[2]] || '');
	}
	return returnStr.trim();
  } else {
    return text;
  }
}