I'm trying to use some OpenLayers libraries in my code, and called him in JavaScript like this:

  import Map from 'ol/Map.js';
  import Overlay from 'ol/Overlay.js';
  import View from 'ol/View.js';
  import {toStringHDMS} from 'ol/coordinate.js';
  import TileLayer from 'ol/layer/Tile.js';
  import {fromLonLat, toLonLat} from 'ol/proj.js';
  import OSM from 'ol/source/OSM.js';

But I'm receiving the following error:

  error unexpected identifier
  • Usually, the line where the error occurs is indicated in the log. – Stefan Jan 30 at 15:38
  • The error occurs in every import that I put in my code, if I take it out from the code the error does not occurs anymore, however I've stay without the libraries – Felipe Andrioli Jan 30 at 15:41
  • What's your environment? node.js? Browser? – Stefan Jan 30 at 15:48
  • I'm running in the browser, Chrome specifically, would I have to run it on node.js to avoid these errors? – Felipe Andrioli Jan 30 at 15:51

This form is inteneded for development environment (like node.js and npm), where you can run it uncompiled and then has to compiled to be run on the client side.

If you don't have required development environment (like me), you first need full build of the OpenLayers library (ol.js, see https://openlayers.org/download/). Then you have to learn how to reference objects/methods that you see in examples intended for development environment. Once you learn it, it's quite simple.

For example:

  • instead of New Map you use New ol.Map
  • instead of New View you use New ol.View
  • instead of New OSM you use New ol.source.OSM
  • instead of fromLonLat you use ol.proj.fromLonLat

Compare this with the import statements and you'll see the logic.

  • 1
    It is not recommended to use the full build of OpenLayers, and there will probably be no full build provided for future versions any more. Setting up a modern JavaScript development environment is easy. The OpenLayers website has a good tutorial:openlayers.org/en/latest/doc/tutorials/bundle.html. The reward is a better development experience, smaller JavaScript files and faster application loading. – ahocevar Feb 5 at 19:52
  • I'm in this business for about 45 years now, so I saw about all. Up to about 15 years ago develompent of tools went like this: what professional developers and admins needed that's what they got. Then situation turned into what I call political. Companies started to say: developers and admins are incompetent, they don't really know what is good for them, but WE know exactly what's good for them. And from then on everyting went downwards. OpenLayers is typical example of this. In older versions capabilities were added and added, now they are removed. I hope that Leaflet won't go this way. – TomazicM Feb 6 at 9:36

OpenLayers is intended to be used as npm package (https://npmjs.com/package/ol) inside a node/npm based environment. The code you pasted in the question cannot run directly in the browser. It needs to be bundled, using a tool like Webpack or Parcel.

The OpenLayers website provides a good tutorial on how to do this: https://openlayers.org/en/latest/doc/tutorials/bundle.html.

The confusion probably comes from the examples on the current website, which make the code look as if they can run directly in the browser. This has been fixed with https://github.com/openlayers/openlayers/pull/9103, and the website will be updated with the next release, which is scheduled for later this month.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.