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

Add vector tile example using ol-mapbox-style

Browse Source
This commit is contained in:
ahocevar
2018-11-13 13:51:28 +01:00
parent 647421f07b
commit 391fff38aa
4 changed files with 48 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
examples/mapbox-style.html Normal file
View File

@@ -0,0 +1,32 @@
---
layout: example-verbatim.html
title: Vector tiles creatde from a Mapbox Style object
shortdesc: Example of using ol-mapbox-style with tiles from tilehosting.com.
tags: "fullscreen, geolocation, mobile"
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>

3
examples/mapbox-style.js Normal file
View File

@@ -0,0 +1,3 @@
import apply from 'ol-mapbox-style';
apply('map', 'https://maps.tilehosting.com/styles/bright/style.json?key=ER67WIiPdCQvhgsUjoWK');

13
examples/webpack/config.js
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 ExampleBuilder = require('./example-builder');
const fs = require('fs');
@@ -33,7 +33,7 @@ module.exports = {
},
optimization: {
minimizer: [
new UglifyJsPlugin({
new TerserPlugin({
sourceMap: true,
// Do not minify examples that inject code into workers
exclude: [/(color-manipulation|region-growing|raster)\.js/]
@@ -65,5 +65,14 @@ module.exports = {
output: {
filename: '[name].js',
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')
}
}
};

3
package.json
View File

@@ -75,6 +75,7 @@
"marked": "0.5.1",
"mocha": "5.2.0",
"mustache": "^3.0.0",
"ol-mapbox-style": "^3.3.0",
"pixelmatch": "^4.0.2",
"pngjs": "^3.3.3",
"proj4": "2.5.0",
@@ -82,8 +83,8 @@
"rollup": "0.67.1",
"serve-static": "^1.13.2",
"sinon": "^6.0.0",
"terser-webpack-plugin": "^1.1.0",
"typescript": "^3.1.0-dev.20180905",
"uglifyjs-webpack-plugin": "^2.0.1",
"url-polyfill": "^1.0.13",
"walk": "^2.3.9",
"webpack": "4.25.1",