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,
}),
});

...

--

--

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