ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #8928 from ahocevar/mapbox-style

Browse Source 
Add vector tile example using ol-mapbox-style
This commit is contained in:
Andreas Hocevar
2018-11-13 16:03:31 +01:00
committed by GitHub
parent fd0acaccd1 5bfe7089af
commit cda23e0d53
4 changed files with 48 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/mapbox-style.html
+32
View File
@@ -0,0 +1,32 @@
---
layout: example-verbatim.html
title: Vector tiles created from a Mapbox Style object
shortdesc: Example of using ol-mapbox-style with tiles from tilehosting.com.
tags: "vector tiles, mapbox style, ol-mapbox-style"
cloak:
- key: lirfd6Fegsjkvs0lshxe
value: Your API key from http://tilehosting.com/ here
---
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>Mapbox Style objects with ol-mapbox-style</title>
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<style type="text/css">
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script src="common.js"></script>
<script src="mapbox-style.js"></script>
</body>
</html>
examples/mapbox-style.js
+3
View File
@@ -0,0 +1,3 @@
import apply from 'ol-mapbox-style';
apply('map', 'https://maps.tilehosting.com/styles/bright/style.json?key=ER67WIiPdCQvhgsUjoWK');
examples/webpack/config.js
+11 -2
View File
@@ -1,4 +1,4 @@
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin'); const CopyPlugin = require('copy-webpack-plugin');
const ExampleBuilder = require('./example-builder'); const ExampleBuilder = require('./example-builder');
const fs = require('fs'); const fs = require('fs');
@@ -33,7 +33,7 @@ module.exports = {
}, },
optimization: { optimization: {
minimizer: [ minimizer: [
new UglifyJsPlugin({ new TerserPlugin({
sourceMap: true, sourceMap: true,
// Do not minify examples that inject code into workers // Do not minify examples that inject code into workers
exclude: [/(color-manipulation|region-growing|raster)\.js/] exclude: [/(color-manipulation|region-growing|raster)\.js/]
@@ -65,5 +65,14 @@ module.exports = {
output: { output: {
filename: '[name].js', filename: '[name].js',
path: path.join(__dirname, '..', '..', 'build', 'examples') path: path.join(__dirname, '..', '..', 'build', 'examples')
},
node: {
fs: 'empty' // required by ol-mapbox-stlye
},
resolve: {
alias: {
// allow imports from 'ol/module' instead of specifiying the source path
ol: path.join(__dirname, '..', '..', 'src', 'ol')
}
} }
}; };
package.json
+2 -1
View File
@@ -75,6 +75,7 @@
"marked": "0.5.1", "marked": "0.5.1",
"mocha": "5.2.0", "mocha": "5.2.0",
"mustache": "^3.0.0", "mustache": "^3.0.0",
"ol-mapbox-style": "^3.3.0",
"pixelmatch": "^4.0.2", "pixelmatch": "^4.0.2",
"pngjs": "^3.3.3", "pngjs": "^3.3.3",
"proj4": "2.5.0", "proj4": "2.5.0",
@@ -82,8 +83,8 @@
"rollup": "0.67.1", "rollup": "0.67.1",
"serve-static": "^1.13.2", "serve-static": "^1.13.2",
"sinon": "^6.0.0", "sinon": "^6.0.0",
"terser-webpack-plugin": "^1.1.0",
"typescript": "^3.1.0-dev.20180905", "typescript": "^3.1.0-dev.20180905",
"uglifyjs-webpack-plugin": "^2.0.1",
"url-polyfill": "^1.0.13", "url-polyfill": "^1.0.13",
"walk": "^2.3.9", "walk": "^2.3.9",
"webpack": "4.25.1", "webpack": "4.25.1",