javascripthtmlnpmopenlayers

How to use Javascript Files instead of NPM as a Library (Specifically for Open Layers)

I have been trying to get open layers to work in my Eclipse web development environment for a while now. All of the setup instructions on the Open Layers site deal with using npm. However, they also have a link to a distro that has ol.js, ol.js.map, ol.css, and ol.css.map in it. In their workshop, they have a javascript file that looks like this:

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZSource from 'ol/source/XYZ';
import {fromLonLat} from 'ol/proj';

new Map({
  target: 'map-container',
  layers: [
    new TileLayer({
      source: new XYZSource({
        url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
      })
    })
  ],
  view: new View({
    center: fromLonLat([0, 0]),
    zoom: 2
  })
});

What I am struggling with is how to modify it to use the java script files instead of the npm libraries. I imagine this part would be the only thing that would change.

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZSource from 'ol/source/XYZ';
import {fromLonLat} from 'ol/proj';

I tried to put the files in a folder and change the import code to:

import './lib/ol.css'
import {Map, View} './lib/ol.js'
import TileLayer from './lib/ol.js';
import XYZSource from './lib/ol.js';
import {fromLonLat} from './lib/ol.js';

That didn't work. Probably because I don't totally understand what's happening. I read that a js file can be used as a library, so I thought I could just reference the file.

They also have an html file as part of tutorial, since I am not using npm, do I have to change that as well? I assume since they are instructing to put both the js file and the html file at the root of the project they can just reference the other (as the js file would import the css and html file would use that), but I'm not totally sure. This is the html for reference:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>OpenLayers</title>
    <style>
      html, body, #map-container {
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="map-container"></div>
  </body>
</html>

Can anyone help me out? Thank you for your time.

Solution

  • If you want to use ol.js, ol.css; you need to use the namespace ol. in the code.

    An example of how to do this is shown in the archived (on archive.org) version of the quickstart guide

    (that page has been removed from the official documentation previous link and replaced with instuctions on how to use NPM)

    Modifying your posted code:

    new ol.Map({
  target: 'map-container',
  layers: [
    new ol.layer.Tile({ // TileLayer({
      source: new ol.source.XYZ({ // XYZSource({
        url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
      }) 
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([0, 0]),
    zoom: 2
  })
});

    screenshot of resulting map

    working code snippet:

    new ol.Map({
  target: 'map-container',
  layers: [
    new ol.layer.Tile({ // TileLayer({
      source: new ol.source.XYZ({ // XYZSource({
        url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
      }) 
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([0, 0]),
    zoom: 2
  })
});
    html, body, #map-container {
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: sans-serif;
      }
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
<div id="map-container"></div>