Skip to content
This repository has been archived by the owner on May 24, 2021. It is now read-only.

adds function to maintain map centerpoint when template is resized #11

Merged
merged 1 commit into from
Dec 28, 2012
Merged

adds function to maintain map centerpoint when template is resized #11

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 63 additions & 49 deletions source/maps_lib.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,100 +7,109 @@
* https://github.com/derekeder/FusionTable-Map-Template/wiki/License
*
* Date: 12/10/2012
*
*
*/

var MapsLib = MapsLib || {};
var MapsLib = {

//Setup section - put your Fusion Table details here
//Using the v1 Fusion Tables API. See https://developers.google.com/fusiontables/docs/v1/migration_guide for more info

//the encrypted Table ID of your Fusion Table (found under File => About)
//NOTE: numeric IDs will be depricated soon
fusionTableId: "1m4Ez9xyTGfY2CU6O-UgEcPzlS0rnzLU93e4Faa0",
//*New Fusion Tables Requirement* API key. found at https://code.google.com/apis/console/
//*Important* this key is for demonstration purposes. please register your own.
googleApiKey: "AIzaSyA3FQFrNr5W2OEVmuENqhb2MBB2JabdaOY",
//name of the location column in your Fusion Table.
//NOTE: if your location column name has spaces in it, surround it with single quotes
fusionTableId: "1m4Ez9xyTGfY2CU6O-UgEcPzlS0rnzLU93e4Faa0",

//*New Fusion Tables Requirement* API key. found at https://code.google.com/apis/console/
//*Important* this key is for demonstration purposes. please register your own.
googleApiKey: "AIzaSyA3FQFrNr5W2OEVmuENqhb2MBB2JabdaOY",

//name of the location column in your Fusion Table.
//NOTE: if your location column name has spaces in it, surround it with single quotes
//example: locationColumn: "'my location'",
locationColumn: "geometry",
locationColumn: "geometry",

map_centroid: new google.maps.LatLng(41.8781136, -87.66677856445312), //center that your map defaults to
locationScope: "chicago", //geographical area appended to all address searches
recordName: "result", //for showing number of results
recordNamePlural: "results",
recordNamePlural: "results",

searchRadius: 805, //in meters ~ 1/2 mile
defaultZoom: 11, //zoom level when map is loaded (bigger is more zoomed in)
addrMarkerImage: 'http://derekeder.com/images/icons/blue-pushpin.png',
currentPinpoint: null,

initialize: function() {
$( "#result_count" ).html("");

geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: MapsLib.defaultZoom,
center: MapsLib.map_centroid,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($("#map_canvas")[0],myOptions);


// maintains map centerpoint for responsive design
google.maps.event.addDomListener(map, 'idle', function() {
MapsLib.calculateCenter();
});

google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(MapsLib.map_centroid);
});

MapsLib.searchrecords = null;

//reset filters
$("#search_address").val(MapsLib.convertToPlainString($.address.parameter('address')));
var loadRadius = MapsLib.convertToPlainString($.address.parameter('radius'));
if (loadRadius != "") $("#search_radius").val(loadRadius);
else $("#search_radius").val(MapsLib.searchRadius);
$(":checkbox").attr("checked", "checked");
$("#result_count").hide();

//run the default search
MapsLib.doSearch();
},

doSearch: function(location) {
MapsLib.clearSearch();
var address = $("#search_address").val();
MapsLib.searchRadius = $("#search_radius").val();

var whereClause = MapsLib.locationColumn + " not equal to ''";

//-----custom filters-------

//-------end of custom filters--------

if (address != "") {
if (address.toLowerCase().indexOf(MapsLib.locationScope) == -1)
address = address + " " + MapsLib.locationScope;

geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
MapsLib.currentPinpoint = results[0].geometry.location;

$.address.parameter('address', encodeURIComponent(address));
$.address.parameter('radius', encodeURIComponent(MapsLib.searchRadius));
map.setCenter(MapsLib.currentPinpoint);
map.setZoom(14);

MapsLib.addrMarker = new google.maps.Marker({
position: MapsLib.currentPinpoint,
map: map,
position: MapsLib.currentPinpoint,
map: map,
icon: MapsLib.addrMarkerImage,
animation: google.maps.Animation.DROP,
title:address
});

whereClause += " AND ST_INTERSECTS(" + MapsLib.locationColumn + ", CIRCLE(LATLNG" + MapsLib.currentPinpoint.toString() + "," + MapsLib.searchRadius + "))";

MapsLib.drawSearchRadiusCircle(MapsLib.currentPinpoint);
MapsLib.submitSearch(whereClause, map, MapsLib.currentPinpoint);
}
}
else {
alert("We could not find your address: " + status);
}
Expand All @@ -110,12 +119,12 @@ var MapsLib = {
MapsLib.submitSearch(whereClause, map);
}
},

