| Index: branches/SemanticMaps0.8/includes/services/GoogleMaps3/jquery.googlemapsinput.js |
| — | — | @@ -11,6 +11,19 @@ |
| 12 | 12 | |
| 13 | 13 | |
| 14 | 14 | (function( $ ){ $.fn.googlemapsinput = function( mapDivId, options ) { |
| | 15 | + var MAPFILES_URL = "http://maps.gstatic.com/intl/en_us/mapfiles/"; |
| | 16 | + |
| | 17 | + var clickIcon = new google.maps.MarkerImage( |
| | 18 | + MAPFILES_URL + 'dd-start.png', |
| | 19 | + new google.maps.Size(20, 34), |
| | 20 | + new google.maps.Point(0, 0), |
| | 21 | + new google.maps.Point(10, 34) |
| | 22 | + ); |
| | 23 | + |
| | 24 | + var clickMarker = null; |
| | 25 | + |
| | 26 | + var geocoder = new google.maps.Geocoder(); |
| | 27 | + |
| 15 | 28 | this.attr( { 'class': "ui-widget" } ).css( { 'width': 'auto' } ); |
| 16 | 29 | |
| 17 | 30 | this.html( |
| — | — | @@ -35,6 +48,12 @@ |
| 36 | 49 | } ) |
| 37 | 50 | .googlemaps( options ); |
| 38 | 51 | |
| | 52 | + google.maps.event.addListener( mapDiv.map, 'click', onClickCallback ); |
| | 53 | + |
| | 54 | + function onClickCallback() { |
| | 55 | + // TODO |
| | 56 | + } |
| | 57 | + |
| 39 | 58 | table.append( |
| 40 | 59 | '<thead><tr class="ui-widget-header "><th colspan="2">' + mediaWiki.msg( 'semanticmaps-forminput-locations' ) + '</th></tr></thead><tbody>' |
| 41 | 60 | ); |
| — | — | @@ -56,28 +75,207 @@ |
| 57 | 76 | $( "#" + mapDivId + '_addbutton' ).button().click( onAddButtonClick ); |
| 58 | 77 | |
| 59 | 78 | function onAddButtonClick() { |
| 60 | | - var location = $( '#' + $( this ).attr( 'mapid' ) + '_addfield' ).text(); |
| | 79 | + var location = $( '#' + mapDivId + '_addfield' ).attr( 'value' ); |
| | 80 | + submitGeocodeQuery( location ); |
| | 81 | + return false; |
| | 82 | + } |
| | 83 | + |
| | 84 | + function submitGeocodeQuery( query ) { |
| | 85 | + if ( /\s*^\-?\d+(\.\d+)?\s*\,\s*\-?\d+(\.\d+)?\s*$/.test( query ) ) { |
| | 86 | + var latlng = parseLatLng(query); |
| | 87 | + |
| | 88 | + if (latlng == null) { |
| | 89 | + $( '#' + mapDivId + '_addfield' ).attr( 'value', '' ); |
| | 90 | + } else { |
| | 91 | + geocode({ 'latLng': latlng }); |
| | 92 | + } |
| | 93 | + } else { |
| | 94 | + geocode({ 'address': query }); |
| | 95 | + } |
| | 96 | + } |
| | 97 | + |
| | 98 | + function parseLatLng(value) { |
| | 99 | + value.replace('/\s//g'); |
| | 100 | + var coords = value.split(','); |
| | 101 | + var lat = parseFloat(coords[0]); |
| | 102 | + var lng = parseFloat(coords[1]); |
| | 103 | + if (isNaN(lat) || isNaN(lng)) { |
| | 104 | + return null; |
| | 105 | + } else { |
| | 106 | + return new google.maps.LatLng(lat, lng); |
| | 107 | + } |
| | 108 | + } |
| | 109 | + |
| | 110 | + function geocode(request) { |
| | 111 | + var hash = ''; |
| 61 | 112 | |
| 62 | | - var marker = new google.maps.Marker( { |
| 63 | | - map: this.mapDiv.map, |
| 64 | | - position: new google.maps.LatLng( location.lat , location.lon ), |
| 65 | | - title: locationToDMS( ) |
| 66 | | - } ); |
| | 113 | + if (request.latLng) { |
| | 114 | + clickMarker = new google.maps.Marker({ |
| | 115 | + 'position': request.latLng, |
| | 116 | + 'map': map, |
| | 117 | + 'title': request.latLng.toString(), |
| | 118 | + 'clickable': false, |
| | 119 | + 'icon': clickIcon, |
| | 120 | + 'shadow': shadow |
| | 121 | + }); |
| | 122 | + hash = 'q=' + request.latLng.toUrlValue(6); |
| | 123 | + } else { |
| | 124 | + hash = 'q=' + request.address; |
| | 125 | + } |
| 67 | 126 | |
| 68 | | - addLocationRow(); |
| 69 | | - return false; |
| | 127 | + var vpbias = false; |
| | 128 | + var country = ''; |
| | 129 | + var language = ''; |
| | 130 | + |
| | 131 | + if (vpbias) { |
| | 132 | + hash += '&vpcenter=' + map.getCenter().toUrlValue(6); |
| | 133 | + hash += '&vpzoom=' + map.getZoom(); |
| | 134 | + request.bounds = map.getBounds(); |
| | 135 | + } |
| | 136 | + |
| | 137 | + if (country) { |
| | 138 | + hash += '&country=' + country; |
| | 139 | + request.country = country; |
| | 140 | + } |
| | 141 | + |
| | 142 | + if (language) { |
| | 143 | + hash += '&language=' + language; |
| | 144 | + request.language = language; |
| | 145 | + } |
| | 146 | + |
| | 147 | + hashFragment = '#' + escape(hash); |
| | 148 | + window.location.hash = escape(hash); |
| | 149 | + geocoder.geocode(request, showResults); |
| 70 | 150 | } |
| 71 | 151 | |
| 72 | | - function addLocationRow() { |
| | 152 | + function showResults(results, status) { |
| | 153 | + var reverse = (clickMarker != null); // TODO |
| | 154 | + |
| | 155 | + if (! results) { |
| | 156 | + // TODO |
| | 157 | + alert("Geocoder did not return a valid response"); |
| | 158 | + } else { |
| | 159 | + //document.getElementById("statusValue").innerHTML = status; |
| | 160 | + |
| | 161 | + if (status == google.maps.GeocoderStatus.OK) { |
| | 162 | + //document.getElementById("matchCount").innerHTML = results.length; |
| | 163 | + var marker = new google.maps.Marker( { |
| | 164 | + map: mapDiv.map, |
| | 165 | + position: results[0].geometry.location, |
| | 166 | + title: results[0].geometry.location.toString() |
| | 167 | + } ); |
| | 168 | + addLocationRow( results[0].geometry.location.lat(), results[0].geometry.location.lng() ); |
| | 169 | + //plotMatchesOnMap(results, reverse); |
| | 170 | + } else { |
| | 171 | + if ( !reverse) { |
| | 172 | + mapDiv.map.setCenter(new google.maps.LatLng(0.0, 0.0)); |
| | 173 | + mapDiv.map.setZoom(1); // TODO |
| | 174 | + } |
| | 175 | + } |
| | 176 | + } |
| | 177 | + } |
| | 178 | + |
| | 179 | + function plotMatchesOnMap(results, reverse) { |
| | 180 | + markers = new Array(results.length); |
| | 181 | + var resultsListHtml = ""; |
| | 182 | + |
| | 183 | + var openInfoWindow = function(resultNum, result, marker) { |
| | 184 | + return function() { |
| | 185 | + if (selected != null) { |
| | 186 | + document.getElementById('p' + selected).style.backgroundColor = "white"; |
| | 187 | + clearBoundsOverlays(); |
| | 188 | + } |
| | 189 | + |
| | 190 | + map.fitBounds(result.geometry.viewport); |
| | 191 | + infowindow.setContent(getAddressComponentsHtml(result.address_components)); |
| | 192 | + infowindow.open(map, marker); |
| | 193 | + |
| | 194 | + if (result.geometry.bounds) { |
| | 195 | + boundsOverlay = new google.maps.Rectangle({ |
| | 196 | + 'bounds': result.geometry.bounds, |
| | 197 | + 'strokeColor': '#ff0000', |
| | 198 | + 'strokeOpacity': 1.0, |
| | 199 | + 'strokeWeight': 2.0, |
| | 200 | + 'fillOpacity': 0.0 |
| | 201 | + }); |
| | 202 | + boundsOverlay.setMap(map); |
| | 203 | + google.maps.event.addListener(boundsOverlay, 'click', onClickCallback); |
| | 204 | + document.getElementById('boundsLegend').style.display = 'block'; |
| | 205 | + } else { |
| | 206 | + boundsOverlay = null; |
| | 207 | + } |
| | 208 | + |
| | 209 | + viewportOverlay = new google.maps.Rectangle({ |
| | 210 | + 'bounds': result.geometry.viewport, |
| | 211 | + 'strokeColor': '#0000ff', |
| | 212 | + 'strokeOpacity': 1.0, |
| | 213 | + 'strokeWeight': 2.0, |
| | 214 | + 'fillOpacity': 0.0 |
| | 215 | + }); |
| | 216 | + viewportOverlay.setMap(map); |
| | 217 | + google.maps.event.addListener(viewportOverlay, 'click', onClickCallback); |
| | 218 | + document.getElementById('viewportLegend').style.display = 'block'; |
| | 219 | + |
| | 220 | + document.getElementById('p' + resultNum).style.backgroundColor = "#eeeeff"; |
| | 221 | + document.getElementById('matches').scrollTop = |
| | 222 | + document.getElementById('p' + resultNum).offsetTop - |
| | 223 | + document.getElementById('matches').offsetTop; |
| | 224 | + selected = resultNum; |
| | 225 | + } |
| | 226 | + } |
| | 227 | + |
| | 228 | + for (var i = 0; i < results.length; i++) { |
| | 229 | + var icon = new google.maps.MarkerImage( |
| | 230 | + getMarkerImageUrl(i), |
| | 231 | + new google.maps.Size(20, 34), |
| | 232 | + new google.maps.Point(0, 0), |
| | 233 | + new google.maps.Point(10, 34) |
| | 234 | + ); |
| | 235 | + |
| | 236 | + markers[i] = new google.maps.Marker({ |
| | 237 | + 'position': results[i].geometry.location, |
| | 238 | + 'map': map, |
| | 239 | + 'icon': icon, |
| | 240 | + 'shadow': shadow |
| | 241 | + }); |
| | 242 | + |
| | 243 | + google.maps.event.addListener(markers[i], 'click', openInfoWindow(i, results[i], markers[i])); |
| | 244 | + |
| | 245 | + resultsListHtml += getResultsListItem(i, getResultDescription(results[i])); |
| | 246 | + } |
| | 247 | + |
| | 248 | + document.getElementById("matches").innerHTML = resultsListHtml; |
| | 249 | + document.getElementById("p0").style.border = "none"; |
| | 250 | + document.getElementById("matches").style.display = "block"; |
| | 251 | + |
| | 252 | + if (reverse){ |
| | 253 | + // make a smooth movement to the clicked position |
| | 254 | + map.panTo(clickMarker.getPosition()); |
| | 255 | + google.maps.event.addListenerOnce(map, 'idle', function(){ |
| | 256 | + selectMarker(0); |
| | 257 | + }); |
| | 258 | + } |
| | 259 | + else { |
| | 260 | + zoomToViewports(results); |
| | 261 | + selectMarker(0); |
| | 262 | + } |
| | 263 | + } |
| | 264 | + |
| | 265 | + function getMarkerImageUrl(resultNum) { |
| | 266 | + return MAPFILES_URL + "marker" + String.fromCharCode(65 + resultNum) + ".png"; |
| | 267 | + } |
| | 268 | + |
| | 269 | + function addLocationRow( lat, lon ) { |
| 73 | 270 | var addRow = $( '#' + mapDivId + '_addrow' ); |
| 74 | 271 | |
| 75 | 272 | addRow.remove(); |
| 76 | | - appendTableRow( rowNr, 0, 0 ); // TODO |
| | 273 | + appendTableRow( rowNr, lat, lon ); // TODO |
| 77 | 274 | table.append( addRow ); |
| | 275 | + $( '#' + mapDivId + '_addfield' ).attr( 'value', '' ); |
| 78 | 276 | $( "#" + mapDivId + '_addbutton' ).button().click( onAddButtonClick ); |
| 79 | 277 | rowNr++; |
| 80 | 278 | |
| 81 | | - updateInput(); |
| | 279 | + updateInput(); |
| 82 | 280 | } |
| 83 | 281 | |
| 84 | 282 | function onRemoveButtonClick() { |
| — | — | @@ -126,8 +324,6 @@ |
| 127 | 325 | return dms.join( '; ' ); |
| 128 | 326 | } |
| 129 | 327 | |
| 130 | | - this.attr( { 'width': options.width, 'height': options.height } ); |
| 131 | | - |
| 132 | 328 | return this; |
| 133 | 329 | |
| 134 | 330 | }; })( jQuery ); |
| \ No newline at end of file |