Updates for release 0.8.0 #138
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,172 @@ | ||
| (function (factory) { | ||
| if (typeof define === 'function' && define.amd) { | ||
| // AMD | ||
| define(['leaflet'], factory); | ||
| } else if (typeof module !== 'undefined') { | ||
| // Node/CommonJS | ||
| module.exports = factory(require('leaflet')); | ||
| } else { | ||
| // Browser globals | ||
| if (typeof window.L === 'undefined') { | ||
| throw new Error('Leaflet must be loaded first'); | ||
| } | ||
| factory(window.L); | ||
| } | ||
| }(function (L) { | ||
| L.Control.Fullscreen = L.Control.extend({ | ||
| options: { | ||
| position: 'topleft', | ||
| title: { | ||
| 'false': 'View Fullscreen', | ||
| 'true': 'Exit Fullscreen' | ||
| } | ||
| }, | ||
|
|
||
| onAdd: function (map) { | ||
| var container = L.DomUtil.create('div', 'leaflet-control-fullscreen leaflet-bar leaflet-control'); | ||
|
|
||
| this.link = L.DomUtil.create('a', 'leaflet-control-fullscreen-button leaflet-bar-part', container); | ||
| this.link.href = '#'; | ||
|
|
||
| this._map = map; | ||
| this._map.on('fullscreenchange', this._toggleTitle, this); | ||
| this._toggleTitle(); | ||
|
|
||
| L.DomEvent.on(this.link, 'click', this._click, this); | ||
|
|
||
| return container; | ||
| }, | ||
|
|
||
| onRemove: function (map) { | ||
| map.off('fullscreenchange', this._toggleTitle, this); | ||
| }, | ||
|
|
||
| _click: function (e) { | ||
| L.DomEvent.stopPropagation(e); | ||
| L.DomEvent.preventDefault(e); | ||
| this._map.toggleFullscreen(this.options); | ||
| }, | ||
|
|
||
| _toggleTitle: function() { | ||
| this.link.title = this.options.title[this._map.isFullscreen()]; | ||
| } | ||
| }); | ||
|
|
||
| L.Map.include({ | ||
| isFullscreen: function () { | ||
| return this._isFullscreen || false; | ||
| }, | ||
|
|
||
| toggleFullscreen: function (options) { | ||
| var container = this.getContainer(); | ||
| if (this.isFullscreen()) { | ||
| if (options && options.pseudoFullscreen) { | ||
| this._disablePseudoFullscreen(container); | ||
| } else if (document.exitFullscreen) { | ||
| document.exitFullscreen(); | ||
| } else if (document.mozCancelFullScreen) { | ||
| document.mozCancelFullScreen(); | ||
| } else if (document.webkitCancelFullScreen) { | ||
| document.webkitCancelFullScreen(); | ||
| } else if (document.msExitFullscreen) { | ||
| document.msExitFullscreen(); | ||
| } else { | ||
| this._disablePseudoFullscreen(container); | ||
| } | ||
| } else { | ||
| if (options && options.pseudoFullscreen) { | ||
| this._enablePseudoFullscreen(container); | ||
| } else if (container.requestFullscreen) { | ||
| container.requestFullscreen(); | ||
| } else if (container.mozRequestFullScreen) { | ||
| container.mozRequestFullScreen(); | ||
| } else if (container.webkitRequestFullscreen) { | ||
| container.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); | ||
| } else if (container.msRequestFullscreen) { | ||
| container.msRequestFullscreen(); | ||
| } else { | ||
| this._enablePseudoFullscreen(container); | ||
| } | ||
| } | ||
|
|
||
| }, | ||
|
|
||
| _enablePseudoFullscreen: function (container) { | ||
| L.DomUtil.addClass(container, 'leaflet-pseudo-fullscreen'); | ||
| this._setFullscreen(true); | ||
| this.fire('fullscreenchange'); | ||
| }, | ||
|
|
||
| _disablePseudoFullscreen: function (container) { | ||
| L.DomUtil.removeClass(container, 'leaflet-pseudo-fullscreen'); | ||
| this._setFullscreen(false); | ||
| this.fire('fullscreenchange'); | ||
| }, | ||
|
|
||
| _setFullscreen: function(fullscreen) { | ||
| this._isFullscreen = fullscreen; | ||
| var container = this.getContainer(); | ||
| if (fullscreen) { | ||
| L.DomUtil.addClass(container, 'leaflet-fullscreen-on'); | ||
| } else { | ||
| L.DomUtil.removeClass(container, 'leaflet-fullscreen-on'); | ||
| } | ||
| this.invalidateSize(); | ||
| }, | ||
|
|
||
| _onFullscreenChange: function (e) { | ||
| var fullscreenElement = | ||
| document.fullscreenElement || | ||
| document.mozFullScreenElement || | ||
| document.webkitFullscreenElement || | ||
| document.msFullscreenElement; | ||
|
|
||
| if ( !this._isFullscreen) { | ||
| this._setFullscreen(true); | ||
| this.fire('fullscreenchange'); | ||
| } else if ( this._isFullscreen) { | ||
| this._setFullscreen(false); | ||
| this.fire('fullscreenchange'); | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| L.Map.mergeOptions({ | ||
| fullscreenControl: false | ||
| }); | ||
|
|
||
| L.Map.addInitHook(function () { | ||
| if (this.options.fullscreenControl) { | ||
| this.fullscreenControl = new L.Control.Fullscreen(this.options.fullscreenControl); | ||
| this.addControl(this.fullscreenControl); | ||
| } | ||
|
|
||
| var fullscreenchange; | ||
|
|
||
| if ('onfullscreenchange' in document) { | ||
| fullscreenchange = 'fullscreenchange'; | ||
| } else if ('onmozfullscreenchange' in document) { | ||
| fullscreenchange = 'mozfullscreenchange'; | ||
| } else if ('onwebkitfullscreenchange' in document) { | ||
| fullscreenchange = 'webkitfullscreenchange'; | ||
| } else if ('onmsfullscreenchange' in document) { | ||
| fullscreenchange = 'MSFullscreenChange'; | ||
| } | ||
|
|
||
| if (fullscreenchange) { | ||
| var onFullscreenChange = L.bind(this._onFullscreenChange, this); | ||
|
|
||
| this.whenReady(function () { | ||
| L.DomEvent.on(document, fullscreenchange, onFullscreenChange); | ||
| }); | ||
|
|
||
| this.on('unload', function () { | ||
| L.DomEvent.off(document, fullscreenchange, onFullscreenChange); | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| L.control.fullscreen = function (options) { | ||
| return new L.Control.Fullscreen(options); | ||
| }; | ||
| })); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,29 @@ | ||
|
|
||
| # Customized built-in <map> element | ||
|
|
||
|  | ||
|
|
||
| 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/). | ||
|
There was a problem hiding this comment. Should we care to change this URL to https://maps4html.org/MapML/spec/ here? |
||
|
|
||
| The HTML author can add <span title="Map Markup Language">[MapML](https://maps4html.org/MapML/spec/)</span> | ||
| sources/layers by specifying one or more `<layer->` elements as children of `<map>`. | ||
| The map provides a default set of controls which are turned on or off with the map's `controls` boolean attribute. | ||
| The `width` and `height` attributes of the map should be specified, and can be overriden using CSS properties. | ||
| The initial zoom and location of the map are controlled by the `zoom`, `lat` and `lon` attributes. | ||
| The default `projection` is `OSMTILE` (Web Mercator). | ||
|
|
||
| Example: | ||
|
|
||
| ```html | ||
| <map is="web-map" zoom="3" lat="0" lon="0" controls> | ||
| <layer- src="https://geogratis.gc.ca/mapml/en/osmtile/osm/" label="OpenStreetMap" checked></layer-> | ||
| </map> | ||
| ``` | ||
|
|
||
| ## Maps for HTML Community Group | ||
|
|
||
| MapML and the <map> custom element are being developed by the W3C [Maps for HTML Community Group](http://www.w3.org/community/maps4html/). | ||
| Membership in the group is encouraged, however you do not have to join to use the information found here. | ||
| 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! | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,62 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | ||
| <title>index.html</title> | ||
| <script type="module" src="web-map.js"></script> | ||
| <style> | ||
| html, | ||
| body { | ||
| height: 100%; | ||
| } | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| /* Specifying the `:defined` selector is recommended to style the map | ||
| element, such that styles don't apply when fallback content is in use | ||
| (e.g. when scripting is disabled or when custom/built-in elements isn't | ||
| supported in the browser). */ | ||
| map[is="web-map"]:defined { | ||
| /* Responsive map. */ | ||
| max-width: 100%; | ||
|
|
||
| /* Full viewport. */ | ||
| width: 100%; | ||
| height: 100%; | ||
|
|
||
| /* Remove default (native-like) border. */ | ||
| /* border: none; */ | ||
| } | ||
|
|
||
| /* Pre-style to avoid FOUC of inline layer- and fallback content. */ | ||
| map[is="web-map"]:not(:defined) + img[usemap], | ||
| map[is="web-map"]:not(:defined) > :not(area):not(.web-map) { | ||
| display: none; | ||
| } | ||
| /* Ensure inline layer content is hidden if custom/built-in elements isn't | ||
| supported, or if javascript is disabled. This needs to be defined separately | ||
| from the above, because the `:not(:defined)` selector invalidates the entire | ||
| declaration in browsers that do not support it. */ | ||
| layer- { | ||
| display: none; | ||
| } | ||
| </style> | ||
| <noscript> | ||
| <style> | ||
| /* Ensure client-side image map fallbacks are displayed if custom/built-in | ||
| elements is supported but javascript is disabled. */ | ||
| map[is="web-map"]:not(:defined) + img[usemap] { | ||
| display: initial; | ||
| } | ||
| </style> | ||
| </noscript> | ||
| </head> | ||
| <body> | ||
| <map is="web-map" projection="CBMTILE" zoom="2" lat="45" lon="-90" controls> | ||
| <layer- label="CBMT" src="https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/" checked></layer-> | ||
| </map> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| .leaflet-control-fullscreen a { | ||
| background:#fff no-repeat 0 0; | ||
| 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"); | ||
| background-size:26px 52px; | ||
| } | ||
| .leaflet-touch .leaflet-control-fullscreen a { | ||
| background-position: 2px 2px; | ||
| } | ||
| .leaflet-fullscreen-on .leaflet-control-fullscreen a { | ||
| background-position:0 -26px; | ||
| } | ||
| .leaflet-touch.leaflet-fullscreen-on .leaflet-control-fullscreen a { | ||
| background-position: 2px -24px; | ||
| } | ||
|
|
||
| /* Do not combine these two rules; IE will break. */ | ||
| .leaflet-container:-webkit-full-screen { | ||
| width:100%!important; | ||
| height:100%!important; | ||
| } | ||
| .leaflet-container.leaflet-fullscreen-on { | ||
| width:100%!important; | ||
| height:100%!important; | ||
| } | ||
|
|
||
| .leaflet-pseudo-fullscreen { | ||
| position:fixed!important; | ||
| width:100%!important; | ||
| height:100%!important; | ||
| top:0!important; | ||
| left:0!important; | ||
| z-index:99999; | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
TBH I didn't know there was a
buildsbranch! I don't have much experience with managing repos, and don't fully understand why a separate branch is needed (to have a "stable" version"?). Anyhow, should this URL point tobranch=master?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So the reason that I think we need a builds branch is so that a user can npm install the package and it doesn't need to be built in order to be useful and also so that people who do npm install it aren't deluged in content that is specific to development and testing. I thought it would make it simpler for users, but I realize that just getting your system ready to do 'npm install' is actually a big headache, that is not necessary to use the elements. So having a branch that only contains what you need to run / use the elements is what I was shooting for. I'm not quite sure I've hit the mark, as I don't know how you download the content of the builds branch by itself except through the npm install process.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@ahmadayubi
It's a mistake in the Gruntfile.js. I will fix it. Since mapml.min.js is not referenced anywhere, it' probably not that useful, but maybe if someone wants to use the custom elements on their own web site they might find a use for it (performance, download size).