OpenLayers

Introduction
Objectives
Features
Basic Concepts

Part 1

CONTROLS
INTERACTIONS
SOURCES & FORMATS
PROJECTIONS

Part 2

API :

API - Control

A visible widget with a DOM element in a fixed position on the screen.

By default these are placed in the container with CSS class name ol-overlaycontainer-stopevent, but can use any outside DOM element.

API - Control

ol.control.ScaleLine

A control displaying rough x-axis distances, calculated for the center of the viewport.

For conformal projections (e.g. EPSG:3857, the default view projection in OpenLayers), the scale is valid for all direction

controls: ol.control.defaults().extend([new ol.control.ScaleLine({
        className: 'petabp-scale-line ol-scale-line'
      })]),

API - Interaction

Set of interactions included in maps by default.

Specific interactions can be excluded by setting the appropriate option to false in the constructor options, but the order for interactions is fixed.

API - Interaction

The default set of interactions in sequence :

API - Interaction

this.map = new ol.Map({
      target: 'map',
      interactions: ol.interaction.defaults({
        mouseWheelZoom: false
      }),

  var drawMarkerPoints = new ol.interaction.Draw({
      type: "Point",
      source: this.markerSource
    });

- Interaction that allows drawing geometries

API - Sources & Formats

Tile sources => ol.layer.Tile

Vector sources => ol.layer.Vector

Image sources => ol.layer.Image

Formats for reading/writing vector data => ol.format.WMSCapabilities

API - Sources & Formats

Tile sources => ol.layer.Tile
source : ol.source.XYZ

- Layer source for tile data with URLs in a set XYZ format that are defined in a URL template. By default, this follows the widely-used Google grid where x 0 and y 0 are in the top left. Grids like TMS where x 0 and y 0 are in the bottom left can be used by using the {-y} placeholder in the URL template, so long as the source does not have a custom tile grid

var baseLayer;
    if(isProduction) {
      baseLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
          url: '/basemap/xyz/DOSM/Desktop/?z={z}&y={y}&x={x}'
        })
      });

API - Sources & Formats

Tile sources => ol.layer.Tile
source : ol.source.TileWMS

- Layer source for tile data from WMS servers.

 var buLayer = new ol.layer.Tile({
      source: new ol.source.TileWMS({
        serverType: 'geoserver',
        url: wmsBaseUrl,
        params: {
          LAYERS: 'dsm:bu'
        }
      })
    });

API - Sources & Formats

Image sources => ol.layer.Image

- ol.source.ImageWMS

- ol.source.ImageCanvas

- ol.source.ImageStatic

- ol.source.ImageMapGuide

- ol.source.ImageArcGISRest

Subclasses:

API - Sources & Formats

Vector sources => ol.layer.Vector
source : ol.source.TileWMS

- Provides a source of features for vector layers.

- Vector features provided by this source are suitable for editing.

this.ebSource = new ol.source.Vector();
    var ebLayer = new ol.layer.Vector({
      source: this.ebSource,
      style: new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: "rgb(192,0,0)",
          width: 2
        })
      })
    });

API - Sources & Formats

https://openlayers.org/en/latest/examples/vector-layer.html

Vector sources => ol.layer.Vector
source : ol.source.TileWMS

API - Sources & Formats

Formats for reading/writing vector data => ol.format.GeoJSON
format : ol .format.GeoJSON

