Skip to content

Instantly share code, notes, and snippets.

@ahocevar ahocevar/.gitignore Secret
Last active Apr 4, 2019

Embed
What would you like to do?
IntelliSense and VS Code type checking with OpenLayers 6.x
node_modules/
dist/

To get started:

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

Now you can enjoy IntelliSense and type checking in VS Code. Try modifying index.js 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.js"></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 = new Map({
layers: [new TileLayer({
source: new OSM()
})],
target: 'map',
view: new View({
center: [0, 0],
zoom: 2
})
});
{
"compilerOptions": {
"checkJs": true,
"baseUrl": "./",
"paths": {
"ol": ["node_modules/ol/src"],
"ol/*": ["node_modules/ol/src/*"]
}
},
"include": [
"**/*.js",
"node_modules/ol/**/*.js"
]
}
{
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "ISC",
"devDependencies": {
"css-loader": "^2.1.0",
"html-webpack-plugin": "^3.2.0",
"parcel-bundler": "^1.11.0",
"source-map-loader": "^0.2.4",
"style-loader": "^0.23.1",
"terser": "^3.14.1",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1"
},
"dependencies": {
"ol": "^6.0.0-beta.1"
}
}
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.js$/,
use: ['source-map-loader'],
enforce: 'pre'
},
{
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.