Skip to content

Instantly share code, notes, and snippets.

@ahocevar

ahocevar/.gitignore Secret

Last active Sep 1, 2020
Embed
What would you like to do?
VS Code IntelliSense and TypeScript with OpenLayers 6.x
node_modules/
dist/

To get started:

git clone https://gist.github.com/ahocevar/ad7b52a2fa0f6c5495193cd695ab3780.git ol-ts
cd ol-ts
npm install
code .

Now you can enjoy IntelliSense and type checking in VS Code. Try modifying index.ts to see how it's working.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="index.ts"></script>
</body>
</html>
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import { OSM } from 'ol/source';
const map: Map = new Map({
layers: [new TileLayer({
source: new OSM()
})],
target: 'map',
view: new View({
center: [0, 0],
zoom: 2
})
});
{
"main": "index.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"license": "ISC",
"devDependencies": {
"css-loader": "^2.1.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"ts-loader": "^7.0.0",
"typescript": "^3.8.3",
"webpack": "^4.41.0",
"webpack-cli": "^3.2.1"
},
"dependencies": {
"ol": "^6.3.1"
}
}
{
"compilerOptions": {
"allowJs": true,
"baseUrl": "./",
"paths": {
"ol": ["node_modules/ol/src"],
"ol/*": ["node_modules/ol/src/*"]
}
},
"include": [
"**/*.ts",
"node_modules/ol/**/*"
],
"typeAcquisition": {
"exclude": ["ol"]
}
}
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './index.ts',
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
alias: {
'ol': require('path').resolve(__dirname, 'node_modules/ol/src')
}
},
output: {
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html'
})
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.