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' | |
}) | |
] | |
}; |
@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.
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
@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.