Unexpected token Identifier error - Import OpenLayers
Clash Royale CLAN TAG#URR8PPP
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
javascript openlayers
add a comment |
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
javascript openlayers
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
add a comment |
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
javascript openlayers
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
javascript openlayers
javascript openlayers
asked Jan 30 at 15:32
Felipe AndrioliFelipe Andrioli
234
234
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
add a comment |
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
Usually, the line where the error occurs is indicated in the log.
– Stefan
Jan 30 at 15:38
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
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
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
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
add a comment |
2 Answers
2
active
oldest
votes
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 useNew ol.Map
- instead of
New View
you useNew ol.View
- instead of
New OSM
you useNew ol.source.OSM
- instead of
fromLonLat
you useol.proj.fromLonLat
Compare this with the import
statements and you'll see the logic.
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
add a comment |
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.
add a comment |
Your Answer
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "79"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f310482%2funexpected-token-identifier-error-import-openlayers%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 useNew ol.Map
- instead of
New View
you useNew ol.View
- instead of
New OSM
you useNew ol.source.OSM
- instead of
fromLonLat
you useol.proj.fromLonLat
Compare this with the import
statements and you'll see the logic.
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
add a comment |
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 useNew ol.Map
- instead of
New View
you useNew ol.View
- instead of
New OSM
you useNew ol.source.OSM
- instead of
fromLonLat
you useol.proj.fromLonLat
Compare this with the import
statements and you'll see the logic.
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
add a comment |
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 useNew ol.Map
- instead of
New View
you useNew ol.View
- instead of
New OSM
you useNew ol.source.OSM
- instead of
fromLonLat
you useol.proj.fromLonLat
Compare this with the import
statements and you'll see the logic.
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 useNew ol.Map
- instead of
New View
you useNew ol.View
- instead of
New OSM
you useNew ol.source.OSM
- instead of
fromLonLat
you useol.proj.fromLonLat
Compare this with the import
statements and you'll see the logic.
edited Jan 30 at 18:30
answered Jan 30 at 17:07
TomazicMTomazicM
996216
996216
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
add a comment |
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
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
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
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
add a comment |
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.
add a comment |
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.
add a comment |
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.
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.
answered Feb 8 at 17:27
ahocevarahocevar
2,5091713
2,5091713
add a comment |
add a comment |
Thanks for contributing an answer to Geographic Information Systems Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f310482%2funexpected-token-identifier-error-import-openlayers%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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