ThomasG77/.gitignore

## .gitignore
/node_modules/
/dist/
/.cache/

## README.md

      
    Raw
  

              README.md
            
          
    Purpose

This is a minimal project for getting started with OpenLayers using Parcel bundler.
If you wonder what is Parcel, think of a powerful & simplified Webpack alternative. Their official motto is "Blazing fast, zero configuration web application bundler"
Requirements

You must have Node installed
You may want to use Yarn instead of Npm to install Node packages but we choose to narrow choice to avoid confusion for beginners.
Install and test the demo

Clone this repository and cd into with:
git clone https://gist.github.com/ThomasG77/c21bb22c875b948b6466fe88b0429dbd.git demo-ol-parceljs
cd demo-ol-parceljs

Install deps with:
npm install

Then do:
npm start

Open http://localhost:1234 to see the result
For production, you may want to run:
npm run build

and serve generated content using dist directory as root.

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Using OpenLayers with Parcel</title>
    <style>
      html, body {
        margin: 0;
        height: 100%;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="./main.js"></script>
  </body>
</html>

## main.js
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZSource from 'ol/source/XYZ';

const map = new Map({
  target: 'map-container',
  layers: [
    new TileLayer({
      source: new XYZSource({
        url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
      })
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

## package.json
{
  "name": "ol-parcel",
  "version": "1.0.0",
  "main": "index.js",
  "description": "Example using OpenLayers with Parcel",
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build --public-url . index.html"
  },
  "keywords": [
    "openlayers",
    "ol",
    "parceljs",
    "babel"
  ],
  "author": "Thomas Gratier",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.13.8",
    "@babel/preset-env": "7.13.8",
    "parcel-bundler": "^1.12.3"
  },
  "dependencies": {
    "ol": "^6.5.0"
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Using OpenLayers with Parcel</title>
	<style>
	html, body {
	margin: 0;
	height: 100%;
	}
	#map {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script src="./main.js"></script>
	</body>
	</html>
	import 'ol/ol.css';
	import {Map, View} from 'ol';
	import TileLayer from 'ol/layer/Tile';
	import XYZSource from 'ol/source/XYZ';

	const map = new Map({
	target: 'map-container',
	layers: [
	new TileLayer({
	source: new XYZSource({
	url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
	})
	})
	],
	view: new View({
	center: [0, 0],
	zoom: 2
	})
	});
	{
	"name": "ol-parcel",
	"version": "1.0.0",
	"main": "index.js",
	"description": "Example using OpenLayers with Parcel",
	"scripts": {
	"start": "parcel index.html",
	"build": "parcel build --public-url . index.html"
	},
	"keywords": [
	"openlayers",
	"ol",
	"parceljs",
	"babel"
	],
	"author": "Thomas Gratier",
	"license": "MIT",
	"devDependencies": {
	"@babel/core": "^7.13.8",
	"@babel/preset-env": "7.13.8",
	"parcel-bundler": "^1.12.3"
	},
	"dependencies": {
	"ol": "^6.5.0"
	}
	}