@ -1,2 +1,3 @@ | |||
/node_modules/ | |||
bundle.js | |||
dist/app.js |
@ -1,20 +0,0 @@ | |||
# OpenLayers + Webpack | |||
This example demonstrates how the `ol` package can be used with webpack 2. | |||
Clone the project. | |||
git clone git@gist.github.com:79025aef325cd2837364400a105405b8.git ol-webpack | |||
Install the project dependencies. | |||
cd ol-webpack | |||
npm install | |||
Create a bundle for the browser. | |||
npm run build | |||
Open `index.html` to see the result. | |||
open index.html |
@ -0,0 +1,14 @@ | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta charset="utf-8"> | |||
<title>Using OpenLayers with Webpack</title> | |||
<link rel="stylesheet" href="./main.css" type="text/css"> | |||
<style> | |||
</style> | |||
</head> | |||
<body> | |||
<div id="map"></div> | |||
<script src="./main.js"></script> | |||
</body> | |||
</html> |
@ -0,0 +1,264 @@ | |||
.ol-box { | |||
box-sizing: border-box; | |||
border-radius: 2px; | |||
border: 2px solid blue; | |||
} | |||
.ol-mouse-position { | |||
top: 8px; | |||
right: 8px; | |||
position: absolute; | |||
} | |||
.ol-scale-line { | |||
background: rgba(0,60,136,0.3); | |||
border-radius: 4px; | |||
bottom: 8px; | |||
left: 8px; | |||
padding: 2px; | |||
position: absolute; | |||
} | |||
.ol-scale-line-inner { | |||
border: 1px solid #eee; | |||
border-top: none; | |||
color: #eee; | |||
font-size: 10px; | |||
text-align: center; | |||
margin: 1px; | |||
will-change: contents, width; | |||
} | |||
.ol-overlay-container { | |||
will-change: left,right,top,bottom; | |||
} | |||
.ol-unsupported { | |||
display: none; | |||
} | |||
.ol-viewport, .ol-unselectable { | |||
-webkit-touch-callout: none; | |||
-webkit-user-select: none; | |||
-moz-user-select: none; | |||
-ms-user-select: none; | |||
user-select: none; | |||
-webkit-tap-highlight-color: rgba(0,0,0,0); | |||
} | |||
.ol-selectable { | |||
-webkit-touch-callout: default; | |||
-webkit-user-select: text; | |||
-moz-user-select: text; | |||
-ms-user-select: text; | |||
user-select: text; | |||
} | |||
.ol-grabbing { | |||
cursor: -webkit-grabbing; | |||
cursor: -moz-grabbing; | |||
cursor: grabbing; | |||
} | |||
.ol-grab { | |||
cursor: move; | |||
cursor: -webkit-grab; | |||
cursor: -moz-grab; | |||
cursor: grab; | |||
} | |||
.ol-control { | |||
position: absolute; | |||
background-color: rgba(255,255,255,0.4); | |||
border-radius: 4px; | |||
padding: 2px; | |||
} | |||
.ol-control:hover { | |||
background-color: rgba(255,255,255,0.6); | |||
} | |||
.ol-zoom { | |||
top: .5em; | |||
left: .5em; | |||
} | |||
.ol-rotate { | |||
top: .5em; | |||
right: .5em; | |||
transition: opacity .25s linear, visibility 0s linear; | |||
} | |||
.ol-rotate.ol-hidden { | |||
opacity: 0; | |||
visibility: hidden; | |||
transition: opacity .25s linear, visibility 0s linear .25s; | |||
} | |||
.ol-zoom-extent { | |||
top: 4.643em; | |||
left: .5em; | |||
} | |||
.ol-full-screen { | |||
right: .5em; | |||
top: .5em; | |||
} | |||
@media print { | |||
.ol-control { | |||
display: none; | |||
} | |||
} | |||
.ol-control button { | |||
display: block; | |||
margin: 1px; | |||
padding: 0; | |||
color: white; | |||
font-size: 1.14em; | |||
font-weight: bold; | |||
text-decoration: none; | |||
text-align: center; | |||
height: 1.375em; | |||
width: 1.375em; | |||
line-height: .4em; | |||
background-color: rgba(0,60,136,0.5); | |||
border: none; | |||
border-radius: 2px; | |||
} | |||
.ol-control button::-moz-focus-inner { | |||
border: none; | |||
padding: 0; | |||
} | |||
.ol-zoom-extent button { | |||
line-height: 1.4em; | |||
} | |||
.ol-compass { | |||
display: block; | |||
font-weight: normal; | |||
font-size: 1.2em; | |||
will-change: transform; | |||
} | |||
.ol-touch .ol-control button { | |||
font-size: 1.5em; | |||
} | |||
.ol-touch .ol-zoom-extent { | |||
top: 5.5em; | |||
} | |||
.ol-control button:hover, | |||
.ol-control button:focus { | |||
text-decoration: none; | |||
background-color: rgba(0,60,136,0.7); | |||
} | |||
.ol-zoom .ol-zoom-in { | |||
border-radius: 2px 2px 0 0; | |||
} | |||
.ol-zoom .ol-zoom-out { | |||
border-radius: 0 0 2px 2px; | |||
} | |||
.ol-attribution { | |||
text-align: right; | |||
bottom: .5em; | |||
right: .5em; | |||
max-width: calc(100% - 1.3em); | |||
} | |||
.ol-attribution ul { | |||
margin: 0; | |||
padding: 0 .5em; | |||
font-size: .7rem; | |||
line-height: 1.375em; | |||
color: #000; | |||
text-shadow: 0 0 2px #fff; | |||
} | |||
.ol-attribution li { | |||
display: inline; | |||
list-style: none; | |||
line-height: inherit; | |||
} | |||
.ol-attribution li:not(:last-child):after { | |||
content: " "; | |||
} | |||
.ol-attribution img { | |||
max-height: 2em; | |||
max-width: inherit; | |||
vertical-align: middle; | |||
} | |||
.ol-attribution ul, .ol-attribution button { | |||
display: inline-block; | |||
} | |||
.ol-attribution.ol-collapsed ul { | |||
display: none; | |||
} | |||
.ol-attribution:not(.ol-collapsed) { | |||
background: rgba(255,255,255,0.8); | |||
} | |||
.ol-attribution.ol-uncollapsible { | |||
bottom: 0; | |||
right: 0; | |||
border-radius: 4px 0 0; | |||
height: 1.1em; | |||
line-height: 1em; | |||
} | |||
.ol-attribution.ol-uncollapsible img { | |||
margin-top: -.2em; | |||
max-height: 1.6em; | |||
} | |||
.ol-attribution.ol-uncollapsible button { | |||
display: none; | |||
} | |||
.ol-zoomslider { | |||
top: 4.5em; | |||
left: .5em; | |||
height: 200px; | |||
} | |||
.ol-zoomslider button { | |||
position: relative; | |||
height: 10px; | |||
} | |||
.ol-touch .ol-zoomslider { | |||
top: 5.5em; | |||
} | |||
.ol-overviewmap { | |||
left: 0.5em; | |||
bottom: 0.5em; | |||
} | |||
.ol-overviewmap.ol-uncollapsible { | |||
bottom: 0; | |||
left: 0; | |||
border-radius: 0 4px 0 0; | |||
} | |||
.ol-overviewmap .ol-overviewmap-map, | |||
.ol-overviewmap button { | |||
display: inline-block; | |||
} | |||
.ol-overviewmap .ol-overviewmap-map { | |||
border: 1px solid #7b98bc; | |||
height: 150px; | |||
margin: 2px; | |||
width: 150px; | |||
} | |||
.ol-overviewmap:not(.ol-collapsed) button{ | |||
bottom: 1px; | |||
left: 2px; | |||
position: absolute; | |||
} | |||
.ol-overviewmap.ol-collapsed .ol-overviewmap-map, | |||
.ol-overviewmap.ol-uncollapsible button { | |||
display: none; | |||
} | |||
.ol-overviewmap:not(.ol-collapsed) { | |||
background: rgba(255,255,255,0.8); | |||
} | |||
.ol-overviewmap-box { | |||
border: 2px dotted rgba(0,60,136,0.7); | |||
} | |||
.ol-overviewmap .ol-overviewmap-box:hover { | |||
cursor: move; | |||
} | |||
html, body { | |||
margin: 0; | |||
height: 100%; } | |||
#map { | |||
position: absolute; | |||
top: 0; | |||
bottom: 0; | |||
width: 100%; } | |||
/*# sourceMappingURL=main.css.map*/ |
@ -1,24 +0,0 @@ | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta charset="utf-8"> | |||
<title>Using OpenLayers with Webpack</title> | |||
<link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" type="text/css"> | |||
<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="./bundle.js"></script> | |||
</body> | |||
</html> |
@ -1,18 +0,0 @@ | |||
import {Map, View} from 'ol'; | |||
import TileLayer from 'ol/layer/Tile'; | |||
import XYZ from 'ol/source/XYZ'; | |||
new Map({ | |||
target: 'map', | |||
layers: [ | |||
new TileLayer({ | |||
source: new XYZ({ | |||
url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png' | |||
}) | |||
}) | |||
], | |||
view: new View({ | |||
center: [0, 0], | |||
zoom: 2 | |||
}) | |||
}); |
@ -1,15 +1,24 @@ | |||
{ | |||
"name": "ol-webpack", | |||
"version": "1.0.0", | |||
"description": "Example using OpenLayers with Webpack", | |||
"name": "cccamp19-map", | |||
"version": "0.1.0", | |||
"description": "milliways map", | |||
"scripts": { | |||
"build": "webpack --config webpack.config.js --mode production" | |||
"build": "node_modules/.bin/webpack --config webpack.config.js --mode production", | |||
"dev": "node_modules/.bin/webpack-dev-server --progress --colors --port 8080 --content-base dist --config webpack.config.js" | |||
}, | |||
"devDependencies": { | |||
"webpack": "^4.12.1", | |||
"webpack-command": "^0.3.0" | |||
"webpack": "^4.35.3", | |||
"webpack-cli": "^3.3.5", | |||
"webpack-dev-server": "^3.7.2" | |||
}, | |||
"dependencies": { | |||
"ol": "^5.0.0" | |||
"css-loader": "^3.0.0", | |||
"mini-css-extract-plugin": "^0.7.0", | |||
"node-sass": "^4.12.0", | |||
"ol": "^5.3.3", | |||
"optimize-css-assets-webpack-plugin": "^5.0.3", | |||
"sass-loader": "^7.1.0", | |||
"ts-loader": "^6.0.4", | |||
"uglifyjs-webpack-plugin": "^2.1.3" | |||
} | |||
} |
@ -0,0 +1,145 @@ | |||
import Map from 'ol/Map.js'; | |||
import View from 'ol/View.js'; | |||
import {all as allStrategy} from 'ol/loadingstrategy'; | |||
import {bbox as bboxStrategy} from 'ol/loadingstrategy.js'; | |||
import TileLayer from 'ol/layer/Tile'; | |||
import OSM from 'ol/source/OSM.js'; | |||
import XYZ from 'ol/source/XYZ'; | |||
import {fromLonLat} from 'ol/proj.js'; | |||
import VectorLayer from 'ol/layer/Vector.js'; | |||
import VectorSource from 'ol/source/Vector.js'; | |||
import VectorTileLayer from 'ol/layer/VectorTile.js'; | |||
import VectorTileSource from 'ol/source/VectorTile.js'; | |||
import OSMXML from 'ol/format/OSMXML.js'; | |||
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js'; | |||
const coordinate_cccamp19 = fromLonLat([13.30735, 53.03127]); | |||
var styles = { | |||
'amenity': { | |||
'parking': new Style({ | |||
stroke: new Stroke({ | |||
color: 'rgba(170, 170, 170, 1.0)', | |||
width: 1 | |||
}), | |||
fill: new Fill({ | |||
color: 'rgba(170, 170, 170, 0.3)' | |||
}) | |||
}) | |||
}, | |||
'building': { | |||
'.*': new Style({ | |||
zIndex: 100, | |||
stroke: new Stroke({ | |||
color: 'rgba(246, 99, 79, 1.0)', | |||
width: 1 | |||
}), | |||
fill: new Fill({ | |||
color: 'rgba(246, 99, 79, 0.3)' | |||
}) | |||
}) | |||
}, | |||
'highway': { | |||
'service': new Style({ | |||
stroke: new Stroke({ | |||
color: 'rgba(255, 255, 255, 1.0)', | |||
width: 2 | |||
}) | |||
}), | |||
'.*': new Style({ | |||
stroke: new Stroke({ | |||
color: 'rgba(255, 255, 255, 1.0)', | |||
width: 3 | |||
}) | |||
}) | |||
}, | |||
'landuse': { | |||
'forest|grass|allotments': new Style({ | |||
stroke: new Stroke({ | |||
color: 'rgba(140, 208, 95, 1.0)', | |||
width: 1 | |||
}), | |||
fill: new Fill({ | |||
color: 'rgba(140, 208, 95, 0.3)' | |||
}) | |||
}) | |||
}, | |||
'natural': { | |||
'tree': new Style({ | |||
image: new CircleStyle({ | |||
radius: 2, | |||
fill: new Fill({ | |||
color: 'rgba(140, 208, 95, 1.0)' | |||
}), | |||
stroke: null | |||
}) | |||
}) | |||
} | |||
}; | |||
var vectorSource = new VectorTileSource({ | |||
format: new OSMXML(), | |||
url: 'https://seafile.milliways.info/f/688170149668429f9598/?dl=1', | |||
/*loader: function(extent, resolution, projection) { | |||
var proj = projection.getCode(); | |||
var url = 'https://seafile.milliways.info/f/688170149668429f9598/?dl=1'; | |||
var xhr = new XMLHttpRequest(); | |||
xhr.open('GET', url); | |||
var onError = function(e) { | |||
vectorSource.removeLoadedExtent(extent); | |||
} | |||
xhr.onerror = onError; | |||
xhr.onload = function() { | |||
if (xhr.status == 200) { | |||
vectorSource.addFeatures( | |||
vectorSource.getFormat().readFeatures(xhr.responseText)); | |||
} else { | |||
onError(); | |||
} | |||
} | |||
xhr.send(); | |||
},*/ | |||
strategy: allStrategy | |||
}) | |||
var map = new Map({ | |||
target: 'map', | |||
layers: [ | |||
new TileLayer({ | |||
source: new XYZ({ | |||
url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png' | |||
}) | |||
//source: OSM() | |||
}), | |||
new VectorTileLayer({ | |||
source: vectorSource, | |||
style: function(feature) { | |||
for (var key in styles) { | |||
var value = feature.get(key); | |||
if (value !== undefined) { | |||
for (var regexp in styles[key]) { | |||
if (new RegExp(regexp).test(value)) { | |||
return styles[key][regexp]; | |||
} | |||
} | |||
} | |||
} | |||
return null; | |||
} | |||
}) | |||
], | |||
view: new View({ | |||
center: coordinate_cccamp19, | |||
zoom: 17 | |||
}) | |||
}); | |||
document.map = map; | |||
module.export= { | |||
mapa: map | |||
} |
@ -0,0 +1,13 @@ | |||
@import "~ol/ol.css"; | |||
html, body { | |||
margin: 0; | |||
height: 100%; | |||
} | |||
#map { | |||
position: absolute; | |||
top: 0; | |||
bottom: 0; | |||
width: 100%; | |||
} | |||
@ -1,9 +1,94 @@ | |||
const path = require('path'); | |||
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); | |||
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); | |||
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); | |||
const webpack = require('webpack'); | |||
// Where are your assets located in your project? This would typically be a path | |||
// that contains folders such as: images, stylesheets and javascript. | |||
var rootAssetPath = './assets'; | |||
var debug = true; | |||
module.exports = { | |||
entry: './main.js', | |||
output: { | |||
path: __dirname, | |||
filename: 'bundle.js' | |||
}, | |||
"mode": debug ? "development":"production", | |||
"entry": [ | |||
"./src/app.js", | |||
"./src/app.scss" | |||
], | |||
"output": { | |||
"path": path.join(__dirname, 'dist'), | |||
"filename": "[name].js" | |||
}, | |||
"devtool": "source-map", | |||
/* "resolve": { | |||
"alias":{ | |||
"jquery": "jquery/src/jquery" | |||
} | |||
},*/ | |||
"module": { | |||
"rules": [ | |||
{ | |||
"test": /\.tsx?$/, | |||
"exclude": /node_modules/, | |||
"use": { | |||
"loader": "ts-loader", | |||
"options": { | |||
"transpileOnly": true | |||
} | |||
} | |||
}, | |||
{ | |||
"test": /\.scss$/, | |||
"use": [ | |||
MiniCssExtractPlugin.loader, | |||
// "style-loader", | |||
"css-loader", | |||
"sass-loader" | |||
] | |||
}, | |||
{ | |||
"test": /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, | |||
"use": { | |||
"loader": "url-loader?limit=10000&mimetype=application/font-woff", | |||
"options": { | |||
name: '[path][name].[ext]', | |||
}, | |||
} | |||
}, | |||
{ | |||
"test": /\.(ttf|eot|svg|gif)(\?v=[0-9]\.[0-9]\.[0-9])?$/, | |||
"use": [ | |||
"file-loader" | |||
] | |||
}, | |||
{ | |||
test: /\.css$/, | |||
use: ['style-loader', 'css-loader'], | |||
}, | |||
] | |||
}, | |||
"optimization": { | |||
minimize: !debug, | |||
minimizer: [ | |||
new UglifyJsPlugin({ | |||
include: /\.js$/ | |||
}), | |||
new OptimizeCSSAssetsPlugin({ | |||
include: /\.css$/ | |||
}) | |||
] | |||
}, | |||
"plugins": [ | |||
new webpack.ProvidePlugin({ | |||
$: "jquery", | |||
jQuery: "jquery" | |||
}), | |||
new MiniCssExtractPlugin("[name].css"), | |||
], | |||
devServer: { | |||
contentBase: path.join(__dirname, 'dist'), | |||
compress: true, | |||
port: 8080 | |||
} | |||
}; |