Unexpected token Identifier error - Import OpenLayers












1















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









share|improve this question























  • 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


















1















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









share|improve this question























  • 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
















1












1








1








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









share|improve this question














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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Jan 30 at 15:32









Felipe AndrioliFelipe Andrioli

184




184













  • 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











  • 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












1 Answer
1






active

oldest

votes


















2














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.






share|improve this answer


























  • 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
    2 days ago













  • 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
    yesterday











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
});


}
});














draft saved

draft discarded


















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

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









2














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.






share|improve this answer


























  • 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
    2 days ago













  • 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
    yesterday
















2














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.






share|improve this answer


























  • 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
    2 days ago













  • 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
    yesterday














2












2








2







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.






share|improve this answer















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.







share|improve this answer














share|improve this answer



share|improve this answer








edited Jan 30 at 18:30

























answered Jan 30 at 17:07









TomazicMTomazicM

782215




782215













  • 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
    2 days ago













  • 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
    yesterday



















  • 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
    2 days ago













  • 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
    yesterday

















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
2 days ago







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
2 days ago















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
yesterday





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
yesterday


















draft saved

draft discarded




















































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.




draft saved


draft discarded














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





















































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







Popular posts from this blog

How to change which sound is reproduced for terminal bell?

Title Spacing in Bjornstrup Chapter, Removing Chapter Number From Contents

Can I use Tabulator js library in my java Spring + Thymeleaf project?