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

How To Run A JavaScript File With Node.js In Ubuntu

Setup Ant for Salesforce

Why you should generally prefer TypeScript interfaces and custom types over classes

Node.js Basics — MongoDB Comparison Operators

JavaScript Ecma Script-6 important topic for beginners

Using Firebase in a Vue App Vuefire — References and Querying

How to Make Responsive Steps Progress Bar with Vanilla JavaScript

Run a Node JS app in VPS

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

See your Google Search Console Content Performance by Category

Using Chart.js with React to Create a Line Chart Showing Progress Over Time

Museum Rankings based on Visitors Sentiment

The perfect crop with Google Cloud Vision API