Skip to content

Commit

Permalink
Merge pull request #1 from Maps4HTML/master
Browse files Browse the repository at this point in the history
Pull changes from Maps4HTML into local
  • Loading branch information
prushforth authored Dec 21, 2017
2 parents 1832b63 + 21d397a commit b9c4807
Show file tree
Hide file tree
Showing 5 changed files with 155 additions and 15 deletions.
25 changes: 20 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,29 @@

# web-map Customized Built-In <map> Element
# Customized Built-In <map> Element

[![Build Status](https://travis-ci.org/prushforth/Web-Map-Custom-Element.svg?branch=master)](https://travis-ci.org/prushforth/Web-Map-Custom-Element)

The web-map 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/).
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/).

## Objective
The HTML author can add MapML sources/layers by one or more the <`layer- src="..."`> elements as children of <`map`>. 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).

The objective of this web component is to upgrade the <map> HTML element to support modern Web mapping requirements. As such, it relies on [Map Markup Language](http://maps4html.github.io/mapml/spec/) which delivers map information as hypertext.
This element depends on the [MapML Leaflet Plugin javascript library](https://github.com/Maps4HTML/MapML-Leaflet-Plugin).
Example:
<!---
```
<custom-element-demo>
<template>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="web-map.html">
<next-code-block></next-code-block>
</template>
</custom-element-demo>
```
-->
```html
<map is="web-map" zoom="3" lat="0" lon="0" width="800" height="400" controls>
<layer- src="https://geogratis.gc.ca/mapml/en/osmtile/osm/" label="OpenStreetMap" checked></layer->
</map>
```

## Maps4HTML Community Group

Expand Down
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"Maps for HTML Community Group"
],
"homepage": "http://maps4html.github.io/Web-Map-Custom-Element/",
"license": "W3C SOFTWARE AND DOCUMENT NOTICE AND LICENSE",
"license": "W3C",
"keywords": [
"web-components",
"polymer",
Expand Down
17 changes: 9 additions & 8 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -34,23 +34,24 @@
<body>
<div>
<!-- the @width / @height attributes take precedence over properties, but currently don't change to reflect updates -->
<img usemap="#dowslake" src="map1.png" width="700" height="400" alt="Dow's Lake area" />
<!-- <img usemap="#dowslake" src="map1.png" width="700" height="400" alt="Dow's Lake area" />-->
<map name="dowslake" is="web-map" zoom="17" lat="45.398043" lon="-75.70683" width="700" height="400" controls hidden>
<layer- id="osm" src="http://geogratis.gc.ca/mapml/en/osmtile/osm/" label="Open Street Map" checked hidden></layer->
<layer- id="cbmt" label="Canada Base Map" src="http://geogratis.gc.ca/mapml/en/osmtile/cbmt/" checked></layer->
<layer- id="canvec" label="CanVec+ 031G" src="http://geogratis.gc.ca/mapml/canvec/50k/features/" class="transparency"></layer->
<!-- the HTML author can create MapML files and serve them as layers if they prefer -->
<layer- id="osm" src="http://geogratis.gc.ca/mapml/en/osmtile/osm/" label="Open Street Map" checked ></layer->
<device-location centered></device-location>
<!-- <layer- id="cbmt" label="Canada Base Map" src="http://geogratis.gc.ca/mapml/en/osmtile/cbmt/" checked></layer->-->
<!-- <layer- id="canvec" label="CanVec+ 031G" src="http://geogratis.gc.ca/mapml/canvec/50k/features/" class="transparency"></layer->
the HTML author can create MapML files and serve them as layers if they prefer
<layer- id="marker" label="Marker layer" src="marker.mapml"></layer->
<!-- or the HTML author can create map 'area's (links) within the HTML document -->
<!-- <area is="map-area"id="wholemap" href='http://example.com/default/' alt="Default" shape="default" style="fill: salmon; stroke: none; fill-opacity: 0.01"></map-area>-->
or the HTML author can create map 'area's (links) within the HTML document
<area is="map-area"id="wholemap" href='http://example.com/default/' alt="Default" shape="default" style="fill: salmon; stroke: none; fill-opacity: 0.01"></map-area>
<area is="map-area" id="marker2" href='http://example.com/marker/' alt="Marker" coords="265,185,265,185" shape="marker">
<area is="map-area" id="line" href='http://example.com/line/' alt="Line" coords="275,275,540,107" shape="line">
<area is="map-area" id="doughnut" alt="Circle" href='http://example.com/circle/' coords="250,250,25" shape="circle" style="fill: white; stroke: aqua; stroke-width: 5px;fill-opacity: 0.0">
<area is="map-area" id="hole" coords="250,250,7" shape="circle" style="fill: blue; stroke: none;fill-opacity: 0.3;">
<area is="map-area" id="rect" href='http://example.com/rectangle/' alt="Rectangle" coords="345,290,415,320" shape="rect" style="fill: greenyellow; stroke: blue; stroke-width: 3px;fill-opacity: 0.4">
<area is="map-area" id="poly" href='http://example.com/polygon/' alt="Polygon" coords="392,116,430,100,441,128,405,145" shape="poly" style="fill: pink; stroke: blue; stroke-width: 3px;fill-opacity: 0.4">
<area is="map-area" id="poly" href='http://example.com/polygon/' alt="Polygon" coords="392,116,430,100,441,128,405,145" shape="poly" style="fill: pink; stroke: blue; stroke-width: 3px;fill-opacity: 0.4">-->
</map>
</div>
</body>
Expand Down
123 changes: 123 additions & 0 deletions device-location.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<dom-module id="device-location">
<script>

Polymer({
is: "device-location",
properties: {
lat : {
type: Number,
value: 0,
reflectToAttribute: false
},
lon : {
type: Number,
value: 0,
reflectToAttribute: false
},
centered : {
type: Boolean,
reflectToAttribute: true
}
},
observers: [
'_toggleCentered(centered)'
],
_toggleCentered: function (centered) {
if (centered) {
// TODO create a point feature on the controls pane at the map center
// DONE register a watchPosition function to move the map as the device
// location changes
var self = this,
options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
function moveTo(position) {
self.lat = position.coords.latitude;
self.lon = position.coords.longitude;
if (self.parentNode.zoomTo && self.parentNode._map) {
// TODO when the zoomTo bug is fixed, remove zoom+1
self.parentNode.zoomTo(self.lat,self.lon,self.parentNode.zoom+1);
}
};
this._watchID = navigator.geolocation.watchPosition(moveTo,null,options);
} else {
this._deleteWatch();
// TODO replace the marker on the control pane at the center of the map
// with an actual point feature , or simply move that point from
// the control pane to the vector pane

// TODO register a navigator.geolocation.watchPosition function to
// update the location of the above point feature
}
},
detached: function() {
this._deleteWatch();
// TODO if there is a point associated to this control, remove/delete it
},
attached: function() {
this._deleteWatch();
this._createWatch();
if (this.parentNode.controls) {
// add the device-location radio button control to the controls pane
this._map = this.parentNode._map;
}
},
ready: function() {
if (this.centered) {
var self = this,
options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
function moveTo(position) {
self.lat = position.coords.latitude;
self.lon = position.coords.longitude;
if (self.parentNode.zoomTo && self.parentNode._map) {
// TODO when the zoomTo bug is fixed, remove zoom+1
self.parentNode.zoomTo(self.lat,self.lon,self.parentNode.zoom+1);
}
};
this._watchID = navigator.geolocation.watchPosition(moveTo,null,options);
}
},
// attached: function() {
// this._deleteWatch();
// // could have a _watchID from being created without being detached
// // i.e. never having been attached before...
// if (this.centered) {
// // create point on the control layer at the map center...
//
// }
//
// },
_deleteWatch: function() {
if (this._watchID) {
navigator.geolocation.clearWatch(this._watchID);
delete this._watchID;
}
},
_createWatch: function() {
if (this.centered) {
var self = this,
options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
function moveTo(position) {
self.lat = position.coords.latitude;
self.lon = position.coords.longitude;
if (self.parentNode.zoomTo && self.parentNode._map) {
// TODO when the zoomTo bug is fixed, remove zoom+1
self.parentNode.zoomTo(self.lat,self.lon,self.parentNode.zoom+1);
}
};
this._watchID = navigator.geolocation.watchPosition(moveTo,null,options);
}
}
});
</script>
</dom-module>
3 changes: 2 additions & 1 deletion web-map.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="device-location.html">
<link rel="import" href="map-layer.html">
<link rel="import" href="map-area.html">
<!-- styles scoped to inside a custom element must be in a style module -->
<link rel="import" href="map-styles.html">

<script src="./bower_components/polymer-leaflet/leaflet.js"></script>
<script src="./bower_components/polymer-leaflet/leaflet-src.js"></script>
<script src="./bower_components/proj4Leaflet/lib/proj4-compressed.js"></script>
<script src="./bower_components/proj4Leaflet/src/proj4leaflet.js"></script>
<script src="./bower_components/mapml-leaflet-plugin/mapml.js"></script>
Expand Down

0 comments on commit b9c4807

Please sign in to comment.