Do you have a working example? about ol-mapbox-style HOT 12 CLOSED

I just tried your example at https://rawgit.com/openmaptiles/www.openmaptiles.org/master/maps/ol.html, and it seems to work fine for me.

The official example of ol-mapbox-style is here, with a hosted version here.

from ol-mapbox-style.

I have a similar problem with angular 2 app(

from ol-mapbox-style.

The working one is using this olms.js
https://github.com/openmaptiles/www.openmaptiles.org/blob/master/maps/olms.js
and this repo. has index.js
https://github.com/boundlessgeo/ol-mapbox-style/blob/master/index.js

The current package.json is pointing to index.js

  "main": "index.js",

When I import like the following, it comes from index.js, not dist/olms.js. Am I right?

import { apply } from 'ol-mapbox-style';

I also see that olms.js used by the working example is different from the distributed one.
https://unpkg.com/[email protected]/dist/olms.js

One more question
I also see found this repo. https://github.com/boundlessgeo/mapbox-to-ol-style. What difference between mapbox-to-ol-style and ol-mapbox-style? If you ask, I will raise another issue if you want to handle this question with a different issue.

from ol-mapbox-style.

You are right. olms.js is a standalone build for use without a bundler. When you use a bundler, you do not need it. And actually the recommended use is with a bundler.

See https://github.com/boundlessgeo/ol-mapbox-style/blob/master/test/test.js for a typical app that uses a bundler.

mapbox-to-ol-style has a lower level API and less dependencies. You can use it when you just style a single layer and do not need automatic font and sprite loading.

All that said, I still do not get from the comments on this ticket what the actual problem is. The stack trace in the first comment indicates a problem with OpenLayers. Maybe you are using an OpenLayers version that is too old?

from ol-mapbox-style.

`public drawMap(): void {
this.map = new Map({loadTilesWhileAnimating: true, loadTilesWhileInteracting: true, pixelRatio: 1, controls: []});

this.view = new View({
  projection: 'EPSG:3857',
  center: proj.transform(this.centerCoords, 'EPSG:4326', 'EPSG:3857'),
  zoom: this.zoom,
  extent: this.bounds,
  maxZoom: this.maxZoom,
  minZoom: this.minZoom
});

//this.view.on('change:resolution', this.constrainPan.bind(this));
//this.view.on('change:center', this.constrainPan.bind(this));

//map events Observable
this.map.on('pointermove', (event: MapBrowserEvent) => this.onPonterMove.next(event));
this.map.on('moveend', (event: MapEvent) => this.onMoveEnd.next(event));
this.map.on('singleclick', (event: MapBrowserEvent) => this.onSingleClick.next(event));
this.map.on('click', (event: MapBrowserEvent) => this.onClick.next(event));

//this.createLayers();
this.map.setView(this.view);
this.map.setTarget(this.mapEl);
this.map.addControl(new control.ScaleLine());
let mousePosition = new control.MousePosition({projection: 'EPSG:4326', className: 'mouse-position'});
mousePosition.setCoordinateFormat((coord) => coordinate.format(coord, 'Координаты курсора: {y}, {x}', 6));
this.map.addControl(mousePosition);


let tileGrid = tilegrid.createXYZ({tileSize: 512, maxZoom: 22});

let lay = new layer.VectorTile({
  source: new source.VectorTile({
    projection: '',
    format: new format.MVT(),
    tileGrid: tileGrid,
    tilePixelRatio: 8,
    url: 'http://localhost:8080/data/v3/{z}/{x}/{y}.pbf'
  })
});

//this.map.addLayer(lay);

this.http.get('http://localhost:8080/styles/osm-bright.json')
  .map(res => res.json())
  .subscribe(res => {
    applyStyle(lay, res, 'openmaptiles').then(() => {
      this.map.addLayer(lay);
    })
  });

}
`
with openlayers 4.0.1

from ol-mapbox-style.

@hankypanky666 Your snippet does not give me any clue. Can you put up a live example, e.g. with a CodePan, that shows the issue?

from ol-mapbox-style.

I've also encountered this issue when trying to use ol-mapbox-style on an OpenLayers VectorTile source in a React app. It doesn't occur when using the standalone olms.js.

Here's a tiny project based on create-react-app that reproduces the issue as simply as I can, throwing errors similar to that reported by the OP:
https://github.com/metazool/ol-vectortile-react

Uncaught TypeError: c.Y is not a function
    at Mt (:3000/static/js/bundle.js:73642)

The frustrating part is that when I switch from ol.js to ol-debug.js (by changing the line in node_modules/openlayers/package.json to read "browser": "dist/ol-debug.js",) to try to get an insight into what OL is doing, then the tile layer just starts working with no changes to the code and no errors in the console!

I've had no trouble with the standalone build. This is all the latest release as of writing - OL ^4.2.0, ol-mapbox-style ^2.4.0, React ^15.6.1. I appreciate the issue may not even belong to this repo but this is the only place i've seen discussion of it.

from ol-mapbox-style.

I have published an update yesterday, and we now also pull in ol ^4.2.0. Maybe this fixes your issue?

from ol-mapbox-style.

Thank you for the update @ahocevar

I've updated to 2.5.1 but unfortunately still see the problem occurring - ol.js:617 Uncaught TypeError: c.Y is not a function etc etc

Suspicion is the problem may lie with webpack, I can look harder into this side of things but it's a bit beyond my JS ken ;)

from ol-mapbox-style.

@metazool: Looks like you're using the wrong OpenLayers package in your app. Use ol, not openlayers.

from ol-mapbox-style.

OK brilliant, when I switch to the ES6 'ol' npm package then this works well! I've updated my toy example repo accordingly.

Thanks very much for your help.

from ol-mapbox-style.

@allenhwkim, you'll also have to switch from the openlayers npm package to the ol package.

from ol-mapbox-style.