openlayers · ca0v · Aug 24, 2020 · Aug 24, 2020 · Aug 24, 2020 · Aug 25, 2020
diff --git a/doc/en/README.md b/doc/en/README.md
@@ -28,4 +28,5 @@ The following modules will be covered in this workshop:
 * [WebGL Rendering](webgl/README.md) - Rendering meteorite impact sites with WebGL.
 * [Vector Tiles](vectortile/README.md) - Create beautiful maps with vector tiles.
 * [Raster Operations](raster/README.md) - Manipulating pixels with a raster source.
+* [Typescript](typescript/README.md) - Learn how to add a map to a webpage.
 * [Deploying](deploying/README.md) - Building applications for production.
diff --git a/doc/en/SUMMARY.md b/doc/en/SUMMARY.md
@@ -25,4 +25,5 @@
   * [Map setup](raster/map.md)
   * [Render elevation data](raster/elevation.md)
   * [Render sea level](raster/raster.md)
+* [Typescript](typescript/README.md)
 * [Deploying](deploying/README.md)
diff --git a/doc/en/typescript/README.md b/doc/en/typescript/README.md
@@ -0,0 +1,15 @@
+# Typescript
+
+Make sure you've completed the [Basics](../basics/README.md).
+
+Typescript should already be installed, but if not:
+
+    npm i typescript -D
+
+The openlayers typings should already be installed, but if not:
+
+    npm i @types/ol -D
+
+Start the typescript transpiler in watch mode using the `tsc` script:
+
+    npm run tsc
diff --git a/doc/en/typescript/map.png b/doc/en/typescript/map.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/en/examples/typescript/main.ts b/src/en/examples/typescript/main.ts
@@ -0,0 +1,20 @@
+import "ol/ol.css";
+import { Map, View } from "ol";
+import TileLayer from "ol/layer/Tile";
+import XYZSource from "ol/source/XYZ";
+import { fromLonLat } from "ol/proj";
+
+new Map({
+  target: "map-container",
+  layers: [
+    new TileLayer({
+      source: new XYZSource({
+        url: "http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg",
+      }),
+    }),
+  ],
+  view: new View({
+    center: fromLonLat([0, 0]),
+    zoom: 2,
+  }),
+});
diff --git a/src/en/examples/typescript/map.html b/src/en/examples/typescript/map.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>OpenLayers</title>
+  <style>
+    html,
+    body,
+    #map-container {
+      margin: 0;
+      height: 100%;
+      width: 100%;
+      font-family: sans-serif;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="map-container"></div>
+</body>
+
+</html>
diff --git a/src/en/examples/typescript/tsconfig.json b/src/en/examples/typescript/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2015", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+    "module": "ES2015", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    "strict": true, /* Enable all strict type-checking options. */
+    "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    "skipLibCheck": true, /* Skip type checking of declaration files. */
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
+  },
+  "files": [
+    "./main.ts"
+  ]
+}