Skip to content

Instantly share code, notes, and snippets.

@ThomasG77
Last active September 19, 2021 08:06
Show Gist options
  • Save ThomasG77/c21bb22c875b948b6466fe88b0429dbd to your computer and use it in GitHub Desktop.
Save ThomasG77/c21bb22c875b948b6466fe88b0429dbd to your computer and use it in GitHub Desktop.
Minimal project to use OpenLayers with Parcel bundler
/node_modules/
/dist/
/.cache/

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.

<!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"
}
}
@Shikombiso
Copy link

the localhost 1234 does not want to work....instead port numbers keep on changing and the project gets to break. How do can i fix this? Pls help

@ThomasG77
Copy link
Author

Made an update

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment