Skip to content

Commit 54f9b1e

Browse files
MalvozMalvoz
committed
Responsive map embeds
1 parent 93c0acd commit 54f9b1e

22 files changed

+2048
-1831
lines changed

‎examples/add-custom-control.html‎

Lines changed: 219 additions & 209 deletions
Large diffs are not rendered by default.

‎examples/alternative-layers.html‎

Lines changed: 165 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
77
<meta http-equiv="X-UA-Compatible" content="ie=edge">
88
<title>Provide alternative map layers which the user can select</title>
9-
<link rel="stylesheet" href="examples.css" />
9+
<link rel="stylesheet" href="examples.css">
1010
<script src="api-keys.js"></script>
1111
</head>
1212
<body>
@@ -82,76 +82,80 @@ <h2>Leaflet.js (with OpenStreetMap tiles)</h2>
8282
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
8383
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
8484
crossorigin=""></script>
85-
<script class="example">
86-
{
87-
const map = L.map('leaflet-map').setView([46.233226, 6.055737], 15);
88-
const osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
89-
minZoom: 0,
90-
maxZoom: 20,
91-
attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
92-
});
93-
osmLayer.addTo(map);
85+
<div class="script-example">
86+
<script>
87+
{
88+
const map = L.map('leaflet-map').setView([46.233226, 6.055737], 15);
89+
const osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
90+
minZoom: 0,
91+
maxZoom: 20,
92+
attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
93+
});
94+
osmLayer.addTo(map);
9495

95-
const hotLayer = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
96-
minZoom: 0,
97-
maxZoom: 20,
98-
attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
99-
});
100-
hotLayer.addTo(map);
96+
const hotLayer = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
97+
minZoom: 0,
98+
maxZoom: 20,
99+
attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
100+
});
101+
hotLayer.addTo(map);
101102

102-
L.control.layers({
103-
'OSM': osmLayer,
104-
'HOT': hotLayer
105-
}).addTo(map);
106-
}
107-
</script>
103+
L.control.layers({
104+
'OSM': osmLayer,
105+
'HOT': hotLayer
106+
}).addTo(map);
107+
}
108+
</script>
109+
</div>
108110
</section>
109111

