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

Make mapbox-style example fullscreen on demand

Browse Source
This commit is contained in:
Andreas Hocevar
2020-03-22 20:08:24 +01:00
parent bc1be50cbc
commit ade9ac8857
2 changed files with 6 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
examples/mapbox-style.html
View File

@@ -1,5 +1,5 @@
--- ---
layout: example-verbatim.html layout: example.html
title: Vector tiles created from a Mapbox Style object title: Vector tiles created from a Mapbox Style object
shortdesc: Example of using ol-mapbox-style with tiles from maptiler.com. shortdesc: Example of using ol-mapbox-style with tiles from maptiler.com.
docs: > docs: >
@@ -10,27 +10,4 @@ cloak:
- key: get_your_own_D6rA4zTHduk6KOKTXzGB - key: get_your_own_D6rA4zTHduk6KOKTXzGB
value: Get your own API key at https://www.maptiler.com/cloud/ value: Get your own API key at https://www.maptiler.com/cloud/
--- ---
<!doctype html> <div id="map" class="map"></div>
<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">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,String.prototype.startsWith,Object.assign"></script>
<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>

5
examples/mapbox-style.js
View File

@@ -1,3 +1,6 @@
import apply from 'ol-mapbox-style'; import apply from 'ol-mapbox-style';
import FullScreen from '../src/ol/control/FullScreen.js';
apply('map', 'https://api.maptiler.com/maps/topo/style.json?key=get_your_own_D6rA4zTHduk6KOKTXzGB'); apply('map', 'https://api.maptiler.com/maps/topo/style.json?key=get_your_own_D6rA4zTHduk6KOKTXzGB').then(function(map) {
map.addControl(new FullScreen());
});