How to use OpenLayers with react-starter-kit?

Question

I have a problem with running OpenLayers3 Map in a project based on react-starter-kit. I'm trying to add simple map to react component. What I did was to:

Run npm install openlayers
Add import ol from 'openlayers' to ContactPage.js

Create simple map

componentDidMount(){
  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.MapQuest({layer: 'sat'})
      })
    ],
    view: new ol.View({
      center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
      zoom: 4
    })
  });
}

Add a div to jsx part of render function <div id="map" className="map"></div>
Run npm start.

I get an error:

...\node_modules\openlayers\dist\ol.js:7
    module.exports = factory();
                     ^
TypeError: Cannot use 'in' operator to search for 'geolocation' in undefined
    at C:\Git Repos\traces\node_modules\openlayers\dist\ol.js:160:823
    at OPENLAYERS (C:\Git Repos\traces\node_modules\openlayers\dist\ol.js:7:22)
    at Object.<anonymous> (C:\Git Repos\traces\node_modules\openlayers\dist\ol.js:13:2)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (C:\Git Repos\traces\build\webpack:\external "openlayers":1:1)

This looks like a webpack connected issue in OL3 which was discussed and fixed. However it still doesn't work for me.

I also tried to add script tag with OL3 directly to index.html and removed import of ol in components. This approach works, although I'd like to use Webpack to take care of dependencies.

Thanks in advance for any help!

allenhwkim allenhwkim · Accepted Answer · 2017-02-25T13:37:04

One year later, I created this minimal wrapper react-openlayers.

It is a minimal React wrapper of OpenLayer 3+ written in TypeScript

How to use OpenLayers with react-starter-kit?

1 Answers