Skip to content

Commit 0eef08c

Browse files
prushforthprushforth
committed
Updates for release 0.8
Fix problems noticed by reviewers.
1 parent 4460f94 commit 0eef08c

File tree

11 files changed

+5460
-3990
lines changed

11 files changed

+5460
-3990
lines changed

‎Leaflet.fullscreen.js

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
(function (factory) {
2+
if (typeof define === 'function' && define.amd) {
3+
// AMD
4+
define(['leaflet'], factory);
5+
} else if (typeof module !== 'undefined') {
6+
// Node/CommonJS
7+
module.exports = factory(require('leaflet'));
8+
} else {
9+
// Browser globals
10+
if (typeof window.L === 'undefined') {
11+
throw new Error('Leaflet must be loaded first');
12+
}
13+
factory(window.L);
14+
}
15+
}(function (L) {
16+
L.Control.Fullscreen = L.Control.extend({
17+
options: {
18+
position: 'topleft',
19+
title: {
20+
'false': 'View Fullscreen',
21+
'true': 'Exit Fullscreen'
22+
}
23+
},
24+
25+
onAdd: function (map) {
26+
var container = L.DomUtil.create('div', 'leaflet-control-fullscreen leaflet-bar leaflet-control');
27+
28+
this.link = L.DomUtil.create('a', 'leaflet-control-fullscreen-button leaflet-bar-part', container);
29+
this.link.href = '#';
30+
31+
this._map = map;
32+
this._map.on('fullscreenchange', this._toggleTitle, this);
33+
this._toggleTitle();
34+
35+
L.DomEvent.on(this.link, 'click', this._click, this);
36+
37+
return container;
38+
},
39+
40+
onRemove: function (map) {
41+
map.off('fullscreenchange', this._toggleTitle, this);
42+
},
43+
44+
_click: function (e) {
45+
L.DomEvent.stopPropagation(e);
46+
L.DomEvent.preventDefault(e);
47+
this._map.toggleFullscreen(this.options);
48+
},
49+
50+
_toggleTitle: function() {
51+
this.link.title = this.options.title[this._map.isFullscreen()];
52+
}
53+
});
54+
55+
L.Map.include({
56+
isFullscreen: function () {
57+
return this._isFullscreen || false;
58+
},
59+
60+
toggleFullscreen: function (options) {
61+
var container = this.getContainer();
62+
if (this.isFullscreen()) {
63+
if (options && options.pseudoFullscreen) {
64+
this._disablePseudoFullscreen(container);
65+
} else if (document.exitFullscreen) {
66+
document.exitFullscreen();
67+
} else if (document.mozCancelFullScreen) {
68+
document.mozCancelFullScreen();
69+
} else if (document.webkitCancelFullScreen) {
70+
document.webkitCancelFullScreen();
71+
} else if (document.msExitFullscreen) {
72+
document.msExitFullscreen();
73+
} else {
74+
this._disablePseudoFullscreen(container);
75+
}
76+
} else {
77+
if (options && options.pseudoFullscreen) {
78+
this._enablePseudoFullscreen(container);
79+
} else if (container.requestFullscreen) {
80+
container.requestFullscreen();
81+
} else if (container.mozRequestFullScreen) {
82+
container.mozRequestFullScreen();
83+
} else if (container.webkitRequestFullscreen) {
84+
container.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
85+
} else if (container.msRequestFullscreen) {
86+
container.msRequestFullscreen();
87+
} else {
88+
this._enablePseudoFullscreen(container);
89+
}
90+
}
91+
92+
},
93+
94+
_enablePseudoFullscreen: function (container) {
95+
L.DomUtil.addClass(container, 'leaflet-pseudo-fullscreen');
96+
this._setFullscreen(true);
97+
this.fire('fullscreenchange');
98+
},
99+
100+
_disablePseudoFullscreen: function (container) {
101+
L.DomUtil.removeClass(container, 'leaflet-pseudo-fullscreen');
102+
this._setFullscreen(false);
103+
this.fire('fullscreenchange');
104+
},
105+
106+
_setFullscreen: function(fullscreen) {
107+
this._isFullscreen = fullscreen;
108+
var container = this.getContainer();
109+
if (fullscreen) {
110+
L.DomUtil.addClass(container, 'leaflet-fullscreen-on');
111+
} else {
112+
L.DomUtil.removeClass(container, 'leaflet-fullscreen-on');
113+
}
114+
this.invalidateSize();
115+
},
116+
117+
_onFullscreenChange: function (e) {
118+
var fullscreenElement =
119+
document.fullscreenElement ||
120+
document.mozFullScreenElement ||
121+
document.webkitFullscreenElement ||
122+
document.msFullscreenElement;
123+
124+
if ( !this._isFullscreen) {
125+
this._setFullscreen(true);
126+
this.fire('fullscreenchange');
127+
} else if ( this._isFullscreen) {
128+
this._setFullscreen(false);
129+
this.fire('fullscreenchange');
130+
}
131+
}
132+
});
133+
134+
L.Map.mergeOptions({
135+
fullscreenControl: false
136+
});
137+
138+
L.Map.addInitHook(function () {
139+
if (this.options.fullscreenControl) {
140+
this.fullscreenControl = new L.Control.Fullscreen(this.options.fullscreenControl);
141+
this.addControl(this.fullscreenControl);
142+
}
143+
144+
var fullscreenchange;
145+
146+
if ('onfullscreenchange' in document) {
147+
fullscreenchange = 'fullscreenchange';
148+
} else if ('onmozfullscreenchange' in document) {
149+
fullscreenchange = 'mozfullscreenchange';
150+
} else if ('onwebkitfullscreenchange' in document) {
151+
fullscreenchange = 'webkitfullscreenchange';
152+
} else if ('onmsfullscreenchange' in document) {
153+
fullscreenchange = 'MSFullscreenChange';
154+
}
155+
156+
if (fullscreenchange) {
157+
var onFullscreenChange = L.bind(this._onFullscreenChange, this);
158+
159+
this.whenReady(function () {
160+
L.DomEvent.on(document, fullscreenchange, onFullscreenChange);
161+
});
162+
163+
this.on('unload', function () {
164+
L.DomEvent.off(document, fullscreenchange, onFullscreenChange);
165+
});
166+
}
167+
});
168+
169+
L.control.fullscreen = function (options) {
170+
return new L.Control.Fullscreen(options);
171+
};
172+
}));

