SHOW:
|
|
- or go back to the newest paste.
1 | var that = this; | |
2 | if (params.fusion) { | |
3 | var loadingElement = "<div class='mapsLoading' style='position: absolute; left: 45%; top: 5%; background: #fff; border: 1px solid #000; padding: 5px;'>Loading...</div>"; | |
4 | elem.append(loadingElement) | |
5 | ||
6 | that.fusionRequest(params.fusion.states, 'name, geometry', null); | |
7 | ||
8 | google.maps.event.addListener(that.map, 'zoom_changed', function() { | |
9 | elem.append(loadingElement) | |
10 | ||
11 | var zoomValue = this.getZoom(); | |
12 | var mapCenter = this.getCenter(); | |
13 | ||
14 | for (var key in that.polygons) { | |
15 | that.polygons[key].setMap(null); | |
16 | delete(that.polygons[key]); | |
17 | } | |
18 | ||
19 | if (zoomValue > 7 && zoomValue < 11) { | |
20 | that.fusionRequest( | |
21 | params.fusion.cities, | |
22 | 'name, geometry', | |
23 | 'WHERE ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + mapCenter.lat() + ',' + mapCenter.lng() + '), 100000))' | |
24 | ); | |
25 | } else if (zoomValue <= 7) { | |
26 | that.fusionRequest(params.fusion.states, 'name, geometry', null); | |
27 | } else if (zoomValue >= 11) { | |
28 | that.fusionRequest( | |
29 | params.fusion.zip, | |
30 | 'ZIP, geometry', | |
31 | 'WHERE ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + mapCenter.lat() + ',' + mapCenter.lng() + '), 100000))' | |
32 | ); | |
33 | } | |
34 | }); | |
35 | ||
36 | google.maps.event.addListener(that.map, 'dragend', function() { | |
37 | var zoomValue = this.getZoom(); | |
38 | var mapCenter = this.getCenter(); | |
39 | var key; | |
40 | ||
41 | if (zoomValue > 7 && zoomValue < 10) { | |
42 | elem.append(loadingElement) | |
43 | ||
44 | for (key in that.polygons) { | |
45 | that.polygons[key].setMap(null); | |
46 | delete(that.polygons[key]); | |
47 | } | |
48 | ||
49 | that.fusionRequest( | |
50 | params.fusion.cities, | |
51 | 'name, geometry', | |
52 | 'WHERE ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + mapCenter.lat() + ',' + mapCenter.lng() + '), 100000))' | |
53 | ); | |
54 | } else if (zoomValue >= 10) { | |
55 | elem.append(loadingElement) | |
56 | ||
57 | for (key in that.polygons) { | |
58 | that.polygons[key].setMap(null); | |
59 | delete(that.polygons[key]); | |
60 | } | |
61 | ||
62 | that.fusionRequest( | |
63 | params.fusion.zip, | |
64 | 'ZIP, geometry', | |
65 | 'WHERE ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + mapCenter.lat() + ',' + mapCenter.lng() + '), 100000))' | |
66 | ); | |
67 | } | |
68 | }); | |
69 | } | |
70 | ||
71 | ||
72 | ||
73 | fusionRequest: function(table, select, clause) { | |
74 | "use strict"; | |
75 | ||
76 | $("script.fusionApi").remove(); | |
77 | ||
78 | var self = this; | |
79 | var polygons = this.polygons; | |
80 | var colors = ['#00FF00']; | |
81 | var script = document.createElement('script'); | |
82 | script.className = "fusionApi"; | |
83 | var baseApiUrl = 'https://www.googleapis.com/fusiontables/v1/query?' + | |
84 | - | 'key=AIzaSyDlu6LKNKIZOGpZ7iBbG-kHAc-HFsIQbTg' + |
84 | + | 'key=%your_key_here%' + |
85 | '&callback=drawMap'; | |
86 | var url = [baseApiUrl]; | |
87 | url.push('&sql='); | |
88 | var query = 'SELECT ' + select + ' FROM ' + table; | |
89 | if (clause) { | |
90 | query += ' ' + clause; | |
91 | } | |
92 | var encodedQuery = encodeURIComponent(query); | |
93 | url.push(encodedQuery); | |
94 | script.src = url.join(''); | |
95 | var body = document.getElementsByTagName('body')[0]; | |
96 | body.appendChild(script); | |
97 | ||
98 | } | |
99 | ||
100 | ||
101 | window.drawMap = function(data) { | |
102 | var rows = data['rows']; | |
103 | for (var i in rows) { | |
104 | var newCoordinates = []; | |
105 | var geometries = rows[i][1]['geometries']; | |
106 | if (geometries) { | |
107 | for (var j in geometries) { | |
108 | newCoordinates.push(constructNewCoordinates(geometries[j])); | |
109 | } | |
110 | } else { | |
111 | newCoordinates = constructNewCoordinates(rows[i][1]['geometry']); | |
112 | } | |
113 | var element = new google.maps.Polygon({ | |
114 | paths: newCoordinates, | |
115 | strokeColor: "#000000", | |
116 | strokeOpacity: 0.4, | |
117 | strokeWeight: 1, | |
118 | fillColor: colors[0], | |
119 | fillOpacity: 0.3 | |
120 | }); | |
121 | ||
122 | google.maps.event.addListener(element, 'mouseover', function() { | |
123 | this.setOptions({fillOpacity: 1}); | |
124 | }); | |
125 | ||
126 | google.maps.event.addListener(element, 'mouseout', function() { | |
127 | this.setOptions({fillOpacity: 0.3}); | |
128 | }); | |
129 | ||
130 | self.onPolyClick(element, rows, i); | |
131 | polygons.push(element); | |
132 | element.setMap(self.map); | |
133 | } | |
134 | self.element.find(".mapsLoading").remove(); | |
135 | }; | |
136 | ||
137 | window.constructNewCoordinates = function(polygon) { | |
138 | var newCoordinates = []; | |
139 | var coordinates = polygon['coordinates'][0]; | |
140 | for (var i in coordinates) { | |
141 | newCoordinates.push(new google.maps.LatLng(coordinates[i][1], coordinates[i][0])); | |
142 | } | |
143 | return newCoordinates; | |
144 | }; |