Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to import package ? #687

Closed
jalik opened this issue Dec 7, 2018 · 7 comments
Closed

How to import package ? #687

jalik opened this issue Dec 7, 2018 · 7 comments

Comments

@jalik
Copy link

jalik commented Dec 7, 2018

I don't understand how to use this package.
I tried to import in several ways, but I always ended up with errors...
I a m using webpack and I found this link: #594
but it seems the code is stale.

Basically here is what I did based on the doc:

import OLCesium from 'ol-cesium';
// import OLCesium from 'olcs/OLCesium.js';

// ... map declaration

const ol3d = new OLCesium({ map }); // ol2dMap is the ol.Map instance
ol3d.setEnabled(true);

I had errors like Cesium is not defined so I tried to install cesium from npm but don't know how to load it, there's no doc for that.. I am using OL 5.3.0.
@gberaudo
Copy link
Member

Hi @jalik, Cesium is loaded as an external library in the html.
See the examples / https://github.com/openlayers/ol-cesium/blob/516ca63b252fea6148805fe86c73fb4af4beb62f/examples/inject_ol_cesium.js.

@NevenD
Copy link

NevenD commented Jun 11, 2019 •
edited
Loading

I'm having same problem as @jalik

I'm trying to integrate ol-Cesium into my Vue - Openlayers app. But I'm getting this type of error:
"ReferenceError: Cesium is not defined"

I'm using Openlayers v 5.3.0

import OLCesium from 'olcs/OLCesium.js';

const ol3d = new OLCesium({map:  this.$store.getters.olMap}); 
ol3d.setEnabled(true);

@gberaudo
Copy link
Member

Hi @NevenD, Cesium is not part of OL-Cesium.
Basically, this means you need a <script src="path_to_your_cesium_build.js"></script>in your main html.

@NevenD
Copy link

NevenD commented Jun 12, 2019 •
edited
Loading

@gberaudo Thank you for our response. I'm sorry I didn't catch, to be honest. What should I reference in script tag.? OCesium.js file or ...?
It's worth mentioning that I used Vue-CLI 3 to scaffold app.

So, basically, my index.html looks like this:

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta name="Vue-OpenLayers" content="Author: N.D; Wraping OpenLayers inside Vue.js" />
    <link rel="icon" href="<%= BASE_URL %>agrivi.ico" />
    <title>Agrivi - Map</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
    <script href="<%= BASE_URL %>OLCesium.js"></script>
  </head>

  <body>
    <noscript>
      <strong>We're sorry but web-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Then as I wrote I tried to install the package as an ES6 library npm i --save olcs.
Didn't work.

I tried to reference OLCesium as a script in idex.html but without any luck

@gberaudo
Copy link
Member

@NevenD, you simply need to add this line before the OLCesium script:
<script href="https://cesiumjs.org/releases/1.58/Build/Cesium/Cesium.js"></script>

@NevenD
Copy link

NevenD commented Jun 14, 2019

@gberaudo Ok, thank you. It works now. Keep up the good work :)

@itegmark
Copy link

This worked for me:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/Build/Cesium/Cesium.js"></script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@itegmark @jalik @gberaudo @NevenD