‎README.md

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,29 @@
11

2-
# web-map Customized Built-In <map> Element
2+
# Customized built-in <map> element
33

4-
[![Build Status](https://travis-ci.org/prushforth/Web-Map-Custom-Element.svg?branch=master)](https://travis-ci.org/prushforth/Web-Map-Custom-Element) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Maps4HTML/Web-Map-Custom-Element)
4+
![Build Status](https://api.travis-ci.com/Maps4HTML/Web-Map-Custom-Element.svg?branch=master)
55

6-
The Customized Built-In <map> Element is a prototype [implementation](http://maps4html.github.io/Web-Map-Custom-Element/) of the [HTML-Map-Element specification](http://maps4html.github.io/HTML-Map-Element/spec/).
6+
The customized built-in `<map>` element is a prototype [implementation](http://maps4html.github.io/Web-Map-Custom-Element/)
7+
of the [MapML specification](https://maps4html.org/MapML/spec/).
78

8-
The HTML author can add MapML sources/layers by one or more the &lt;`layer- src="..."`&gt; elements as children of &lt;`map`&gt;. The map provides a default set of controls which are turned on or off with the map@controls boolean attribute. The @width and @height of the map should be specified either as attributes or via CSS rules. The initial zoom and location of the map are controlled by the @zoom and @lat, @lon attributes. The default projection is Web Mercator (OSMTILE).
9+
The HTML author can add <span title="Map Markup Language">[MapML](https://maps4html.org/MapML/spec/)</span>
10+
sources/layers by specifying one or more `<layer->` elements as children of `<map>`.
11+
The map provides a default set of controls which are turned on or off with the map's `controls` boolean attribute.
12+
The `width` and `height` properties of the map should be specified using CSS properties.
13+
The initial zoom and location of the map are controlled by the `zoom`, `lat` and `lon` attributes.
14+
The default `projection` is `OSMTILE` (Web Mercator).
915

1016
Example:
11-
<!---
12-
```
13-
<custom-element-demo>
14-
<template>
15-
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
16-
<link rel="import" href="web-map.html">
17-
<next-code-block></next-code-block>
18-
</template>
19-
</custom-element-demo>
20-
```
21-
-->
17+
2218
```html
23-
<map is="web-map" zoom="3" lat="0" lon="0" width="800" height="400" controls>
19+
<map is="web-map" zoom="3" lat="0" lon="0" controls>
2420
<layer- src="https://geogratis.gc.ca/mapml/en/osmtile/osm/" label="OpenStreetMap" checked></layer->
2521
</map>
2622
```
2723

28-
## Maps4HTML Community Group
24+
## Maps for HTML Community Group
2925

30-
MapML and the web-map custom element area being developed by the W3C [Maps For HTML Community Group](http://www.w3.org/community/maps4html/). Membership in that group is encouraged, however you do not have to join to use the information found here. However, if you wish to contribute, please join the Maps For HTML Community Group, and help us make the Web a map-friendly platform for everyone, everywhere!
26+
MapML and the &lt;map&gt; custom element are being developed by the W3C [Maps for HTML Community Group](http://www.w3.org/community/maps4html/).
27+
Membership in the group is encouraged, however you do not have to join to use the information found here.
28+
If you wish to contribute, please join the Maps For HTML Community Group,
29+
and help us make the Web a map-friendly platform for everyone, everywhere!

‎index.html

Lines changed: 54 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,62 @@
11
<!doctype html>
2-
<html>
2+
<html lang="en">
33
<head>
4-
<title>index-map.html</title>
5-
<meta charset="UTF-8">
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1">
6+
<title>index.html</title>
67
<script type="module" src="web-map.js"></script>
7-
<style>
8-
html {height: 100%} body,map {height: inherit} * {margin: 0;padding: 0;}
8+
<style>
9+
html,
10+
body {
11+
height: 100%;
12+
}
13+
* {
14+
margin: 0;
15+
padding: 0;
16+
}
17+
18+
/* Specifying the `:defined` selector is recommended to style the map
19+
element, such that styles don't apply when fallback content is in use
20+
(e.g. when scripting is disabled or when custom/built-in elements isn't
21+
supported in the browser). */
22+
map[is="web-map"]:defined {
23+
/* Responsive map. */
24+
max-width: 100%;
25+
26+
/* Full viewport. */
27+
width: 100%;
28+
height: 100%;
29+
30+
/* Remove default (native-like) border. */
31+
/* border: none; */
32+
}
33+
34+
/* Pre-style to avoid FOUC of inline layer- and fallback content. */
35+
map[is="web-map"]:not(:defined) + img[usemap],
36+
map[is="web-map"]:not(:defined) > :not(area):not(.web-map) {
37+
display: none;
38+
}
39+
/* Ensure inline layer content is hidden if custom/built-in elements isn't
40+
supported, or if javascript is disabled. This needs to be defined separately
41+
from the above, because the `:not(:defined)` selector invalidates the entire
42+
declaration in browsers that do not support it. */
43+
layer- {
44+
display: none;
45+
}
946
</style>
47+
<noscript>
48+
<style>
49+
/* Ensure client-side image map fallbacks are displayed if custom/built-in
50+
elements is supported but javascript is disabled. */
51+
map[is="web-map"]:not(:defined) + img[usemap] {
52+
display: initial;
53+
}
54+
</style>
55+
</noscript>
1056
</head>
1157
<body>
12-
<map is="web-map" projection="CBMTILE" zoom="2" lat="45" lon="-90" controls >
13-
<layer- label='CBMT' src='https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/' checked></layer->
14-
</map>
58+
<map is="web-map" projection="CBMTILE" zoom="2" lat="45" lon="-90" controls>
59+
<layer- label="CBMT" src="https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/" checked></layer->
60+
</map>
1561
</body>
1662
</html>

‎layer.js

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,8 +91,6 @@ export class MapLayer extends HTMLElement {
9191
}
9292
}
9393
connectedCallback() {
94-
// this avoids displaying inline mapml content, such as features and inputs
95-
this.style = "display: none";
9694
this._ready();
9795
// if the map has been attached, set this layer up wrt Leaflet map
9896
if (this.parentNode._map) {
@@ -142,6 +140,16 @@ export class MapLayer extends HTMLElement {
142140
if (this._layerControl) {
143141
this._layerControl.addOrUpdateOverlay(this._layer, this.label);
144142
}
143+
if (!this._layer.error) {
144+
// re-use 'loadedmetadata' event from HTMLMediaElement inteface, applied
145+
// to MapML extent as metadata
146+
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event
147+
this.dispatchEvent(new CustomEvent('loadedmetadata', {detail:
148+
{target: this}}));
149+
} else {
150+
this.dispatchEvent(new CustomEvent('error', {detail:
151+
{target: this}}));
152+
}
145153
}
146154
_validateDisabled() {
147155
var layer = this._layer, map = layer._map;
@@ -206,6 +214,7 @@ export class MapLayer extends HTMLElement {
206214
if (this.checked) {
207215
this._layer.addTo(this._layer._map);
208216
}
217+
209218
// add the handler which toggles the 'checked' property based on the
210219
// user checking/unchecking the layer from the layer control
211220
// this must be done *after* the layer is actually added to the map

‎leaflet.fullscreen.css

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
.leaflet-control-fullscreen a {
2+
background:#fff no-repeat 0 0;
3+
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg version='1.1' viewBox='0 0 26 52' width='26' height='52' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg display='none'%3E%3Crect width='26' height='52' color='%23000000' display='inline' fill='%23f2f2f2'/%3E%3Crect y='26' width='26' height='26' color='%23000000' display='inline' fill='%23e6e6e6'/%3E%3C/g%3E%3Cg transform='translate(0 -1000.4)'%3E%3Cuse transform='translate(0,26)' width='100%25' height='100%25' xlink:href='%23rect15634'/%3E%3Cuse transform='translate(0,26)' width='100%25' height='100%25' xlink:href='%23path15639'/%3E%3Cuse transform='translate(0,26)' width='100%25' height='100%25' xlink:href='%23path16061'/%3E%3Cuse transform='translate(0,26)' width='100%25' height='100%25' xlink:href='%23path16059'/%3E%3Cpath id='rect15634' transform='translate(0 1000.4)' d='m5 15v6h6v-2h-4v-4z' color='%23000000' fill='%23404040'/%3E%3Cpath id='path15639' transform='translate(0 1000.4)' d='m21 15v6h-6v-2h4v-4z' color='%23000000' fill='%23404040'/%3E%3Cpath d='m10 1037.4v4l1 1h4l1-1v-4l-1-1h-4z' color='%23000000' fill='%23404040'/%3E%3Cpath id='path16059' d='m5 1011.4v-6h6v2h-4v4z' color='%23000000' fill='%23404040'/%3E%3Cpath id='path16061' d='m21 1011.4v-6h-6v2h4v4z' color='%23000000' fill='%23404040'/%3E%3C/g%3E%3C/svg%3E%0A");
4+
background-size:26px 52px;
5+
}
6+
.leaflet-touch .leaflet-control-fullscreen a {
7+
background-position: 2px 2px;
8+
}
9+
.leaflet-fullscreen-on .leaflet-control-fullscreen a {
10+
background-position:0 -26px;
11+
}
12+
.leaflet-touch.leaflet-fullscreen-on .leaflet-control-fullscreen a {
13+
background-position: 2px -24px;
14+
}
15+
16+
/* Do not combine these two rules; IE will break. */
17+
.leaflet-container:-webkit-full-screen {
18+
width:100%!important;
19+
height:100%!important;
20+
}
21+
.leaflet-container.leaflet-fullscreen-on {
22+
width:100%!important;
23+
height:100%!important;
24+
}
25+
26+
.leaflet-pseudo-fullscreen {
27+
position:fixed!important;
28+
width:100%!important;
29+
height:100%!important;
30+
top:0!important;
31+
left:0!important;
32+
z-index:99999;
33+
}

0 commit comments

Comments
 (0)