Map1.1

function sortParks(a, b) { var _a = a.feature.properties.name; var _b = b.feature.properties.name; if (_a < _b) {return -1;} if (_a > _b) {return 1;} return 0; } //Building search control L.Control.Search = L.Control.extend({ options: { // topright, topleft, bottomleft, bottomright position: 'topright', placeholder: 'Search...'}, initialize: function (options /*{ data: {...} }*/) { // constructor //setOptions(object,object-options) L.Util.setOptions(this, options);}, onAdd: function (map) { //Add DOM to the map var container = L.DomUtil.create('div', 'search-container'); this.form = L.DomUtil.create('form', 'form', container); var group = L.DomUtil.create('div', 'form-group', this.form); this.input = L.DomUtil.create('input', 'form-control input-sm', group); this.input.type = 'text'; this.input.placeholder = this.options.placeholder; this.results = L.DomUtil.create('div', 'list-group', group); L.DomEvent.addListener(this.input, 'keyup', _.debounce(this.keyup, 300), this); L.DomEvent.addListener(this.form, 'submit', this.submit, this); L.DomEvent.disableClickPropagation(container); return container;}, onRemove: function (map) { // when removed L.DomEvent.removeListener(this._input, 'keyup', this.keyup, this); L.DomEvent.removeListener(form, 'submit', this.submit, this); }, keyup: function(e) { if (e.keyCode === 38 || e.keyCode === 40) { // do nothing } else { this.results.innerHTML = ''; if (this.input.value.length > 0) { var value = this.input.value; var results = _.take(_.filter(this.options.data, function(x) { return x.feature.properties.name.toUpperCase().indexOf(value.toUpperCase()) > -1; }).sort(sortParks), 10); _.map(results, function(x) { var a = L.DomUtil.create('a', 'list-group-item'); a.href = ''; a.setAttribute('data-result-name', x.feature.properties.name); a.innerHTML = x.feature.properties.name; this.results.appendChild(a); L.DomEvent.addListener(a, 'click', this.itemSelected, this); return a; }, this);} } }, itemSelected: function(e) { L.DomEvent.preventDefault(e); var elem = e.target; var value = elem.innerHTML; this.input.value = elem.getAttribute('data-result-name'); var feature = _.find(this.options.data, function(x) { return x.feature.properties.name === this.input.value;}, this); if (feature) { //want to display location with marker when a specific place is searched //**Problem is here I believe** this._map.fitBounds(feature.getBounds());} this.results.innerHTML = '';}, submit: function(e) {L.DomEvent.preventDefault(e);}}); //Factory function L.control.search = function(id, options) { return new L.Control.Search(id, options); } var map = L.map('map').setView([12.371453, -1.519661], 13); //tile layer and request an access token L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { attribution: "false", maxZoom: 18, id: 'mapbox.streets', accessToken: 'pk.eyJ1Ijoic3Bpcml0bWFwIiwiYSI6ImNqYWpidDl3cTI2dXEzM3F1MnNveW01eTgifQ.5SILyVPvvco-duuC0IXaig' }).addTo(map); var items = []; var points = L.geoJson.ajax('mapdata.geojson',{ onEachFeature: function (feature, layer) { items.push(layer); layer.bindPopup('

' + feature.properties.name + '

'); } }).addTo(map); //Add to the map L.control.search({data:items}).addTo(map); {"type": "FeatureCollection", "features": [ {"type": "Feature", "geometry": {"type": "Point", "coordinates": [ -1.519466,12.368733 ]}, "properties": {"name":"Hotel Soritel"}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [ -1.521143,12.366077 ]}, "properties": {"name":"Hotel Palm Beach2"}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [ -1.519303,12.367942 ]}, "properties": {"name":"Hotel Palm Beach3"}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [ -1.490252,12.349653 ]}, "properties": {"name":"Siao"}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [ -1.491399,12.343439 ]}, "properties": {"name":"Sweet Home"}}]}