OpenLayers - chanandrew96/MyLearning GitHub Wiki

OpenLayers

Installation (Native)

  1. Download the release from OpenLayers
  2. Unzip and copy the unzipped folder into your project
  3. Import the files using <link> and <script> 
<link rel="stylesheet" href="./ol-package/ol.css">
<script src="./ol-package/dist/ol.js"></script>

Start using OpenLayers in your JavaScript

External JS File

Use the import function to import all the components you need
Example:

import './style.css';
import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';

Script Block in HTML

Once you added ol.js using the <script> tag, you can use the component like ol.source.OSM() or ol.layer.Tile
Sample code for using OpenLayers to show image:

const extent = [0, 0, 1024, 968];

const projection = new ol.proj.Projection({
  code: 'xkcd-image',
  units: 'pixels',
  extent: extent,
});

// Create the Viewer
var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Image({
            source: new ol.source.ImageStatic({
                attributions: '<a href="https://dummyimage.com/600x400/000/fff">Dummy Image</a>',
                url: 'https://dummyimage.com/600x400/000/fff',
                projection: projection,
                imageExtent: extent,
            })
        })
    ],
    view: new ol.View({
        projection: projection,
        center: ol.extent.getCenter(extent),
        zoom: 2,
        maxZoom: 8,
    })
});
⚠️ **GitHub.com Fallback** ⚠️