- Format for reading and writing data in the GeoJSON format

 mounted() {
    this.gjFormat = new ol.format.GeoJSON({
      featureProjection: 'EPSG:3857'
    });

API - Features

A vector object for geographic features with a geometry and other attributes properties, similar to the features in vector file formats like GeoJSON.
format : ol.Feature

var feature = new ol.Feature({
  geometry: new ol.geom.Polygon(polyCoords),
  labelPoint: new ol.geom.Point(labelCoords),
  name: 'My Polygon'
});

// get the polygon geometry
var poly = feature.getGeometry();

// Render the feature as a point using the coordinates from labelPoint
feature.setGeometryName('labelPoint');

// get the point geometry
var point = feature.getGeometry();

API - Features

DRAW_POINTS(payload) {
      // Draw the points on the map + set label
      let { label, coordinates } = payload;
      let newCurrentFeature = new ol.Feature(new ol.geom.Point(coordinates));
      newCurrentFeature.set("text", label);
      this.markerSource.addFeature(newCurrentFeature);

      // Push the points to the submit object
      this.PUSH_POINTS_TO_SUBMIT({label, coordinates});
    },

Projection

All coordinates and extents need to be provided in view projection (default: EPSG:3857)

//Transforms a coordinate from longitude/latitude to a different projection.
this.mapView = new ol.View({
      center: ol.proj.fromLonLat([101.5183469, 3.0738379]),
      zoom: 12,
      minZoom: 11,
      maxZoom: 19
});

REFERENCES

https://openlayers.org/en/latest/doc/

https://geoadmin.github.io/ol3/apidoc/?stableonly=true

https://en.wikipedia.org/wiki/OpenLayers

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

https://github.com/openlayers/ol-parcel

Introduction

A high-performance, feature-packed library for all your mapping needs

Open Source JavaScript

Introduction

Client side JavaScript library for making interactive web map

Objectives

Easy to put a dynamic map in any web page

Can display map tiles, vector data and markers loaded from any source.

Features

Tiled Layers

Easy to Customize & Extend

Vector Layers

Cutting Edge, Fast & Mobile Ready

Features

Tiled Layers

Pull tiles from OSM, Bing, MapBox, Stamen, and any other XYZ source you can find.

Support OGC mapping services and untiled layers

Features

Vector Layers

Render vector data from GeoJSON, TopoJSON, KML, GML, Mapbox ventor tiles and other formats

Features

Cutting Edge, Fast & Mobile Ready

Leverages Canvas 2D, WebGL, and all the latest greatness from HTML5.

Mobile support out of the box. Build lightweight custom profiles with just the components you need

Features

Easy to Customize and Extend

Style your map controls with straight-forward CSS.

Hook into different levels of the API or use 3rd party libraries to customize and extend functionality

Basic Concepts

Map

Core component (ol/Map)
It rendered to a target container (example: a div element on the web page that contains the map)

import Map from 'ol/Map';

var map = new Map({target: 'map'});

//dsl job-assignment.js
    this.map = new ol.Map({
      target: 'ol-map-eb',
      layers: [baseLayer, ebLayer],
      view: this.mapView
    });

Basic Concepts

View

Responsible for things like zoom level and projection of the map
Projection : determines the coordinate system of the center and units for map resolution calculations.
Default projection is Spherical Mercator (EPSG:3857) with meters as map units.

Basic Concepts

View

import View from 'ol/View';

map.setView(new View({
  center: [0, 0],
  zoom: 2
}));

//dsl job-assignment
 this.map = new ol.Map({
      target: 'ol-map-eb',
      layers: [baseLayer, ebLayer],
      view: this.mapView
    });
    this.gjFormat = new ol.format.GeoJSON({
      featureProjection: 'EPSG:3857'
    });

Basic Concepts

Source

To get remote data for a layer, OpenLayers uses ol/source/Source subclass

Available for free & commercials map tile services - OpenStreetMap/Bing
- OCG sources like WMS/WMTS
- Vector data in formats like GeoJSON/KML

Basic Concepts

import OSM from 'ol/source/OSM';

var osmSource = OSM();

//dsl job-assignment
   this.gjFormat = new ol.format.GeoJSON({
      featureProjection: 'EPSG:3857'
    });

Source

Basic Concepts

Layer

A visual representation of data from a source

Basic types of layers

Tile
- Renders sources that provide tiled images in grids that are organized by zoon levels for specific resolutions.
Image
- Renders sources that provide map images at arbitrary extents and resolutions

Basic Concepts

Layer

Basic types of layers

3. Vector
- Renders vector data client-side

4. VectorTile
- Renders data that is provided as vector tiles

Basic Concepts

Layer

import TileLayer from 'ol/layer/Tile';

var osmLayer = new TileLayer({source: osmSource});
map.addLayer(osmLayer);

//dsl job-assignment - Tile
   var baseLayer = new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: basemapUrl
      })
    });

 dsl job-assignment.js - Vector
 // prepare eb layer
    this.ebSource = new ol.source.Vector();
    var ebLayer = new ol.layer.Vector({
      source: this.ebSource,
      style: function style(feature) {
        return new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'red',
            width: 2
          }),
          fill: new ol.style.Fill({
            color: [255, 0, 0, 0.1]
          }),
          text: new ol.style.Text({
            font: '12px Arial',
            fill: new ol.style.Fill({
              color: 'black'
            }),
            text: feature.get('ngdbbp') || ''
          })
        });
      }
    });

