Skip to content

Commit 8698640

Browse files
prushforthprushforth
committed
Add query custom handler and popup iframe
1 parent 39ed7a6 commit 8698640

File tree

3 files changed

+173
-170
lines changed

3 files changed

+173
-170
lines changed

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<!doctype html>
2+
23
<html>
34
<head>
45
<title>web-map</title>

‎map-area.html‎

Lines changed: 170 additions & 170 deletions
Original file line numberDiff line numberDiff line change
@@ -1,170 +1,170 @@
1-
<link rel="import" href="../polymer/polymer.html">
2-
<!-- styles scoped to inside a custom element must be in a style module -->
3-
<link rel="import" href="map-styles.html">
4-
5-
<script src="../polymer-leaflet/leaflet-src.js"></script>
6-
<script src="../proj4/dist/proj4.js"></script>
7-
<script src="../proj4leaflet/src/proj4leaflet.js"></script>
8-
<script src="../mapml-leaflet-plugin/mapml.min.js"></script>
9-
10-
<dom-module id="map-area">
11-
<style include="map-styles">
12-
:host {
13-
display: none;
14-
}
15-
</style>
16-
<script>
17-
MapArea = Polymer({
18-
is: "map-area",
19-
extends: "area",
20-
properties: {
21-
alt : {
22-
type: String,
23-
reflectToAttribute: true
24-
},
25-
coords : {
26-
type: String,
27-
reflectToAttribute: true
28-
},
29-
href : {
30-
type: String,
31-
reflectToAttribute: true
32-
},
33-
shape : {
34-
type: String,
35-
/* to HTML5's default, circle, poly and rect, add marker, line */
36-
value: 'default',
37-
reflectToAttribute: true
38-
},
39-
rel : {
40-
type: String,
41-
reflectToAttribute: true
42-
},
43-
type : {
44-
type: String,
45-
reflectToAttribute: true
46-
},
47-
target : {
48-
type: String,
49-
reflectToAttribute: true
50-
}
51-
},
52-
attached: function() {
53-
// if the map has been attached, set this layer up wrt Leaflet map
54-
if (this.parentElement._map) {
55-
this._attachedToMap();
56-
}
57-
},
58-
_attachedToMap: function() {
59-
// need the map to convert container points to LatLngs
60-
this._map = this.parentElement._map;
61-
var map = this.parentElement._map;
62-
63-
// don't go through this if already done
64-
if (!this._feature) {
65-
// TODO??? SCALE this.coords if the this._map.poster exists because
66-
// the img might have been scaled by CSS.
67-
// compute the style properties to be applied to the feature
68-
var options = this._styleToPathOptions(window.getComputedStyle(this)),
69-
points = this.coords ? this._coordsToArray(this.coords): null;
70-
// scale points if the poster exists because responsive areas
71-
if (points && this.parentElement.poster) {
72-
var worig = this.parentElement.poster.width,
73-
wresp = this.parentElement.width,
74-
wadjstmnt = (worig - wresp)/2;
75-
for (var i = 0; i< points.length;i++) {
76-
points[i][0] = points[i][0] - wadjstmnt;
77-
}
78-
}
79-
80-
if (this.shape === 'marker') {
81-
if (this.alt) {
82-
// Leaflet markers use the options.title as a tooltip
83-
options['title'] = this.alt;
84-
}
85-
// hack
86-
L.Icon.Default.prototype.options.imagePath = M.MapMLLayer.prototype._detectImagePath(map._container);
87-
this._feature = L.marker(map.containerPointToLatLng(points[0]),options).addTo(map);
88-
} else if (this.shape === 'circle') {
89-
var pixelRadius = parseInt(this.coords.split(",")[2]),
90-
pointOnCirc = L.point(points[0]).add(L.point(0,pixelRadius)),
91-
latLngOnCirc = map.containerPointToLatLng(pointOnCirc),
92-
latLngCenter = map.containerPointToLatLng(points[0]),
93-
radiusInMeters = map.distance(latLngCenter, latLngOnCirc);
94-
this._feature = L.circle(latLngCenter, radiusInMeters, options).addTo(map);
95-
} else if (!this.shape || this.shape === 'rect') {
96-
var bounds = L.latLngBounds(map.containerPointToLatLng(points[0]), map.containerPointToLatLng(points[1]));
97-
this._feature = L.rectangle(bounds, options).addTo(map);
98-
} else if (this.shape === 'line') {
99-
this._feature = L.polyline(this._pointsToLatLngs(points),options).addTo(map);
100-
} else if (this.shape === 'poly') {
101-
this._feature = L.polygon(this._pointsToLatLngs(points),options).addTo(map);
102-
} else if (this.shape === 'default') {
103-
// whole initial area of map is a hyperlink
104-
this._feature = L.rectangle(map.getBounds(),options).addTo(map);
105-
}
106-
if (this.shape !== 'marker' && this.alt) {
107-
// other Leaflet features are implemented via SVG. SVG displays tooltips
108-
// based on the <svg:title> graphics child element.
109-
var title = L.SVG.create('title'),
110-
titleText = document.createTextNode(this.alt);
111-
Polymer.dom(title).appendChild(titleText);
112-
Polymer.dom(this._feature._path).appendChild(title);
113-
}
114-
if (this.href) {
115-
// conditionally act on click on an area link. If no link it should be an
116-
// inert area, but Leaflet doesn't quite support this. For a full
117-
// implementation, we could actually use an image map replete with area
118-
// children which would provide the linking / cursor change behaviours
119-
// that are familiar to HTML authors versed in image maps.
120-
this._feature.on('click', function() {if (this.href) {window.open(this.href);}}, this);
121-
}
122-
}
123-
},
124-
detached: function() {
125-
this._map.removeLayer(this._feature);
126-
delete this._feature;
127-
},
128-
_coordsToArray: function (containerPoints) {
129-
// returns an array of arrays of coordinate pairs coordsToArray("1,2,3,4") -> [[1,2],[3,4]]
130-
for (var i=1, points = [], coords = containerPoints.split(",");i<coords.length;i+=2) {
131-
points.push([parseInt(coords[i-1]),parseInt(coords[i])]);
132-
}
133-
return points;
134-
},
135-
_pointsToLatLngs: function(points) {
136-
// points should be an array of nested container coordinates [[x1,y1],[x2,y2](,[xN,yN])]
137-
var latLngArray = [];
138-
if (this._map) {
139-
for (var i=0,map = this._map;i<points.length;i++) {
140-
latLngArray.push(map.containerPointToLatLng(points[i]));
141-
}
142-
}
143-
return latLngArray;
144-
},
145-
_styleToPathOptions: function(style) {
146-
var options = {};
147-
if(style.stroke !== 'none') {
148-
options['stroke'] = true;
149-
options['color'] = style.stroke;
150-
options['opacity'] = style.strokeOpacity;
151-
options['weight'] = parseInt(style.strokeWidth);
152-
options['dashArray'] = style.strokeDasharray;
153-
options['lineCap'] = style.strokeLinecap;
154-
options['lineJoin'] = style.strokeLinejoin;
155-
} else {
156-
options['stroke'] = false;
157-
}
158-
if (style.fill !== 'none') {
159-
options['fill'] = true;
160-
options['fillColor'] = style.fill;
161-
options['fillOpacity'] = style.fillOpacity;
162-
options['fillRule'] = style.fillRule;
163-
} else {
164-
options['fill'] = false;
165-
}
166-
return options;
167-
}
168-
});
169-
</script>
170-
</dom-module>
1+
<link rel="import" href="../polymer/polymer.html">
2+
<!-- styles scoped to inside a custom element must be in a style module -->
3+
<link rel="import" href="map-styles.html">
4+
5+
<script src="../polymer-leaflet/leaflet-src.js"></script>
6+
<script src="../proj4/dist/proj4.js"></script>
7+
<script src="../proj4leaflet/src/proj4leaflet.js"></script>
8+
<script src="../mapml-leaflet-plugin/mapml.min.js"></script>
9+
10+
<dom-module id="map-area">
11+
<style include="map-styles">
12+
:host {
13+
display: none;
14+
}
15+
</style>
16+
<script>
17+
MapArea = Polymer({
18+
is: "map-area",
19+
extends: "area",
20+
properties: {
21+
alt : {
22+
type: String,
23+
reflectToAttribute: true
24+
},
25+
coords : {
26+
type: String,
27+
reflectToAttribute: true
28+
},
29+
href : {
30+
type: String,
31+
reflectToAttribute: true
32+
},
33+
shape : {
34+
type: String,
35+
/* to HTML5's default, circle, poly and rect, add marker, line */
36+
value: 'default',
37+
reflectToAttribute: true
38+
},
39+
rel : {
40+
type: String,
41+
reflectToAttribute: true
42+
},
43+
type : {
44+
type: String,
45+
reflectToAttribute: true
46+
},
47+
target : {
48+
type: String,
49+
reflectToAttribute: true
50+
}
51+
},
52+
attached: function() {
53+
// if the map has been attached, set this layer up wrt Leaflet map
54+
if (this.parentElement._map) {
55+
this._attachedToMap();
56+
}
57+
},
58+
_attachedToMap: function() {
59+
// need the map to convert container points to LatLngs
60+
this._map = this.parentElement._map;
61+
var map = this.parentElement._map;
62+
63+
// don't go through this if already done
64+
if (!this._feature) {
65+
// TODO??? SCALE this.coords if the this._map.poster exists because
66+
// the img might have been scaled by CSS.
67+
// compute the style properties to be applied to the feature
68+
var options = this._styleToPathOptions(window.getComputedStyle(this)),
69+
points = this.coords ? this._coordsToArray(this.coords): null;
70+
// scale points if the poster exists because responsive areas
71+
if (points && this.parentElement.poster) {
72+
var worig = this.parentElement.poster.width,
73+
wresp = this.parentElement.width,
74+
wadjstmnt = (worig - wresp)/2;
75+
for (var i = 0; i< points.length;i++) {
76+
points[i][0] = points[i][0] - wadjstmnt;
77+
}
78+
}
79+
80+
if (this.shape === 'marker') {
81+
if (this.alt) {
82+
// Leaflet markers use the options.title as a tooltip
83+
options['title'] = this.alt;
84+
}
85+
// hack
86+
L.Icon.Default.prototype.options.imagePath = M.detectImagePath(map._container);
87+
this._feature = L.marker(map.containerPointToLatLng(points[0]),options).addTo(map);
88+
} else if (this.shape === 'circle') {
89+
var pixelRadius = parseInt(this.coords.split(",")[2]),
90+
pointOnCirc = L.point(points[0]).add(L.point(0,pixelRadius)),
91+
latLngOnCirc = map.containerPointToLatLng(pointOnCirc),
92+
latLngCenter = map.containerPointToLatLng(points[0]),
93+
radiusInMeters = map.distance(latLngCenter, latLngOnCirc);
94+
this._feature = L.circle(latLngCenter, radiusInMeters, options).addTo(map);
95+
} else if (!this.shape || this.shape === 'rect') {
96+
var bounds = L.latLngBounds(map.containerPointToLatLng(points[0]), map.containerPointToLatLng(points[1]));
97+
this._feature = L.rectangle(bounds, options).addTo(map);
98+
} else if (this.shape === 'line') {
99+
this._feature = L.polyline(this._pointsToLatLngs(points),options).addTo(map);
100+
} else if (this.shape === 'poly') {
101+
this._feature = L.polygon(this._pointsToLatLngs(points),options).addTo(map);
102+
} else if (this.shape === 'default') {
103+
// whole initial area of map is a hyperlink
104+
this._feature = L.rectangle(map.getBounds(),options).addTo(map);
105+
}
106+
if (this.shape !== 'marker' && this.alt) {
107+
// other Leaflet features are implemented via SVG. SVG displays tooltips
108+
// based on the <svg:title> graphics child element.
109+
var title = L.SVG.create('title'),
110+
titleText = document.createTextNode(this.alt);
111+
Polymer.dom(title).appendChild(titleText);
112+
Polymer.dom(this._feature._path).appendChild(title);
113+
}
114+
if (this.href) {
115+
// conditionally act on click on an area link. If no link it should be an
116+
// inert area, but Leaflet doesn't quite support this. For a full
117+
// implementation, we could actually use an image map replete with area
118+
// children which would provide the linking / cursor change behaviours
119+
// that are familiar to HTML authors versed in image maps.
120+
this._feature.on('click', function() {if (this.href) {window.open(this.href);}}, this);
121+
}
122+
}
123+
},
124+
detached: function() {
125+
this._map.removeLayer(this._feature);
126+
delete this._feature;
127+
},
128+
_coordsToArray: function (containerPoints) {
129+
// returns an array of arrays of coordinate pairs coordsToArray("1,2,3,4") -> [[1,2],[3,4]]
130+
for (var i=1, points = [], coords = containerPoints.split(",");i<coords.length;i+=2) {
131+
points.push([parseInt(coords[i-1]),parseInt(coords[i])]);
132+
}
133+
return points;
134+
},
135+
_pointsToLatLngs: function(points) {
136+
// points should be an array of nested container coordinates [[x1,y1],[x2,y2](,[xN,yN])]
137+
var latLngArray = [];
138+
if (this._map) {
139+
for (var i=0,map = this._map;i<points.length;i++) {
140+
latLngArray.push(map.containerPointToLatLng(points[i]));
141+
}
142+
}
143+
return latLngArray;
144+
},
145+
_styleToPathOptions: function(style) {
146+
var options = {};
147+
if(style.stroke !== 'none') {
148+
options['stroke'] = true;
149+
options['color'] = style.stroke;
150+
options['opacity'] = style.strokeOpacity;
151+
options['weight'] = parseInt(style.strokeWidth);
152+
options['dashArray'] = style.strokeDasharray;
153+
options['lineCap'] = style.strokeLinecap;
154+
options['lineJoin'] = style.strokeLinejoin;
155+
} else {
156+
options['stroke'] = false;
157+
}
158+
if (style.fill !== 'none') {
159+
options['fill'] = true;
160+
options['fillColor'] = style.fill;
161+
options['fillOpacity'] = style.fillOpacity;
162+
options['fillRule'] = style.fillRule;
163+
} else {
164+
options['fill'] = false;
165+
}
166+
return options;
167+
}
168+
});
169+
</script>
170+
</dom-module>

‎web-map.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -223,6 +223,8 @@
223223
this._map = L.map(this.$.map, {
224224
center: new L.LatLng(this.lat, this.lon),
225225
projection: this.projection,
226+
query: true,
227+
mapEl: this,
226228
crs: M[this.projection],
227229
zoom: this.zoom,
228230
zoomControl: false,

0 commit comments

Comments
 (0)