Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[examples] Scoped styles #214

Closed
wants to merge 3 commits into from
Closed

[examples] Scoped styles #214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0c8d038
Introduce `scoped` styles
Malvoz May 14, 2020
abd3750
Update `scoped` polyfill to v0.2.1.
Malvoz May 14, 2020
1e6e978
Host third-party assets locally
Malvoz May 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 16 additions & 19 deletions examples/add-custom-control.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Add Custom Control — Maps for HTML reference examples</title>
<link rel="stylesheet" href="examples.css">
<script src="api-keys.js"></script>
<link rel="stylesheet" href="css/examples.css">
<script src="js/style-scope.js"></script>
<script src="js/api-keys.js"></script>
</head>
<body>
<h1>Examples for
Expand All @@ -28,7 +29,7 @@ <h1>Examples for
<ul class="toc">
<li>Iframe embeds: <ul>
<li><a href="#google-maps-embed">Google Maps embed</a></li>
<li><a href="#openstreetmap">OpenStreetMap embed</a></li>
<li><a href="#openstreetmap-embed">OpenStreetMap embed</a></li>
<li><a href="#bing-maps-embed">Bing Maps embed</a></li>
<li><a href="#mapbox-embed">Mapbox Studio embed</a></li>
</ul></li>
Expand All @@ -50,7 +51,7 @@ <h2>Google Maps embed</h2>
<p>Not applicable</p>
</section>

<section id="openstreetmap">
<section id="openstreetmap-embed">
<h2>OpenStreetMap embed</h2>
<p>Not applicable</p>
</section>
Expand All @@ -67,13 +68,9 @@ <h2>MapBox Studio embed</h2>