Companies use OpenLayers

References

https://openlayers.org/en/latest/doc/tutorials/concepts.html

https://geos.ed.ac.uk/~bmg/software/OpenLayers.2.10.Beginners.Guide2.pdf

https://www.slideshare.net/oprohonnyi/openlayers-basics

https://www.npmjs.com/package/ol

OpenLayers

Contents

Introduction

Objectives

Features

Basic Concepts

Part 1

Contents

CONTROLS

INTERACTIONS

SOURCES & FORMATS

PROJECTIONS

Part 2

API :

API - Control

A visible widget with a DOM element in a fixed position on the screen.

By default these are placed in the container with CSS class name ol-overlaycontainer-stopevent, but can use any outside DOM element.

API - Control

API - Interaction

Set of interactions included in maps by default.

Specific interactions can be excluded by setting the appropriate option to false in the constructor options, but the order for interactions is fixed.

API - Interaction

The default set of interactions in sequence :

API - Interaction

API - Sources & Formats

Tile sources => ol.layer.Tile

Vector sources => ol.layer.Vector

Image sources => ol.layer.Image

Formats for reading/writing vector data => ol.format.WMSCapabilities

API - Sources & Formats

Tile sources => ol.layer.Tile

API - Sources & Formats

Tile sources => ol.layer.Tile

API - Sources & Formats

Image sources => ol.layer.Image

API - Sources & Formats

Vector sources => ol.layer.Vector

API - Sources & Formats

Vector sources => ol.layer.Vector

API - Sources & Formats

Formats for reading/writing vector data => ol.format.GeoJSON

API - Features

A vector object for geographic features with a geometry and other attributes properties, similar to the features in vector file formats like GeoJSON.

API - Features

Projection

All coordinates and extents need to be provided in view projection (default: EPSG:3857)

REFERENCES

Introduction

A high-performance, feature-packed library for all your mapping needs

Open Source JavaScript

Introduction

Client side JavaScript library for making interactive web map

Objectives

Easy to put a dynamic map in any web page

Can display map tiles, vector data and markers loaded from any source.

Features

Tiled Layers

Easy to Customize & Extend

Vector Layers

Cutting Edge, Fast & Mobile Ready

Features

Tiled Layers

Features

Vector Layers

Features

Cutting Edge, Fast & Mobile Ready

Features

Easy to Customize and Extend

Basic Concepts

Map

Core component (ol/Map)

It rendered to a target container (example: a div element on the web page that contains the map)

Basic Concepts

View

Responsible for things like zoom level and projection of the map

Projection : determines the coordinate system of the center and units for map resolution calculations.

Default projection is Spherical Mercator (EPSG:3857) with meters as map units.

Basic Concepts

View

Basic Concepts

Available for free & commercials map tile services - OpenStreetMap/Bing
- OCG sources like WMS/WMTS
- Vector data in formats like GeoJSON/KML