Use of other map tiles not working

[gcarrero]

Hi Allen, thanks for your work in this library. I'm trying to use this in a project but I've found some problems. For example I've found there is some problem using other tiles than default. When you create a Map, using react-openlayers as library, it works with no problem.

<Map>
     <Layers>
         <layer.Tile />
     </Layers>
     <Controls attribution={false} zoom={true}></Controls>
</Map>

But if you use different map tile:

<Map>
     <Layers>
         <layer.Tile source={new ol.source.Stamen({ layer: 'watercolor' })} />
     </Layers>
     <Controls attribution={false} zoom={true}></Controls>
</Map>

It doesn’t load the map and you can see an error in the console like this:

Uncaught TypeError: Cannot read property 'D' of null

Thanks for your help

[allenhwkim]

Are you using systemjs? It works with webpack, but could not make it with SystemJS with those error. Could not figure out why.

[gcarrero]

I'm using webpack. It's very strange because seems a problem with openlayers library. If I debug and while in your class Tile reassign options.source to new source like new ol.source.Stamen({ layer: 'watercolor' }), while in console it works. But if it comes from the props doesn't.

[faeron]

Same issue here. Using the default tiles it is working. But changing the source to a custom tile server gives me an error. Also using webpack

Uncaught TypeError: a.V is not a function
    at Hv.k.Nf (react-openlayers.umd.js:563)
    at eh (react-openlayers.umd.js:558)
    at Hv.k.Lf (react-openlayers.umd.js:563)
    at react-openlayers.umd.js:562
    at Array.forEach (<anonymous>)
    at D.k.forEach (react-openlayers.umd.js:460)
    at fh.k.Lf (react-openlayers.umd.js:562)
    at G.k.hp (react-openlayers.umd.js:702)
    at G.<anonymous> (react-openlayers.umd.js:689)
k.Nf @ react-openlayers.umd.js:563
eh @ react-openlayers.umd.js:558
k.Lf @ react-openlayers.umd.js:563
(anonymous) @ react-openlayers.umd.js:562
k.forEach @ react-openlayers.umd.js:460
k.Lf @ react-openlayers.umd.js:562
k.hp @ react-openlayers.umd.js:702
(anonymous) @ react-openlayers.umd.js:689

a.V is really not defined. Just by guessing it could be one of the tile functions, that don't seem to be minified, but are called like they were?

Edit:
I got my tryout-project working, by configuring typescript and using src/index.tsx as entrypoint (not the compiled version from dist). I also had to install geo-coder module. Now custom source works. But of course this setup is not usable :)

[faeron]

I debugged the minified source (formatted) in chrome, and probably found the original openlayers code, causing the problem.

This looks like the following code https://github.com/openlayers/openlayers/blob/9fc0fb5e74146cd9a0c99926bed1a0f51fc745ad/src/ol/layer/layer.js#L124-L127

This would mean the source.getSourceState() function is not defined (for whatever reason). Hope this helps narrowing down the problem

[shortwavedave]

I'm having the same problem

[AAllport]

I am also having this problem

[matiaslabra]

+1 😢

[ivesdebruycker]

I'm guessing it has something to do with the embedded version of Openlayers in this library vs. the project dependency needed for import * as ol from 'openlayers' (because the one in react-openlayer isn't accessible).
Maybe the instance of e.g. ol.source.vector (created with project OL) isn't compatible with the react-openlayer OL, possibly because of different uglification?

This could be fixed if we could use the embedded OL.

[allenhwkim]

@ivesdebruycker please make PR if you find a solution. I just try to wrap it, and I am not an openlayer expert. 😢

[martinmcneela]

@allenhwkim @ivesdebruycker Did you ever get a solution to this? I'm having the same issue.

[ivesdebruycker]

@martinmcneela I wrote a simple React component, which was sufficient for my needs:
https://gist.github.com/ivesdebruycker/814578d65cea8e6db40d3b54005395cb

[damienzonly]

anyone found a solution, integrated other components or found a workaround?