Merge pull request #5 from satw1knandala/leaflet

Leaflet

package.json

@@ -31,6 +31,7 @@
     "gulp-uglify": "^1.4.1",
     "gulp-util": "^3.0.6",
     "leaflet": "^0.7.5",
+    "leaflet-search": "^1.8.4",
     "leaflet.locatecontrol": "^0.45.0",
     "lodash": "^3.10.1",
     "moment": "^2.10.6",

public/js/map-application.js

@@ -7,24 +7,48 @@ module.exports = function MapApp() {
       id: 'michaellin.cif0wpatz19s2sxlv8x48i66b',
       accessToken: 'pk.eyJ1IjoibWljaGFlbGxpbiIsImEiOiJjaWYwd3BjMGkxOTFtc2FsdXA1aThhMmtvIn0.mdvxgPl2QX1hGygZgQjIlg'
   }).addTo(map);
-  L.control.locate().addTo(map);
-  var data = $.ajax({
-    url: "/events",
-    data: {"lat" : 33.777220,
-          "lng": -84.3962800,
-          "distance": 2000},
-    success: function (data) {
-      console.log(data);
-      for (event in data.events) {
-        if (data.events[event].venueLocation) {
-          var marker = L.marker([data.events[event].venueLocation.latitude,data.events[event].venueLocation.longitude]).addTo(map);
-          var time = moment(data.events[event].eventStarttime);
-          var timeString = time.format("dddd, MMMM Do YYYY, h:mm:ss a");
-          marker.bindPopup("<div>" + data.events[event].eventName + "</div>" + timeString);
+  var lc = L.control.locate().addTo(map);
+  function test () {
 
-        }
-      }
-    },
-    dataType: "json"
+  }
+  var search = new L.Control.Search({
+    url: 'http://nominatim.openstreetmap.org/search?format=json&q={s}',
+    jsonpParam: 'json_callback',
+    propertyName: 'display_name',
+    propertyLoc: ['lat','lon'],
+    circleLocation: false,
+    markerLocation: false,
+    autoType: false,
+    autoCollapse: true,
+    minLength: 2,
+    zoom:10,
+  }).on('search_locationfound', function(event) {
+    addMarkers(event.latlng.lat, event.latlng.lng, 2000);
+  });
+  search.addTo(map);
+  var markers = new L.FeatureGroup();
+  map.on('locationfound', function (event) {
+    addMarkers(event.latlng.lat, event.latlng.lng, 2000)
   });
+  lc.start();
+  function addMarkers(lat, lng, distance) {
+    var data = $.ajax({
+      url: "/events",
+      data: {"lat" : lat,
+            "lng": lng,
+            "distance": distance},
+      success: function (data) {
+        for (event in data.events) {
+          if (data.events[event].venueLocation) {
+            var marker = L.marker([data.events[event].venueLocation.latitude,data.events[event].venueLocation.longitude]).addTo(markers);
+            var time = moment(data.events[event].eventStarttime);
+            var timeString = time.format("dddd, MMMM Do YYYY, h:mm:ss a");
+            marker.bindPopup("<div><h1><a href=http://www.facebook.com/events/" + data.events[event].eventId + ">" + data.events[event].eventName + "</a></h1></div>" + timeString);
+          }
+        }
+        markers.addTo(map);
+      },
+      dataType: "json"
+    });
+  }
 }

public/lib/leaflet-search/leaflet-search.css

@@ -0,0 +1,116 @@
+
+.leaflet-container .leaflet-control-search {
+	position:relative;
+	float:left;
+	background:#fff;
+	color:#1978cf;
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+	background-color: rgba(255, 255, 255, 0.8);
+	z-index:1000;	
+	box-shadow: 0 1px 7px rgba(0,0,0,0.65);
+	margin-left: 10px;
+	margin-top: 10px;
+}
+.leaflet-control-search.search-exp {/*expanded*/
+	box-shadow: 0 1px 7px #999;
+	background: #fff;
+}
+.leaflet-control-search .search-input {
+	display:block;
+	float:left;
+	background: #fff;
+	border:1px solid #666;
+	border-radius:2px;
+	height:18px;
+	padding:0 18px 0 2px;
+	margin:3px 0 3px 3px;
+}
+.leaflet-control-search.search-load .search-input {
+	background: url('../images/loader.gif') no-repeat center right #fff;
+}
+.leaflet-control-search.search-load .search-cancel {
+	visibility:hidden;
+}
+.leaflet-control-search .search-cancel {
+	display:block;
+	width:22px;
+	height:18px;
+	position:absolute;
+	right:22px;
+	margin:3px 0;
+	background: url('../images/search-icon.png') no-repeat 0 -46px;
+	text-decoration:none;
+	filter: alpha(opacity=80);
+	opacity: 0.8;		
+}
+.leaflet-control-search .search-cancel:hover {
+	filter: alpha(opacity=100);
+	opacity: 1;
+}
+.leaflet-control-search .search-cancel span {
+	display:none;/* comment for cancel button imageless */
+	font-size:18px;
+	line-height:20px;
+	color:#ccc;
+	font-weight:bold;
+}
+.leaflet-control-search .search-cancel:hover span {
+	color:#aaa;
+}
+.leaflet-control-search .search-button {
+	display:block;
+	float:left;
+	width:26px;
+	height:26px;	
+	background: url('../images/search-icon.png') no-repeat 2px 2px;
+	border-radius:4px;
+}
+.leaflet-control-search .search-button:hover {
+	background: url('../images/search-icon.png') no-repeat 2px -22px;
+}
+.leaflet-control-search .search-tooltip {
+	position:absolute;
+	top:100%;
+	left:0;
+	float:left;
+	list-style: none;
+	padding-left: 0;
+	min-width:120px;
+	max-height:122px;
+	box-shadow: 1px 1px 6px rgba(0,0,0,0.4);
+	background-color: rgba(0, 0, 0, 0.25);
+	z-index:1010;
+	overflow-y:auto;
+	overflow-x:hidden;
+	cursor: pointer;
+}
+.leaflet-control-search .search-tip {
+	margin:2px;
+	padding:2px 4px;
+	display:block;
+	color:black;
+	background: #eee;
+	border-radius:.25em;
+	text-decoration:none;	
+	white-space:nowrap;
+	vertical-align:center;
+}
+.leaflet-control-search .search-tip-select,
+.leaflet-control-search .search-tip:hover,
+.leaflet-control-search .search-button:hover {
+	background-color: #fff;
+}
+.leaflet-control-search .search-alert {
+	cursor:pointer;
+	clear:both;
+	font-size:.75em;
+	margin-bottom:5px;
+	padding:0 .25em;
+	color:#e00;
+	font-weight:bold;
+	border-radius:.25em;
+}
+
+