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 | }; |