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.
-
-
Save ahocevar/9a7253cb4712e8bf38d75d8ac898e36c to your computer and use it in GitHub Desktop.
IntelliSense and VS Code type checking with OpenLayers 6.x
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| node_modules/ | |
| dist/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 | |
| }) | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "compilerOptions": { | |
| "checkJs": true, | |
| "baseUrl": "./", | |
| "paths": { | |
| "ol": ["node_modules/ol/src"], | |
| "ol/*": ["node_modules/ol/src/*"] | |
| } | |
| }, | |
| "include": [ | |
| "**/*.js", | |
| "node_modules/ol/**/*.js" | |
| ], | |
| "typeAcquisition": { | |
| "exclude": ["ol"] | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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.
@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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
in order for me to get the intellisense i had to install the types directly