I'm trying to view the Leaflet map showing events in certain locations on the specified dates. As for now I've managed to customise a map to display markers for all the events taken from mysql database. The next step is to apply the time filter.
I've already applied the time filter to the table (using the same data that the map). So I've got three files: - event.php - which displays a map and a table as well as a filter (with apply button) - applychanges.php - which is ran when the button is pressed. It doesn't contain any information about the map, but the specified date range is passed to this file to affect the table - getlocation.php - this file uses a jquery to obtain the location info from mysql and converts data into a json format - for a Leaflet map to be able to use it.
My problem is that when I try to modify getlocation.php file to pass info about time range I loose markers completely.
I've tried to pass variables value through:
1.AJAX - by passing data to url: getlocation.php
2. Including a file containing time range variables into getlocation.php
3. Passing variables through the session, like this:
applychanges.php
session_start();
$_SESSION['beg'] = $_POST["range_beginning"];
$_SESSION['end'] = $_POST["range_end"];
```php
getlocation.php
```php
session_start();
and adding the following to my jquery
WHERE cast(eventdate as date) BETWEEN '".$_SESSION['beg']."' AND '".$_SESSION['end']."'
event.php datepicker code
$(document).ready(function(){
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd'
});
$(function(){
$("#range_beginning").datepicker();
$("#range_end").datepicker();
});
$('#applyFilter').click(function(){
var range_beginning = $('#range_beginning').val();
var range_end = $('#range_end').val();
if(range_beginning != '' && range_end != '')
{
$.ajax({
url: "applychanges.php",
method:"POST",
data:{range_beginning:range_beginning, range_end:range_end},
success:function(data)
{
$('#table').html(data);
}
});
}
else
{
alert("Incorrect input. Please Select Date");
}
});
});
leaflet - setting up markers of the previously defined variable map
function showCallLocation(map) {
var markerIcon = L.icon({
iconUrl: "./pics/marker.png",
iconSize: [25,25]
});
$.getJSON("getlocation.php", function(data) {
for (var i = 0; i < data.length; i++) {
var location = new L.LatLng(data[i].Latitude, data[i].Longitude);
var event_location = data[i].city + " (" + data[i].country + ")";
var marker = new L.Marker(location, {
icon: markerIcon,
title: event_location
});
marker.addTo(map);
}
});
}
</script>
getlocation.php
<?php
require "connect.php";
$sql="SELECT * FROM events; //gets location name as well as the map coordinates - longitude and latitude
if (!$rs) {
echo "An SQL error occured.
";
exit;
}
$rows = array();
while($r = mysqli_fetch_assoc($rs)) {
$rows[] = $r;
}
print json_encode($rows);
?>
So I would like to find the way to pass the time range variables to jquery in getlocation.php or to apply the filter (on events shown on the map) a different way. Thanks