<section id="leaflet-js">
<h2>Leaflet.js (with OpenStreetMap tiles)</h2>
<div id="leaflet-js-map" style="width: 600px; height: 450px;"></div>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<div id="leaflet-js-map" class="m4h-map"></div>
<style scoped>@import "css/leaflet.css";</style>
<script src="js/leaflet.js"></script>
<code class="script-example">
<script>
{ // block to restrict let and const scope to this example
Expand Down Expand Up @@ -143,9 +140,9 @@ <h2>Leaflet.js (with OpenStreetMap tiles)</h2>

<section id="openlayers">
<h2>OpenLayers with OpenStreetMap tiles</h2>
<div id="openlayers-map" style="width: 600px; height: 450px;"></div>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="openlayers-map" class="m4h-map"></div>
<style scoped>@import "css/openlayers.css";</style>
<script src="js/openlayers.js"></script>
<code class="script-example">
<script>
{ // block to restrict let and const scope to this example
Expand Down Expand Up @@ -234,7 +231,7 @@ <h2>OpenLayers with OpenStreetMap tiles</h2>

<section id="google-maps-api">
<h2>Google Maps</h2>
<div id="google-maps-api-map" style="width: 600px; height: 450px;"></div>
<div id="google-maps-api-map" class="m4h-map"></div>
<script>
const apiUrl = 'https://maps.googleapis.com/maps/api/js?key=' + m4h.keys.google + '&callback=initMap',
scriptElement = document.createElement('script');
Expand Down Expand Up @@ -305,7 +302,7 @@ <h2>Google Maps</h2>

<section id="bing-maps-api">
<h2>Bing Maps Control API</h2>
<div id="bing-maps-api-map" style="width: 600px; height: 450px;"></div>
<div id="bing-maps-api-map" class="m4h-map"></div>
<script>
const bingApiUrl = 'https://www.bing.com/api/maps/mapcontrol?key=' + m4h.keys.bing + '&callback=initBingMap',
bingScriptElement = document.createElement('script');
Expand Down Expand Up @@ -385,9 +382,9 @@ <h2>MapKit JS (Apple Maps) API</h2>

<section id="mapbox-api">
<h2>MapBox GL</h2>
<div id="mapbox-api-map" style="width: 600px; height: 450px;"></div>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
<div id="mapbox-api-map" class="m4h-map"></div>
<style scoped>@import "css/mapbox.css";</style>
<script src="js/mapbox.js"></script>
<code class="script-example">
<script>
{ // block to restrict let and const scope to this example
Expand Down
39 changes: 18 additions & 21 deletions examples/alternative-layers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Provide alternative map layers which the user can select</title>
<link rel="stylesheet" href="examples.css">
<script src="api-keys.js"></script>
<link rel="stylesheet" href="css/examples.css">
<script src="js/style-scope.js"></script>
<script src="js/api-keys.js"></script>
</head>
<body>
<h1>Examples for
Expand All @@ -32,7 +33,7 @@ <h1>Examples for
<ul class="toc">
<li>Iframe embeds: <ul>
<li><a href="#google-maps-embed">Google Maps embed</a></li>
<li><a href="#openstreetmap">OpenStreetMap embed</a></li>
<li><a href="#openstreetmap-embed">OpenStreetMap embed</a></li>
<li><a href="#bing-maps-embed">Bing Maps embed</a></li>
<li><a href="#mapbox-embed">Mapbox Studio embed</a></li>
</ul></li>
Expand All @@ -58,7 +59,7 @@ <h2>Google Maps embed</h2>
</iframe>
</section>

<section id="openstreetmap">
<section id="openstreetmap-embed">
<h2>OpenStreetMap embed</h2>
<p>Not applicable</p>
<p>OpenStreetMap does not currently provide a layer selection control in embedded maps.</p>
Expand All @@ -78,13 +79,9 @@ <h2>MapBox Studio embed</h2>

<section id="leaflet-js">
<h2>Leaflet.js (with OpenStreetMap tiles)</h2>
<div id="leaflet-map" style="width: 600px; height: 450px;"></div>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<div id="leaflet-map" class="m4h-map"></div>
<style scoped>@import "css/leaflet.css";</style>
<script src="js/leaflet.js"></script>
<code class="script-example">
<script>
{
Expand Down Expand Up @@ -114,9 +111,9 @@ <h2>Leaflet.js (with OpenStreetMap tiles)</h2>

<section id="openlayers">
<h2>OpenLayers with OpenStreetMap tiles</h2>
<div id="openlayers-map" style="width: 600px; height: 450px;"></div>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="openlayers-map" class="m4h-map"></div>
<style scoped>@import "css/openlayers.css";</style>
<script src="js/openlayers.js"></script>
<code class="script-example">
<script>
{
Expand Down Expand Up @@ -164,7 +161,7 @@ <h2>OpenLayers with OpenStreetMap tiles</h2>

<section id="google-maps-api">
<h2>Google Maps API</h2>
<div id="google-maps-api-map" style="width: 600px; height: 450px;"></div>
<div id="google-maps-api-map" class="m4h-map"></div>
<script>
const apiUrl = 'https://maps.googleapis.com/maps/api/js?key=' + m4h.keys.google + '&callback=initMap',
scriptElement = document.createElement('script');
Expand All @@ -191,7 +188,7 @@ <h2>Google Maps API</h2>

<section id="bing-maps-api">
<h2>Bing Maps Control API</h2>
<div id="bing-maps-api-map" style="width: 600px; height: 450px;"></div>
<div id="bing-maps-api-map" class="m4h-map"></div>
<script>
const bingApiUrl = 'https://www.bing.com/api/maps/mapcontrol?key=' + m4h.keys.bing + '&callback=initBingMap',
bingScriptElement = document.createElement('script');
Expand All @@ -212,8 +209,8 @@ <h2>Bing Maps Control API</h2>

<section id="mapkit-js">
<h2>MapKit JS (Apple Maps) API</h2>
<div id="mapkit-js-map" style="width: 600px; height: 450px;"></div>
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>
<div id="mapkit-js-map" class="m4h-map"></div>
<script src="js/mapkit.js"></script>
<code class="script-example">
<script>
mapkit.addEventListener('error', function(err) {
Expand Down Expand Up @@ -245,9 +242,9 @@ <h2>MapKit JS (Apple Maps) API</h2>

<section id="mapbox-api">
<h2>Mapbox GL JS API</h2>
<div id="mapbox-api-map" style="width: 600px; height: 450px;"></div>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
<div id="mapbox-api-map" class="m4h-map"></div>
<style scoped>@import "css/mapbox.css";</style>
<script src="js/mapbox.js"></script>
<code class="script-example">
<script>
{
Expand Down
75 changes: 38 additions & 37 deletions examples/animate-view-change.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Animate a map through a sequence of points — Maps for HTML reference examples</title>
<link rel="stylesheet" href="examples.css">
<script src="api-keys.js"></script>
<link rel="stylesheet" href="css/examples.css">
<script src="js/style-scope.js"></script>
<script src="js/api-keys.js"></script>
</head>
<body>
<h1>Examples for
Expand All @@ -24,7 +25,7 @@ <h1>Examples for
<ul class="toc">
<li>Iframe embeds: <ul>
<li><a href="#google-maps-embed">Google Maps embed</a></li>
<li><a href="#openstreetmap">OpenStreetMap embed</a></li>
<li><a href="#openstreetmap-embed">OpenStreetMap embed</a></li>
<li><a href="#bing-maps-embed">Bing Maps embed</a></li>
<li><a href="#mapbox-embed">Mapbox Studio embed</a></li>
</ul></li>
Expand All @@ -46,7 +47,7 @@ <h2>Google Maps embed</h2>
<p>Not applicable</p>
</section>

<section id="openstreetmap">
<section id="openstreetmap-embed">
<h2>OpenStreetMap embed</h2>
<p>Not applicable</p>
</section>
Expand All @@ -68,44 +69,44 @@ <h2>Leaflet.js (with OpenStreetMap tiles)</h2>

<section id="openlayers">
<h2>OpenLayers with OpenStreetMap tiles</h2>
<div class="map-container">
<ol>
<li>
<h3>Route from Holborn Tube Station to Conway Hall</h3>
<div class="buttons"><button type="button" class="go">Go</button></div>
</li>
<li>
<a href="?latlng=51.517462,-0.119877" data-lat="51.517462" data-lng="-0.119877" data-zoom="19">Leave Holborn Tube Station by the High Holborn exit</a>
</li>
<li>
<a href="?latlng=51.517627,-0.119951" data-lat="51.517627" data-lng="-0.119951" data-zoom="19">Turn right along High Holborn</a>
</li>
<li>
<a href="?latlng=51.517656,-0.118945" data-lat="51.517656" data-lng="-0.118945" data-zoom="19">Cross High Holborn at the junction with Drake Street</a>
</li>
<li>
<a href="?latlng=51.517862,-0.118911" data-lat="51.517862" data-lng="-0.118911" data-zoom="19">Continue up Drake Street</a>
</li>
<li>
<a href="?latlng=51.518772,-0.119374" data-lat="51.518772" data-lng="-0.119374" data-zoom="19">Turn right on to Red Lion Square</a>
</li>
<li>
<a href="?latlng=51.519225,-0.118039" data-lat="51.519225" data-lng="-0.118039" data-zoom="19">Turn left at the southeast corner of Red Lion Square</a>
</li>
<li>
<a href="?latlng=51.519691,-0.118249" data-lat="51.519691" data-lng="-0.118249" data-zoom="19">You have arrived at Conway Hall</a>
</li>
</ol>
<div class="map" id="openlayers-map">
<div class="animate-view-change">
<details open>
<summary>Route from Holborn Tube Station to Conway Hall</summary>
<ol>
<li>
<a href="?latlng=51.517462,-0.119877#openlayers" data-lat="51.517462" data-lng="-0.119877" data-zoom="19">Leave Holborn Tube Station by the High Holborn exit</a>
</li>
<li>
<a href="?latlng=51.517627,-0.119951#openlayers" data-lat="51.517627" data-lng="-0.119951" data-zoom="19">Turn right along High Holborn</a>
</li>
<li>
<a href="?latlng=51.517656,-0.118945#openlayers" data-lat="51.517656" data-lng="-0.118945" data-zoom="19">Cross High Holborn at the junction with Drake Street</a>
</li>
<li>
<a href="?latlng=51.517862,-0.118911#openlayers" data-lat="51.517862" data-lng="-0.118911" data-zoom="19">Continue up Drake Street</a>
</li>
<li>
<a href="?latlng=51.518772,-0.119374#openlayers" data-lat="51.518772" data-lng="-0.119374" data-zoom="19">Turn right on to Red Lion Square</a>
</li>
<li>
<a href="?latlng=51.519225,-0.118039#openlayers" data-lat="51.519225" data-lng="-0.118039" data-zoom="19">Turn left at the southeast corner of Red Lion Square</a>
</li>
<li>
<a href="?latlng=51.519691,-0.118249#openlayers" data-lat="51.519691" data-lng="-0.118249" data-zoom="19">You have arrived at Conway Hall</a>
</li>
</ol>
</details>
<button type="button" class="button-animate">Animate view change</button>
<div id="openlayers-map" class="m4h-map">
</div>
</div>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<style scoped>@import "css/openlayers.css";</style>
<script src="js/openlayers.js"></script>
<code class="script-example">
<script>
{
// convert values from DOM attributes to properties for animation
const locationLinks = [...document.querySelectorAll("#openlayers .map-container>ol>li>a")];
const locationLinks = [...document.querySelectorAll("#openlayers .animate-view-change details a")];
const locations = locationLinks.map(locationLink => {
return {
center: ol.proj.fromLonLat([parseFloat(locationLink.dataset.lng), parseFloat(locationLink.dataset.lat)]),
Expand Down Expand Up @@ -144,7 +145,7 @@ <h3>Route from Holborn Tube Station to Conway Hall</h3>
target: 'openlayers-map'
});

const goButton = document.querySelector('#openlayers button.go');
const goButton = document.querySelector('#openlayers .button-animate');
goButton.addEventListener('click', ev => {
ev.preventDefault();
const view = map.getView();
Expand Down
Loading