submitSearch: function(whereClause, map, location) {
//get using all filters
//NOTE: styleId and templateId are recently added attributes to load custom marker styles and info windows
//you can find your Ids inside the link generated by the 'Publish' option in Fusion Tables
//for more details, see https://developers.google.com/fusiontables/docs/v1/using#WorkingStyles
//for more details, see https://developers.google.com/fusiontables/docs/v1/using#WorkingStyles

MapsLib.searchrecords = new google.maps.FusionTablesLayer({
query: {
Expand All @@ -129,20 +138,20 @@ var MapsLib = {
MapsLib.searchrecords.setMap(map);
MapsLib.getCount(whereClause);
},

clearSearch: function() {
if (MapsLib.searchrecords != null)
MapsLib.searchrecords.setMap(null);
if (MapsLib.addrMarker != null)
MapsLib.addrMarker.setMap(null);
MapsLib.addrMarker.setMap(null);
if (MapsLib.searchRadiusCircle != null)
MapsLib.searchRadiusCircle.setMap(null);
},

findMe: function() {
// Try W3C Geolocation (Preferred)
var foundLocation;

if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
foundLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
Expand All @@ -153,7 +162,7 @@ var MapsLib = {
alert("Sorry, we could not find your location.");
}
},

addrFromLatLng: function(latLngPoint) {
geocoder.geocode({'latLng': latLngPoint}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
Expand All @@ -167,7 +176,7 @@ var MapsLib = {
}
});
},

drawSearchRadiusCircle: function(point) {
var circleOptions = {
strokeColor: "#4b58a6",
Expand All @@ -183,13 +192,13 @@ var MapsLib = {
};
MapsLib.searchRadiusCircle = new google.maps.Circle(circleOptions);
},

query: function(selectColumns, whereClause, callback) {
var queryStr = [];
queryStr.push("SELECT " + selectColumns);
queryStr.push(" FROM " + MapsLib.fusionTableId);
queryStr.push(" WHERE " + whereClause);

var sql = encodeURIComponent(queryStr.join(" "));
$.ajax({url: "https://www.googleapis.com/fusiontables/v1/query?sql="+sql+"&callback="+callback+"&key="+MapsLib.googleApiKey, dataType: "jsonp"});
},
Expand All @@ -205,18 +214,18 @@ var MapsLib = {
}
}
},

getCount: function(whereClause) {
var selectColumns = "Count()";
MapsLib.query(selectColumns, whereClause,"MapsLib.displaySearchCount");
},
displaySearchCount: function(json) {

displaySearchCount: function(json) {
MapsLib.handleError(json);
var numRows = 0;
if (json["rows"] != null)
numRows = json["rows"][0];

var name = MapsLib.recordNamePlural;
if (numRows == 1)
name = MapsLib.recordName;
Expand All @@ -225,7 +234,7 @@ var MapsLib = {
});
$( "#result_count" ).fadeIn();
},

addCommas: function(nStr) {
nStr += '';
x = nStr.split('.');
Expand All @@ -237,10 +246,15 @@ var MapsLib = {
}
return x1 + x2;
},


// maintains map centerpoint for responsive design
calculateCenter: function() {
center = map.getCenter();
},

//converts a slug or query string in to readable text
convertToPlainString: function(text) {
if (text == undefined) return '';
return decodeURIComponent(text);
}
}
}