I am trying to have a search function that will search through my geojson file. The geojson file was upload successfully.I used one of the examples I found here, my problem is this error : Uncaught TypeError: L.Control.Search is not a constructor
I did reference the leaflet library, please help what am I missing.
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<title> My Leaflet.js Map </title>
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css " />
<script
src = "http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="ecngoc_members_json.geojson"></script>
<style>
html, body, #map {
height: 100%;
}
</style>
<script type="text/javascript">
function init() {
var osmLink = "<a href='http://www.openstreetmap.org'>Open StreetMap</a>"
var map =L.map('map').setView([-29.436487, 24.854498],6);
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © ' + osmLink,
maxZoom: 14,
}).addTo(map);
/* var ngodata = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "Organisati": "Dikeni Disabled Self Help Ass", "Sector 1": "Disabled", "Physical A": "5 Grey Lane Street", "Town": "Alice", "Province": "Eastern Cape", "Country": "South Africa", "addrtype": "route", "addrlocat": "GEOMETRIC_CENTER", "POINT_X": 26.6390371, "POINT_Y": -32.767646 }, "geometry": { "type": "Point", "coordinates": [ 26.6390371, -32.767646 ] } },
{ "type": "Feature", "properties": { "Organisati": "The Holy Nation of God", "Sector 1": "HIV AIDS", "Physical A": "150 Ntselamanzi Township", "Town": "Alice", "Province": "Eastern Cape", "Country": "South Africa", "addrtype": "locality", "addrlocat": "APPROXIMATE", "POINT_X": 26.8329509, "POINT_Y": -32.7901325 }, "geometry": { "type": "Point", "coordinates": [ 26.8329509, -32.7901325 ] } },
{ "type": "Feature", "properties": { "Organisati": "Alice Business Forum", "Sector 1": "Community Development", "Physical A": "19 Wienand Street", "Town": "Alice", "Province": "Eastern Cape", "Country": "South Africa", "addrtype": "street_address", "addrlocat": "RANGE_INTERPOLATED", "POINT_X": 26.8300864, "POINT_Y": -32.7874356 }, "geometry": { "type": "Point", "coordinates": [ 26.8300864, -32.7874356 ] } },
{ "type": "Feature", "properties": { "Organisati": "Isolomzi Community Health Organisation", "Sector 1": "Health Welfare", "Physical A": "48 Frere Street", "Town": "Alicedale", "Province": "Eastern Cape", "Country": "South Africa", "addrtype": "locality", "addrlocat": "APPROXIMATE", "POINT_X": 26.0738958, "POINT_Y": -33.3164948 }, "geometry": { "type": "Point", "coordinates": [ 26.0738958, -33.3164948 ] } },
{ "type": "Feature", "properties": { "Organisati": "Barkley East Advice Office", "Sector 1": "Paralegal Human Rights", "Physical A": "727 Dale Street", "Town": "Barkly East", "Province": "Eastern Cape", "Country": "South Africa", "addrtype": "route", "addrlocat": "GEOMETRIC_CENTER", "POINT_X": 27.5961071, "POINT_Y": -30.9674799 }, "geometry": { "type": "Point", "coordinates": [ 27.5961071, -30.9674799 ] } },
{ "type": "Feature", "properties": { "Organisati": "People fighting Gender based violence", "Sector 1": "Gender", "Physical A": "11 Rhahabe Road", "Town": "Bisho", "Province": "Eastern Cape", "Country": "South Africa", "addrtype": "locality", "addrlocat": "APPROXIMATE", "POINT_X": 27.4409557, "POINT_Y": -32.849876 }, "geometry": { "type": "Point", "coordinates": [ 27.4409557, -32.849876 ] } },
{ "type": "Feature", "properties": { "Organisati": "Khanyisa Comm Educare Development Centre", "Sector 1": "Educare", "Physical A": "Zone 6 Old Government Offices, Zwelitsha", "Town": "Bisho", "Province": "Eastern Cape", "Country": "South Africa", "addrtype": "locality", "addrlocat": "APPROXIMATE", "POINT_X": 27.4409557, "POINT_Y": -32.849876 }, "geometry": { "type": "Point", "coordinates": [ 27.4409557, -32.849876 ] } },
]
} */
//code to add geoJson data in the map and display the points.
/*var layer = L.geoJson(ngodata, {
//style: myStyle
}).addTo(map);*/
//create empty geoJson layer to be populated later
//styles, popups and other layer options can be specified here
var ngoLayer = L.geoJson(false, {
style: function (feature) {
return {};
},
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.Organisati);
}
});
//load GeoJSON data, add it to the layer
$.getJSON("http://localhost/configureSearch/tryGeojson/ecngoc_members_json.geojson", function (data) {
// add GeoJSON data to layer and add to the map once the file is loaded
ngoLayer.addData(data).addTo(map);
});
var searchControl = new L.Control.Search({
layer: ngoLayer,
propertyName: 'name',
circleLocation: false
});
searchControl.on('search_locationfound', function (e) {
e.layer.setStyle({
fillColor: '#3f0',
color: '#0f0'
});
if (e.layer._popup) e.layer.openPopup();
}).on('search_collapsed', function (e) {
ngoLayer.eachLayer(function (layer) { //restore feature color
ngoLayer.resetStyle(layer);
});
});
map.addControl(searchControl); //inizialize search control
}//end function
</script>
</head>
<body onload=init()>
<div id="map"></div>
</body>
</html>
