Building web map applications with OpenLayers

mkdir traffic-accidents && cd traffic-accidents
npm init
npm install ol && npm install --save-dev parcel-bundler
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
center: [0, 0],
zoom: 0
})
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Finland Road Traffic Accidents</title>
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="./index.js"></script>
</body>
</html>
{
"name": "traffic-accidents",
"version": "1.0.0",
"description": "Finland road traffic accidents map",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel index.html",
"build": "parcel build --public-url . index.html"
},
"author": "Mingfeng Yu <mingfeng.yu@anders.com>",
"license": "ISC",
"dependencies": {
"ol": "^6.5.0"
},
"devDependencies": {
"parcel-bundler": "^1.12.5"
}
}
npm run start
import { Map, View } from 'ol';
import GeoJSON from 'ol/format/GeoJSON';
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import { bbox as bboxStrategy } from 'ol/loadingstrategy';
import 'ol/ol.css';
import OSM from 'ol/source/OSM';
import VectorSource from 'ol/source/Vector';

// creating vector source and vector layer that consumes WFS features
const trafficAccidentsSource = new VectorSource({
format: new GeoJSON(),
url: (extent) => {
return (
'https://geo.stat.fi/geoserver/tieliikenne/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=tieliikenne:tieliikenne_2019&' +
'outputFormat=application/json&srsname=EPSG:3857&' +
'bbox=' +
extent.join(',') +
',EPSG:3857'
);
},
strategy: bboxStrategy,
});

const trafficAccidentsLayer = new VectorLayer({
source: trafficAccidentsSource,
});

// create OpenStreetMap layer
const osmLayer = new TileLayer({
source: new OSM(),
});

// create map
const map = new Map({
target: 'map',
layers: [osmLayer, trafficAccidentsLayer],
view: new View({
center: [2975296.098311, 9588260.828093],
zoom: 5,
}),
});
...

const trafficAccidentsHeatmapLayer = new HeatmapLayer({
source: trafficAccidentsSource,
blur: 12,
radius: 8,
});

const map = new Map({
target: 'map',
layers: [osmLayer, trafficAccidentsHeatmapLayer],
view: new View({
center: [2975296.098311, 9588260.828093],
zoom: 5,
}),
});

...

--

--

--

Anders is a Finnish IT company, whose mission is sustainable software development with the greatest colleagues of all time.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

An introduction to Deno Deploy

How to build a session authentication system in Express Typescript.

Which fundamental things of JavaScript you should know as a beginner?

Using TypeScript — Class Inheritance and Interfaces

Creating Micro-frontends using Web Components (with support for Angular and React)

Build Your Node JS Application with Koa JS

Svelte Props Passing

Building an Internet-Connected Phone with PeerJS

An image of a corded phone

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anders Innovations

Anders Innovations

Anders is a Finnish IT company, whose mission is sustainable software development with the greatest colleagues of all time.

More from Medium

How to automate the refresh option in google sheets using Google App Script

How to Create GCP Image using GCLOUD Command

Clipboard hazard with Google Sheets

Appending data to Google Sheets using Python and BigQuery