Skip to content

Commit b9c4807

Browse files
authored
Merge pull request #1 from Maps4HTML/master
Pull changes from Maps4HTML into local
2 parents 1832b63 + 21d397a commit b9c4807

File tree

5 files changed

+155
-15
lines changed

5 files changed

+155
-15
lines changed

README.md

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,29 @@
11

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

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

6-
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/).
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/).
77

8-
## Objective
8+
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).
99

10-
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.
11-
This element depends on the [MapML Leaflet Plugin javascript library](https://github.com/Maps4HTML/MapML-Leaflet-Plugin).
10+
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+
-->
22+
```html
23+
<map is="web-map" zoom="3" lat="0" lon="0" width="800" height="400" controls>
24+
<layer- src="https://geogratis.gc.ca/mapml/en/osmtile/osm/" label="OpenStreetMap" checked></layer->
25+
</map>
26+
```
1227

1328
## Maps4HTML Community Group
1429

bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"Maps for HTML Community Group"
77
],
88
"homepage": "http://maps4html.github.io/Web-Map-Custom-Element/",
9-
"license": "W3C SOFTWARE AND DOCUMENT NOTICE AND LICENSE",
9+
"license": "W3C",
1010
"keywords": [
1111
"web-components",
1212
"polymer",

demo/index.html

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,23 +34,24 @@
3434
<body>
3535
<div>
3636
<!-- the @width / @height attributes take precedence over properties, but currently don't change to reflect updates -->
37-
<img usemap="#dowslake" src="map1.png" width="700" height="400" alt="Dow's Lake area" />
37+
<!-- <img usemap="#dowslake" src="map1.png" width="700" height="400" alt="Dow's Lake area" />-->
3838
<map name="dowslake" is="web-map" zoom="17" lat="45.398043" lon="-75.70683" width="700" height="400" controls hidden>
39-
<layer- id="osm" src="http://geogratis.gc.ca/mapml/en/osmtile/osm/" label="Open Street Map" checked hidden></layer->
40-
<layer- id="cbmt" label="Canada Base Map" src="http://geogratis.gc.ca/mapml/en/osmtile/cbmt/" checked></layer->
41-
<layer- id="canvec" label="CanVec+ 031G" src="http://geogratis.gc.ca/mapml/canvec/50k/features/" class="transparency"></layer->
42-
<!-- the HTML author can create MapML files and serve them as layers if they prefer -->
39+
<layer- id="osm" src="http://geogratis.gc.ca/mapml/en/osmtile/osm/" label="Open Street Map" checked ></layer->
40+
<device-location centered></device-location>
41+
<!-- <layer- id="cbmt" label="Canada Base Map" src="http://geogratis.gc.ca/mapml/en/osmtile/cbmt/" checked></layer->-->
42+
<!-- <layer- id="canvec" label="CanVec+ 031G" src="http://geogratis.gc.ca/mapml/canvec/50k/features/" class="transparency"></layer->
43+
the HTML author can create MapML files and serve them as layers if they prefer
4344
<layer- id="marker" label="Marker layer" src="marker.mapml"></layer->
4445
45-
<!-- or the HTML author can create map 'area's (links) within the HTML document -->
46-
<!-- <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>-->
46+
or the HTML author can create map 'area's (links) within the HTML document
47+
<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>
4748
<area is="map-area" id="marker2" href='http://example.com/marker/' alt="Marker" coords="265,185,265,185" shape="marker">
4849
<area is="map-area" id="line" href='http://example.com/line/' alt="Line" coords="275,275,540,107" shape="line">
4950
5051
<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">
5152
<area is="map-area" id="hole" coords="250,250,7" shape="circle" style="fill: blue; stroke: none;fill-opacity: 0.3;">
5253
<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">
53-
<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">
54+
<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">-->
5455
</map>
5556
</div>
5657
</body>

device-location.html

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<dom-module id="device-location">
2+
<script>
3+
4+
Polymer({
5+
is: "device-location",
6+
properties: {
7+
lat : {
8+
type: Number,
9+
value: 0,
10+
reflectToAttribute: false
11+
},
12+
lon : {
13+
type: Number,
14+
value: 0,
15+
reflectToAttribute: false
16+
},
17+
centered : {
18+
type: Boolean,
19+
reflectToAttribute: true
20+
}
21+
},
22+
observers: [
23+
'_toggleCentered(centered)'
24+
],
25+
_toggleCentered: function (centered) {
26+
if (centered) {
27+
// TODO create a point feature on the controls pane at the map center
28+
// DONE register a watchPosition function to move the map as the device
29+
// location changes
30+
var self = this,
31+
options = {
32+
enableHighAccuracy: true,
33+
timeout: 5000,
34+
maximumAge: 0
35+
};
36+
function moveTo(position) {
37+
self.lat = position.coords.latitude;
38+
self.lon = position.coords.longitude;
39+
if (self.parentNode.zoomTo && self.parentNode._map) {
40+
// TODO when the zoomTo bug is fixed, remove zoom+1
41+
self.parentNode.zoomTo(self.lat,self.lon,self.parentNode.zoom+1);
42+
}
43+
};
44+
this._watchID = navigator.geolocation.watchPosition(moveTo,null,options);
45+
} else {
46+
this._deleteWatch();
47+
// TODO replace the marker on the control pane at the center of the map
48+
// with an actual point feature , or simply move that point from
49+
// the control pane to the vector pane
50+
51+
// TODO register a navigator.geolocation.watchPosition function to
52+
// update the location of the above point feature
53+
}
54+
},
55+
detached: function() {
56+
this._deleteWatch();
57+
// TODO if there is a point associated to this control, remove/delete it
58+
},
59+
attached: function() {
60+
this._deleteWatch();
61+
this._createWatch();
62+
if (this.parentNode.controls) {
63+
// add the device-location radio button control to the controls pane
64+
this._map = this.parentNode._map;
65+
}
66+
},
67+
ready: function() {
68+
if (this.centered) {
69+
var self = this,
70+
options = {
71+
enableHighAccuracy: true,
72+
timeout: 5000,
73+
maximumAge: 0
74+
};
75+
function moveTo(position) {
76+
self.lat = position.coords.latitude;
77+
self.lon = position.coords.longitude;
78+
if (self.parentNode.zoomTo && self.parentNode._map) {
79+
// TODO when the zoomTo bug is fixed, remove zoom+1
80+
self.parentNode.zoomTo(self.lat,self.lon,self.parentNode.zoom+1);
81+
}
82+
};
83+
this._watchID = navigator.geolocation.watchPosition(moveTo,null,options);
84+
}
85+
},
86+
// attached: function() {
87+
// this._deleteWatch();
88+
// // could have a _watchID from being created without being detached
89+
// // i.e. never having been attached before...
90+
// if (this.centered) {
91+
// // create point on the control layer at the map center...
92+
//
93+
// }
94+
//
95+
// },
96+
_deleteWatch: function() {
97+
if (this._watchID) {
98+
navigator.geolocation.clearWatch(this._watchID);
99+
delete this._watchID;
100+
}
101+
},
102+
_createWatch: function() {
103+
if (this.centered) {
104+
var self = this,
105+
options = {
106+
enableHighAccuracy: true,
107+
timeout: 5000,
108+
maximumAge: 0
109+
};
110+
function moveTo(position) {
111+
self.lat = position.coords.latitude;
112+
self.lon = position.coords.longitude;
113+
if (self.parentNode.zoomTo && self.parentNode._map) {
114+
// TODO when the zoomTo bug is fixed, remove zoom+1
115+
self.parentNode.zoomTo(self.lat,self.lon,self.parentNode.zoom+1);
116+
}
117+
};
118+
this._watchID = navigator.geolocation.watchPosition(moveTo,null,options);
119+
}
120+
}
121+
});
122+
</script>
123+
</dom-module>

web-map.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<link rel="import" href="./bower_components/polymer/polymer.html">
2+
<link rel="import" href="device-location.html">
23
<link rel="import" href="map-layer.html">
34
<link rel="import" href="map-area.html">
45
<!-- styles scoped to inside a custom element must be in a style module -->
56
<link rel="import" href="map-styles.html">
67

7-
<script src="./bower_components/polymer-leaflet/leaflet.js"></script>
8+
<script src="./bower_components/polymer-leaflet/leaflet-src.js"></script>
89
<script src="./bower_components/proj4Leaflet/lib/proj4-compressed.js"></script>
910
<script src="./bower_components/proj4Leaflet/src/proj4leaflet.js"></script>
1011
<script src="./bower_components/mapml-leaflet-plugin/mapml.js"></script>

0 commit comments

Comments
 (0)