110112
<section id="openlayers">
111113
<h2>OpenLayers with OpenStreetMap tiles</h2>
112114
<div id="openlayers-map" style="width: 600px; height: 450px;"></div>
113115
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
114-
<script class="example">
115-
{
116-
let map = new ol.Map({
117-
view: new ol.View({
118-
center: ol.proj.fromLonLat([6.055737, 46.233226]),
119-
zoom: 15
120-
}),
121-
layers: [
122-
new ol.layer.Tile({
123-
source: new ol.source.OSM(),
124-
visible: true
116+
<div class="script-example">
117+
<script>
118+
{
119+
let map = new ol.Map({
120+
view: new ol.View({
121+
center: ol.proj.fromLonLat([6.055737, 46.233226]),
122+
zoom: 15
125123
}),
126-
new ol.layer.Tile({
127-
source: new ol.source.OSM({url: 'https://a.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'}),
128-
visible: false
129-
})
130-
],
131-
target: 'openlayers-map'
132-
});
133-
const openLayersLayerControl = new ol.control.Control({ element: (() => {
134-
const layerNames = ['OSM Layer', 'HOT Layer'];
135-
const layerControlContainer = document.createElement('div');
136-
layerControlContainer.classList.add('layers');
137-
layerControlContainer.classList.add('openlayers');
138-
layerControlContainer.classList.add('custom-control');
139-
const layerSwitcher = layerControlContainer.appendChild(document.createElement('button'));
140-
layerSwitcher.type = 'button';
141-
layerSwitcher.textContent = layerNames[0];
142-
layerSwitcher.addEventListener('click', function(ev) {
143-
let layers = map.getLayers(),
144-
osmLayer = layers.item(0),
145-
hotLayer = layers.item(1);
146-
osmLayer.setVisible(!osmLayer.getVisible());
147-
hotLayer.setVisible(!hotLayer.getVisible());
148-
layerSwitcher.textContent = (osmLayer.getVisible() ? layerNames[0] : layerNames[1]);
149-
});
150-
return layerControlContainer;
151-
})()});
152-
map.addControl(openLayersLayerControl);
153-
}
154-
</script>
124+
layers: [
125+
new ol.layer.Tile({
126+
source: new ol.source.OSM(),
127+
visible: true
128+
}),
129+
new ol.layer.Tile({
130+
source: new ol.source.OSM({url: 'https://a.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'}),
131+
visible: false
132+
})
133+
],
134+
target: 'openlayers-map'
135+
});
136+
const openLayersLayerControl = new ol.control.Control({ element: (() => {
137+
const layerNames = ['OSM Layer', 'HOT Layer'];
138+
const layerControlContainer = document.createElement('div');
139+
layerControlContainer.classList.add('layers');
140+
layerControlContainer.classList.add('openlayers');
141+
layerControlContainer.classList.add('custom-control');
142+
const layerSwitcher = layerControlContainer.appendChild(document.createElement('button'));
143+
layerSwitcher.type = 'button';
144+
layerSwitcher.textContent = layerNames[0];
145+
layerSwitcher.addEventListener('click', function(ev) {
146+
let layers = map.getLayers(),
147+
osmLayer = layers.item(0),
148+
hotLayer = layers.item(1);
149+
osmLayer.setVisible(!osmLayer.getVisible());
150+
hotLayer.setVisible(!hotLayer.getVisible());
151+
layerSwitcher.textContent = (osmLayer.getVisible() ? layerNames[0] : layerNames[1]);
152+
});
153+
return layerControlContainer;
154+
})()});
155+
map.addControl(openLayersLayerControl);
156+
}
157+
</script>
158+
</div>
155159
</section>
156160

157161
<section id="google-maps-api">
@@ -163,20 +167,22 @@ <h2>Google Maps API</h2>
163167
scriptElement.setAttribute('src', apiUrl);
164168
document.body.appendChild(scriptElement);
165169
</script>
166-
<script class="example">
167-
function initMap() {
168-
const googleMap = new google.maps.Map(
169-
document.getElementById('google-maps-api-map'),
170-
{
171-
center:{
172-
lat: 0,
173-
lng: 0
174-
},
175-
zoom: 0
176-
}
177-
);
178-
}
179-
</script>
170+
<div class="script-example">
171+
<script>
172+
function initMap() {
173+
const googleMap = new google.maps.Map(
174+
document.getElementById('google-maps-api-map'),
175+
{
176+
center:{
177+
lat: 0,
178+
lng: 0
179+
},
180+
zoom: 0
181+
}
182+
);
183+
}
184+
</script>
185+
</div>
180186
</section>
181187

182188
<section id="bing-maps-api">
@@ -188,107 +194,113 @@ <h2>Bing Maps Control API</h2>
188194
bingScriptElement.setAttribute('src', bingApiUrl);
189195
document.body.appendChild(bingScriptElement);
190196
</script>
191-
<script class="example">
192-
function initBingMap() {
193-
let bingMap = new Microsoft.Maps.Map(document.getElementById('bing-maps-api-map'), {
194-
center: new Microsoft.Maps.Location(0, 0),
195-
zoom: 0
196-
});
197-
}
198-
</script>
197+
<div class="script-example">
198+
<script>
199+
function initBingMap() {
200+
let bingMap = new Microsoft.Maps.Map(document.getElementById('bing-maps-api-map'), {
201+
center: new Microsoft.Maps.Location(0, 0),
202+
zoom: 0
203+
});
204+
}
205+
</script>
206+
</div>
199207
</section>
200208

201209
<section id="mapkit-js">
202210
<h2>MapKit JS (Apple Maps) API</h2>
203211
<div id="mapkit-js-map" style="width: 600px; height: 450px;"></div>
204212
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>
205-
<script class="example">
206-
mapkit.addEventListener('error', function(err) {
207-
console.log(err);
208-
});
209-
let mapkitKey = m4h.keys.mapkit.maps4html;
210-
if (self.location.hostname === 'localhost') {
211-
if (self.location.protocol === 'https:') {
212-
mapkitKey = m4h.keys.mapkit.httpslocalhost8000;
213-
} else {
214-
mapkitKey = m4h.keys.mapkit.localhost8000;
213+
<div class="script-example">
214+
<script>
215+
mapkit.addEventListener('error', function(err) {
216+
console.log(err);
217+
});
218+
let mapkitKey = m4h.keys.mapkit.maps4html;
219+
if (self.location.hostname === 'localhost') {
220+
if (self.location.protocol === 'https:') {
221+
mapkitKey = m4h.keys.mapkit.httpslocalhost8000;
222+
} else {
223+
mapkitKey = m4h.keys.mapkit.localhost8000;
224+
}
215225
}
216-
}
217-
mapkit.init({
218-
authorizationCallback: function(done) {
219-
done(mapkitKey);
220-
},
221-
language: "en"
222-
});
223-
const center = new mapkit.Coordinate(0, 0),
224-
span = new mapkit.CoordinateSpan(360, 180),
225-
region = new mapkit.CoordinateRegion(center, span);
226-
const map = new mapkit.Map(document.getElementById('mapkit-js-map'), {
227-
region: region
228-
});
229-
</script>
226+
mapkit.init({
227+
authorizationCallback: function(done) {
228+
done(mapkitKey);
229+
},
230+
language: "en"
231+
});
232+
const center = new mapkit.Coordinate(0, 0),
233+
span = new mapkit.CoordinateSpan(360, 180),
234+
region = new mapkit.CoordinateRegion(center, span);
235+
const map = new mapkit.Map(document.getElementById('mapkit-js-map'), {
236+
region: region
237+
});
238+
</script>
239+
</div>
230240
</section>
231241

232242
<section id="mapbox-api">
233243
<h2>Mapbox GL JS API</h2>
234244
<div id="mapbox-api-map" style="width: 600px; height: 450px;"></div>
235245
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
236246
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
237-
<script class="example">
238-
{
239-
mapboxgl.accessToken = m4h.keys.mapboxGL;
240-
const stylesAvailable = [
241-
{
242-
label: 'Street Map',
243-
url: 'mapbox://styles/mapbox/streets-v10'
244-
},
245-
{
246-
label: 'Satellite Map',
247-
url: 'mapbox://styles/mapbox/satellite-streets-v10'
248-
}
249-
];
250-
let currentStyle = 0;
247+
<div class="script-example">
248+
<script>
249+
{
250+
mapboxgl.accessToken = m4h.keys.mapboxGL;
251+
const stylesAvailable = [
252+
{
253+
label: 'Street Map',
254+
url: 'mapbox://styles/mapbox/streets-v10'
255+
},
256+
{
257+
label: 'Satellite Map',
258+
url: 'mapbox://styles/mapbox/satellite-streets-v10'
259+
}
260+
];
261+
let currentStyle = 0;
251262

252-
const map = new mapboxgl.Map({
253-
container: 'mapbox-api-map',
254-
style: stylesAvailable[currentStyle].url,
255-
center: [6.055737, 46.233226],
256-
zoom: 15
257-
});
263+
const map = new mapboxgl.Map({
264+
container: 'mapbox-api-map',
265+
style: stylesAvailable[currentStyle].url,
266+
center: [6.055737, 46.233226],
267+
zoom: 15
268+
});
258269

259-
const layerControlContainer = document.createElement('div');
260-
layerControlContainer.classList.add('layers');
261-
layerControlContainer.classList.add('custom-control');
262-
layerControlContainer.classList.add('mapboxgl');
263-
const layerSwitcher = layerControlContainer.appendChild(document.createElement('button'));
264-
layerSwitcher.type = 'button';
265-
layerSwitcher.textContent = stylesAvailable[currentStyle ^ 1].label;
266-
layerSwitcher.addEventListener('click', function(ev) {
267-
currentStyle = currentStyle ^ 1;
268-
map.setStyle(stylesAvailable[currentStyle].url);
270+
const layerControlContainer = document.createElement('div');
271+
layerControlContainer.classList.add('layers');
272+
layerControlContainer.classList.add('custom-control');
273+
layerControlContainer.classList.add('mapboxgl');
274+
const layerSwitcher = layerControlContainer.appendChild(document.createElement('button'));
275+
layerSwitcher.type = 'button';
269276
layerSwitcher.textContent = stylesAvailable[currentStyle ^ 1].label;
270-
});
277+
layerSwitcher.addEventListener('click', function(ev) {
278+
currentStyle = currentStyle ^ 1;
279+
map.setStyle(stylesAvailable[currentStyle].url);
280+
layerSwitcher.textContent = stylesAvailable[currentStyle ^ 1].label;
281+
});
271282

272-
const mapboxglLayerControl = {
273-
onAdd: (map) => {
274-
return layerControlContainer;
275-
},
276-
getDefaultPosition: () => {
277-
return 'top-right'
278-
},
279-
onRemove: () => {}
280-
};
283+
const mapboxglLayerControl = {
284+
onAdd: (map) => {
285+
return layerControlContainer;
286+
},
287+
getDefaultPosition: () => {
288+
return 'top-right'
289+
},
290+
onRemove: () => {}
291+
};
281292

282-
map.getContainer().appendChild(mapboxglLayerControl.onAdd(map));
283-
}
284-
</script>
293+
map.getContainer().appendChild(mapboxglLayerControl.onAdd(map));
294+
}
295+
</script>
296+
</div>
285297
</section>
286298

287299
<section id="tomtom">
288300
<h2>TomTom Maps SDK for Web with vector maps</h2>
289301

290302
***TODO<!--
291-
Replace with code including link/external scripts. Custom script has class="example".
303+
Replace with code including link/external scripts. Custom script has <div class="script-example"> parent element.
292304
or <p>Not applicable</p>
293305
-->***
294306
</section>
@@ -297,7 +309,7 @@ <h2>TomTom Maps SDK for Web with vector maps</h2>
297309
<h2>D3 Geographies APIs</h2>
298310

299311
***TODO<!--
300-
Replace with code including link/external scripts. Custom script has class="example".
312+
Replace with code including link/external scripts. Custom script has <div class="script-example"> parent element.
301313
or <p>Not applicable</p>
302314
-->***
303315
</section>

0 commit comments

Comments
 (0)