1

The OpenLayers community provides many great examples on this page: https://openlayers.org/en/latest/examples/index.html

On each example there is a copy button to copy the code. But in this copied code they have imports like:

import Feature from 'ol/Feature.js';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import Polyline from 'ol/format/Polyline.js';
import Point from 'ol/geom/Point.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import BingMaps from 'ol/source/BingMaps.js';
import VectorSource from 'ol/source/Vector.js';
import {Circle as CircleStyle, Fill, Icon, Stroke, Style} from 'ol/style.js';

Sorry for the maybe stupid question:

Where do I get this *.js files from?

How can I get quickly the examples to run on my local machine?

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Oliver Karst
  • 39
  • 1
  • 6
  • 2
    Did you read this? http://openlayers.org/en/latest/doc/tutorials/bundle.html – Reinstate Monica Cellio Jul 02 '18 at 14:31
  • yes i advice to read the tutorial and come back when your stuck. – JanWillem Huising Jul 02 '18 at 14:39
  • I've already made a summary at https://stackoverflow.com/questions/51093964/why-examples-dont-work-a-struggle-with-imports/51110511#51110511 – Thomas Gratier Jul 02 '18 at 15:39
  • Thank you so much for the help. @Archer: you're link to the doc/tutorials/bundle helped me a lot, and I found as well https://github.com/openlayers/ol-parcel and https://github.com/openlayers/ol-webpack. On my Mac with node v8.9.4 and npm 6.1.0 is after npm install only a package-lock.json available, no package.json. It seems to me that for new node/npm versions the doc/tutorials/bundle needs maybe an update? But it helped me a lot and I got it with the package.json from github. – Oliver Karst Jul 05 '18 at 14:46
  • @ThomasGratier: the codesandbox.io sample from your tweet https://twitter.com/openlayers/status/924003219293925376 looks really interesting to me. Great! – Oliver Karst Jul 05 '18 at 15:03
  • PS: it's not my tweet :) but one of the OpenLayers official Twitter account. I was just referencing it. – Thomas Gratier Jul 05 '18 at 15:33

3 Answers3

2
  1. Install npm : https://www.npmjs.com/get-npm,
  2. Check after installation, from command prompt run : node -v
  3. run : npm -v
  4. Make sure that you have last update npm , from command prompt run: npm install npm@latest -g
  5. Create a new project folder
  6. From command prompt: cd to the new project created in nr. 5
  • To create package.json in your project folder ,run: npm init. I just leave the default value for first, you could always edit the file after that
  • run : npm install ol
  • run : npm install --save-dev parcel-bundler
  • edit package.json, create index.js and index.html as shown in https://openlayers.org/en/latest/doc/tutorials/bundle.html
  • run : npm start

Result in: http://localhost:1234/

Cosmin Staicu
  • 1,809
  • 2
  • 20
  • 27
esy
  • 21
  • 2
1

After the helpful hints here I found as well helpful documentation in npm docs here https://www.npmjs.com/package/ol with ol examples on github for using webpack https://github.com/openlayers/ol-webpack or using parcel https://github.com/openlayers/ol-parcel.

Oliver Karst
  • 39
  • 1
  • 6
0

All these *.js file are define in ol package. Here is a link for all classes and namespace defined in ol package.

https://openlayers.org/en/latest/apidoc/ol.html

Aman kumar
  • 54
  • 7