Merge pull request #29 from toepoke/feat/#28--Ability-to-add-markers-…

…to-the-current-map-boundary

Feat/#28  ability to add markers to the current map boundary

README.md

@@ -314,6 +314,15 @@ Once your code has resolved the place details the *showAddDialog* method must be
 
 [See full-window example](examples/06-full-example.js)
 
+### onMapMoved
+
+Method called when maps [Idle](https://developers.google.com/maps/documentation/javascript/reference/map#Map.idle) event fires (e.g. when the user has finished panning or zooming).
+
+This gives you the opportunity to query your back-end database for any _places_ that are located within the <attr title="North, South, East and West">NSEW</abbr> _boundary_.
+
+[See full-window example](examples/06-full-example.js)
+
+
 ### showAddDialog *(method)*
 
 Once a new place has been resolved, use *showAddDialog* to have *mapsed* show the resulting dialog.

examples/06-full-example.js

@@ -99,7 +99,7 @@ function fullWindowExample(e) {
 		// Map initialisation options to pass onto Google Maps
 		mapOptions: {
 			zoom: 15,
-			center: new google.maps.LatLng(51.501364 , -0.14189),
+			center: new google.maps.LatLng(51.501364, -0.14189),
 			styles: _avocadoStyle
 		},
 
@@ -109,20 +109,20 @@ function fullWindowExample(e) {
 			initSearch: "Football near me",
 			placeholder: "Search for \"5aside\" ..."
 		},
-		
+
 		// Turn geo button on
 		allowGeo: true,
 
 		// Emulate places being loaded from a db
 		showOnLoad: _myPlaces,
-		
+
 		// Adds the "+" button to the control bar at the top right of the map
 		allowAdd: true,
 		disablePoi: true,
 
 		// Illustrating custom behaviour
 		// ... changing the added marker to have _some_data_
-		onAdd: function(m, marker) {
+		onAdd: function (m, marker) {
 			// note marker has "lat" and "lng" properties to use for querying google maps
 			marker.details.name = "Test name";
 			marker.details.street = "Test street";
@@ -140,11 +140,11 @@ function fullWindowExample(e) {
 		// Enables place selection
 		// ... note the presence of the callback is 
 		// ... all that's required to enable selection
-		onSelect: function(m, details) {
+		onSelect: function (m, details) {
 			var msg = getPlaceHtml(details);
-			
+
 			m.showMsg("YOUR SELECTION CODE HERE", msg);
-				
+
 			// indicate tip should be closed
 			return true;
 		},
@@ -194,7 +194,7 @@ function fullWindowExample(e) {
 
 		// Enables edit of new places (to your web application, not Google Maps!)
 		// ... again the presence of the callback enables the functionality
-		onSave: function(m, newPlace) {
+		onSave: function (m, newPlace) {
 			var missing = [];
 
 			// detect errors starting at bottom
@@ -209,7 +209,7 @@ function fullWindowExample(e) {
 				// return the error message so the callback doesn't progress
 				return "Required: " + missing.join();
 			}
-			
+
 			if (newPlace) {
 				if (!newPlace.userData) {
 					// simulate a primary key being save to a db
@@ -225,16 +225,16 @@ function fullWindowExample(e) {
 			// indicate form was OK and saved
 			return "";
 		},
-		
+
 		// Allows the user to delete a "custom" place they've previously 
 		// ... added
 		confirmDelete: true,
-		onDelete: function(m, placeToDelete) {
+		onDelete: function (m, placeToDelete) {
 			m.showMsg(
 				"YOUR DELETE CODE HERE",
 				"<strong>" + placeToDelete.name + "</strong> has been removed."
 			);
-			
+
 			// here would be code your application to do the actual delete
 			_store.deletePlace(placeToDelete);
 
@@ -244,32 +244,32 @@ function fullWindowExample(e) {
 		},
 
 		// Custom marker images
-		getMarkerImage: function(m, markerType, title) {
+		getMarkerImage: function (m, markerType, title) {
 			var imageUrl = "";
-			
+
 			if (markerType == "custom")
 				// a place dervied from "your" database
 				imageUrl = "examples/images/view-place.png";
 			else if (markerType == "new")
 				// user has clicked on the add place (+) icon to add a new place
 				imageUrl = "examples/images/add-place.png";
-			else 
+			else
 				// normal Google Places result
 				imageUrl = "examples/images/google-place.png";
-				
+
 			return {
 				url: imageUrl,
 				size: new google.maps.Size(28, 40),
 				origin: new google.maps.Point(0, 0),
-				
+
 				// where the little cross-hair appears (on new markers) relative to the image
 				anchor: new google.maps.Point(14, 45)
 			};
 		},
 
 		// shows additional instructions to the user
-		getHelpWindow: function(m) {
-			var html = 
+		getHelpWindow: function (m) {
+			var html =
 				"<div class='mapsed-help'>" +
 					"<h3>Find a venue</h3>" +
 					"<ol>" +
@@ -291,13 +291,33 @@ function fullWindowExample(e) {
 		showHelpOnLoad: true,
 
 		// Callback for when the user tries to load the map
-		onClose: function(mapsed) {
+		onClose: function (mapsed) {
 			var closeMap = confirm("Close map?");
 
 			// you can cancel the close of the map by returning false
 			return closeMap;
 		},
 
+		onMapMoved: function (north, south, east, west) {
+			var hits = [];
+			console.log("onMapMoved:", north, south, east, west);
+
+			// Mimc back-end search for places within the boundary
+			for (var i = 0; i < _sporadic_places.length; i++) {
+				var place = _sporadic_places[i];
+
+				var withinLat = (place.lat >= south && place.lat <= north);
+				var withinLng = (place.lng >= west && place.lng <= east);
+
+				if (withinLat && withinLng) {
+					hits.push(place);
+				}
+			}
+
+			console.log("Found", hits);
+			return hits;
+		},
+
 	  // Fired once the mapsed object has initialised, but before the map
 		// has been drawn.  If you wish to add custom controls, this is where to do it
 		onPreInit: function(mapsed) {

examples/07-map-moved-example.js

@@ -0,0 +1,85 @@
+var _example6_places = [
+	{
+		canEdit: true,
+		lat: 50.0657041,
+		lng: -5.713174599999999,
+		name: "Land's End",
+		street: "Land's End",
+	},
+	{
+		canEdit: false,
+		lat: 51.5054564,
+		lng: -0.07535649999999999,
+		name: "Tower Bridge",
+		street: "Tower Bridge Road",
+	},
+	{
+		canEdit: false,
+		lat: 58.6373368,
+		lng: -3.0688997,
+		name: "John o' Groats",
+		town: "John o' Groats",
+		postCode: "KW1 4YR"
+	},
+	{
+		canEdit: false,
+		lat: 27.173891,
+		lng: 78.042068,
+		name: "Taj Mahal",
+		town: "Agra",
+		postCode: "282001"
+	},
+	{
+		canEdit: false,
+		lat: -25.344490,
+		lng: 131.035431,
+		name: "Ayers Rock",
+		town: "Petermann NT",
+		postCode: "0872"
+	},
+	{
+		canEdit: false,
+		lat: 21.315603,
+		lng: -157.858093,
+		name: "Nankastu SC Hawaii Soccer Academy",
+		town: "Honolulu",
+		postCode: "96826"
+	}
+];
+
+function runExample7() {
+	$("#map-moved").mapsed({
+
+		onMapMoved: function (north, south, east, west) {
+			var hits = [];
+			console.log("onMapMoved:", north, south, east, west);
+
+			// Mimc back-end search for places within the boundary
+			for (var i = 0; i < _example6_places.length; i++) {
+				var place = _sporadic_places[i];
+
+				var withinLat = (place.lat >= south && place.lat <= north);
+				var withinLng = (place.lng >= west && place.lng <= east);
+
+				if (withinLat && withinLng) {
+					hits.push(place);
+				}
+			}
+
+			if (hits.length > 0) {
+				console.log(`"Found ${hits.length}.`, hits);
+			}
+			return hits;
+		}
+
+	});
+
+}
+
+
+$(document).ready(function () {
+	console.clear();
+	runExample7();
+});
+
+

examples/mapsed-storage.js

@@ -32,6 +32,58 @@ var _default_places = [
 	}
 ];
 
+// Set of places around the UK in areas that aren't likely to show up when zoomed in
+// folllowing a search.  This is so we can test the onMapMoved event which mimics adding 
+// "custom" places from a back-end database.
+var _sporadic_places = [
+	{
+		canEdit: true,
+		lat: 50.0657041,
+		lng: -5.713174599999999,
+		name: "Land's End",
+		street: "Land's End",
+	},
+	{
+		canEdit: false,
+		lat: 51.5054564,
+		lng: -0.07535649999999999,
+		name: "Tower Bridge",
+		street: "Tower Bridge Road",
+	},
+	{
+		canEdit: false,
+		lat: 58.6373368,
+		lng: -3.0688997,
+		name: "John o' Groats",
+		town: "John o' Groats",
+		postCode: "KW1 4YR"
+	},
+	{
+		canEdit: false,
+		lat: 27.173891,
+		lng: 78.042068,
+		name: "Taj Mahal",
+		town: "Agra",
+		postCode: "282001"
+	},
+	{
+		canEdit: false,
+		lat: -25.344490,
+		lng: 131.035431,
+		name: "Ayers Rock",
+		town: "Petermann NT",
+		postCode: "0872"
+	},
+	{
+		canEdit: false,
+		lat: 21.315603,
+		lng: -157.858093,
+		name: "Nankastu SC Hawaii Soccer Academy",
+		town: "Honolulu",
+		postCode: "96826"
+	}
+];
+
 var mapsedStorage = {
 
 	/**