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.
node_modules/ | |
dist/ |
<!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' | |
}) | |
] | |
}; |
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