Skip to content

Instantly share code, notes, and snippets.

@ahocevar

ahocevar/.gitignore Secret

Last active Apr 15, 2020
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"
],
"typeAcquisition": {
"exclude": ["ol"]
}
}
{
"main": "index.js",
"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",
"source-map-loader": "^0.2.4",
"style-loader": "^0.23.1",
"webpack": "^4.41.0",
"webpack-cli": "^3.2.1"
},
"dependencies": {
"ol": "^6.0.0"
}
}
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'
})
]
};
@the-vampiire

This comment has been minimized.

Copy link

@the-vampiire the-vampiire commented Nov 27, 2019

in order for me to get the intellisense i had to install the types directly

$ npm i @types/openlayers -D
@ahocevar

This comment has been minimized.

Copy link
Owner Author

@ahocevar ahocevar commented Nov 28, 2019

@the-vampiire That's a different approach though, and @types/openlayers is incomplete for OpenLayers v5 and not available for v6 at the time of writing.

@the-vampiire

This comment has been minimized.

Copy link

@the-vampiire the-vampiire commented Nov 29, 2019

@the-vampiire That's a different approach though, and @types/openlayers is incomplete for OpenLayers v5 and not available for v6 at the time of writing.

@ahocevar hmm i wonder why the direct clone of your gist didnt work without importing the types. fwiw i am teaching some of my students how to use openlayers and found your project a great starting point for an alternate approach.

i wrote an alternative starter kit and guide (valid for v4.6.5) that doesnt rely on webpack and only uses native ES6 modules. because they are all relatively new to JS (mostly backend devs) i didnt want to overwhelm them with bundlers and configuration overhead. certainly your solution is a better one for a production-ready starter so thank your for sharing.

@the-vampiire

This comment has been minimized.

Copy link

@the-vampiire the-vampiire commented Feb 22, 2020

in case someone else has an issue with the typings i figured out the problem.

there was a cache in ~/Library/Caches/typescript/3.6/node_modules/@types/ol that was conflicting.

run this to clear it then the typings work. thanks @ahocevar

$ rm -rf ~/Library/Caches/typescript/3.6/node_modules/@types/ol
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.