Search control plugin problem
34 views
Skip to first unread message
Paula Roiges
Jul 3, 2017, 4:30:17 AM7/3/17
to Leaflet
Hi,
I've added a search control, but I do not know how to make the searcher related to the dates of each point (attribute in the geojson file). When I press to search and I enter the date, it does not give me any results, it says "no location found".
Here is the code:
<!DOCTYPE html><html>
<meta charset="utf-8" />
<head>
<script src="https://unpkg.com/lea...@1.0.2/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/lea...@1.0.2/dist/leaflet.css" />
<script type="text/javascript" src="datos1.js"></script>
<script src="C:\Users\paula\Desktop\www\data\leaflet-search-master\src\leaflet-search.js"></script>
<link rel="stylesheet" href="C:\Users\paula\Desktop\www\data\leaflet-search-master\src\leaflet-search.css" />
<style>
#map {
widh: 50px;
height: 600px; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').
setView([40.399203, -20.622737],
4);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
maxZoom: 18
}).addTo(map);
//L.geoJson(datos).addTo(map);
L.control.scale().addTo(map);
//L.marker([40.2551168483125, -8.43928366900276], {draggable: true}).addTo(map);
var geojsonMarkerOptions = {
radius: 5,
fillColor: "#00ced1",
color: "#007d80",
weight: 1,
opacity: 1,
fillOpacity: 0.5
};
L.geoJSON(datosfecha, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
}
}).addTo(map);
var searchLayer = L.layerGroup().addTo(map);
//... adding data in searchLayer ...
map.addControl( new L.Control.Search({layer: searchLayer}) );
//searchLayer is a L.LayerGroup contains searched markers
require(["leaflet", "leafletSearch"],function(L, LeafletSearch) {
//... initialize leaflet map and dataLayer ...
map.addControl( new LeafletSearch({
layer: dataLayer,
propertyName: 'date',
circleLocation: true
}) );
});
</script>
</body>
</html>Here are the example of attributes of the geojson file:
var datosfecha ={
"type": "FeatureCollection",
"name": "datos1",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "longitude": -8.4392836690027604, "latitude": 40.255116848312497, "timestamp": 1491926867000, "date": "11\/04\/2017" }, "geometry": {"type": "Point", "coordinates": [ -8.43928366900276, 40.255116848312497 ] } },
{ "type": "Feature", "properties": { "longitude": -8.4391193837006, "latitude": 40.2550139185416, "timestamp": 1491927847400, "date": "11\/04\/2017" }, "geometry": {"type": "Point", "coordinates": [ -8.4391193837006, 40.2550139185416 ] } },
{ "type": "Feature", "properties": { "longitude": -8.4390357323069498, "latitude": 40.254854997657503, "timestamp": 1491928051000, "date": "11\/04\/2017" }, "geometry": {"type": "Point", "coordinates": [ -8.43903573230695, 40.254854997657503 ] } },
{ "type": "Feature", "properties": { "longitude": -8.4391654841680399, "latitude": 40.255148154720899, "timestamp": 1491928244000, "date": "11\/04\/2017" }, "geometry": {"type": "Point", "coordinates": [ -8.43916548416804, 40.255148154720899 ] } },
{ "type": "Feature", "properties": { "longitude": -8.4391835890788904, "latitude": 40.255153938234102, "timestamp": 1491929206020, "date": "11\/04\/2017" }, "geometry": {"type": "Point", "coordinates": [ -8.43918358907889, 40.255153938234102 ] } },
{ "type": "Feature", "properties": { "longitude": -8.4392358083356491, "latitude": 40.254822182506601, "timestamp": 1491930172010, "date": "11\/04\/2017" }, "geometry": {"type": "Point", "coordinates": [ -8.439235808335649, 40.254822182506601 ] } },
{ "type": "Feature", "properties": { "longitude": -8.4392635524351505, "latitude": 40.255001555234401, "timestamp": 1491931103000, "date": "11\/04\/2017" }, "geometry": {"type": "Point", "coordinates": [ -8.43926355243515, 40.255001555234401 ] } },
{ "type": "Feature", "properties": { "longitude": -8.4368286095638201, "latitude": 40.254523074291903, "timestamp": 1491934470050, "date": "11\/04\/2017" }, "geometry": {"type": "Point", "coordinates": [ -8.43682860956382, 40.254523074291903 ] } },
{ "type": "Feature", "properties": { "longitude": -8.4301111009050391, "latitude": 40.251822215542397, "timestamp": 1491934778000, "date": "11\/04\/2017" }, "geometry": {"type": "Point", "coordinates": [ -8.430111100905039, 40.251822215542397 ] } },
{ "type": "Feature", "properties": { "longitude": -8.43426609412621, "latitude": 40.2416864410418, "timestamp": 1491935698000, "date": "11\/04\/2017" }, "geometry": {"type": "Point", "coordinates": [ -8.43426609412621, 40.2416864410418 ] } },
What should I change to be able to search by date?
Thank you,
Paula
Reply all
Reply to author
Forward
0 new messages