ahocevar/.gitignore Secret

## .gitignore
node_modules/
dist/

## README.md

      
    Raw
  

              README.md
            
          
    To get started:
git clone https://gist.github.com/ahocevar/ad7b52a2fa0f6c5495193cd695ab3780.git ol-ts
cd ol-ts
npm install
code .

Now you can enjoy IntelliSense and type checking in VS Code. Try modifying index.ts to see how it's working.

  
## index.html
<!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.ts"></script>
  </body>
</html>

## index.ts
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import { OSM } from 'ol/source';

const map: Map = new Map({
  layers: [new TileLayer({
    source: new OSM()
  })],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

## package.json
{
  "main": "index.ts",
  "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",
    "style-loader": "^0.23.1",
    "ts-loader": "^7.0.0",
    "typescript": "^3.8.3",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.2.1"
  },
  "dependencies": {
    "ol": "^6.3.1"
  }
}

## tsconfig.json
{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": "./",
    "paths": {
      "ol": ["node_modules/ol/src"],
      "ol/*": ["node_modules/ol/src/*"]
    }
  },
  "include": [
    "**/*.ts",
    "node_modules/ol/**/*"
  ],
  "typeAcquisition": {
    "exclude": ["ol"]
  }
}

## webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './index.ts',
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
    alias: {
      'ol': require('path').resolve(__dirname, 'node_modules/ol/src')
    }
  },
  output: {
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html'
    })
  ]
};
	<!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.ts"></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: Map = new Map({
	layers: [new TileLayer({
	source: new OSM()
	})],
	target: 'map',
	view: new View({
	center: [0, 0],
	zoom: 2
	})
	});
	{
	"main": "index.ts",
	"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",
	"style-loader": "^0.23.1",
	"ts-loader": "^7.0.0",
	"typescript": "^3.8.3",
	"webpack": "^4.41.0",
	"webpack-cli": "^3.2.1"
	},
	"dependencies": {
	"ol": "^6.3.1"
	}
	}
	{
	"compilerOptions": {
	"allowJs": true,
	"baseUrl": "./",
	"paths": {
	"ol": ["node_modules/ol/src"],
	"ol/": ["node_modules/ol/src/"]
	}
	},
	"include": [
	"*/.ts",
	"node_modules/ol/*/"
	],
	"typeAcquisition": {
	"exclude": ["ol"]
	}
	}
	const HtmlWebpackPlugin = require('html-webpack-plugin');

	module.exports = {
	entry: './index.ts',
	resolve: {
	extensions: [ '.tsx', '.ts', '.js' ],
	alias: {
	'ol': require('path').resolve(__dirname, 'node_modules/ol/src')
	}
	},
	output: {
	filename: 'bundle.js'
	},
	devtool: 'source-map',
	module: {
	rules: [
	{
	test: /\.tsx?$/,
	use: 'ts-loader',
	exclude: /node_modules/,
	},
	{
	test: /\.css$/,
	use: ['style-loader', 'css-loader'],
	},
	],
	},
	plugins: [
	new HtmlWebpackPlugin({
	template: 'index.html'
	})
	]
	};