Passing external PHP variable into html script tag for leaflet map-CodePudding

I'm attempting to pass a variable from a php file that gets executed upon a button click that queries a database. Within the php file a variable that is an array gets populated and then needs to be passed back to the html so that I can use it to filter my geojson points for a leaflet map. If I hard code the variable "filterlist" inside the html script tag, the filter works fine and the points are displayed on the map. If I comment that line out of the html script tag (as is shown in the sample html code below), the map doesn't display anything. Obviously I'm incorrectly passing the variable from the external php script to use in the html script tag but I can't figure out what I'm doing wrong. It's been getting very frustrating as I've been working on this for a while now. Any help is greatly appreciated. Here is a snippet of the code. If you need anything else just let me know and I'll respond promptly.

The PHP file (searchDataset.php):

<?
$UniqueIDsPass = ['Dane_5802790', 'Dane_5803376', 'Dane_5803377', 'Dane_5803025', 'Dane_5778080'];
$filterlist2 = json_encode($UniqueIDsPass);
>?
<script type="text/javascript">var  filterlist = "<?= $filterlist2 ?>";</script>

The html code (test2.html):

<html>
    <head>
        <meta charset="utf-8">
        <title>Testing Web Mapping</title>
        <link rel="stylesheet" href="leaflet/leaflet.css" />
        <link rel="stylesheet" href="leaflet/MarkerCluster.css" />
        <link rel="stylesheet" href="leaflet/MarkerCluster.Default.css" />
        <link rel="stylesheet" href="tabcontent.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script src="moveitems2.js"></script>
        <script src="leaflet/leaflet-ui.js"></script>   
        <script src="leaflet/leaflet.js"></script>
        <script src="leaflet/leaflet.ajax.min.js"></script>
        <script src="leaflet/leaflet.markercluster.js"></script>
</head>
<body>
<div>
<div id="map" style="width:700px; height: 850px"></div>
</div>
<form id="FilterForm" method="post" action="searchDataset.php" target='resultsFrame'>
    <button onclick="listboxSelectAll();">Search Button</button>
</form>

<script type="text/javascript">
                            
    var map = L.map('map',{
        center:[44.4340101, -90.0139754], 
        zoom:7});
    var usgs = L.tileLayer.wms("http://basemap.nationalmap.gov/ArcGIS/services/USGSImageryOnly/MapServer/WMSServer", {layers:'0', format: 'image/png', transparent: true, attribution: "USGS"}).addTo(map);
                            
    var PointsStyle = {
        "radius": 4,
        "color": "#fb0f04", 
        "fillColor": "#fb0f04",
        "weight": 1,
        "opacity": 1,
        "fillOpacity": 0
    };
                            
    function FilterSales(layer) {
        return filterlist.includes(layer.properties.UniqueID)
    }
                            
    //var filterlist = ['Dane_5802790', 'Dane_5803376', 'Dane_5803377', 'Dane_5803025', 'Dane_5778080'];

    var markers = L.markerClusterGroup();
    var Sale_points = L.geoJSON.ajax('GIS/Sales_points_geojson.geojson', {
        pointToLayer: function (feature, latlng) {
            return markers.addLayer(L.circleMarker(latlng, PointsStyle));
        }, filter: FilterSales
    }).addTo(map);
                            
    map.addLayer(markers)
                            
    var Sale_polys = L.geoJSON.ajax('GIS/Sales_polygons_geojson.geojson', 
        {style: PolygonsStyle, onEachFeature: SalesTooltips, filter: FilterSales});
                                
</script>
</body>
</html>

CodePudding user response：

You have two syntax errors in the php file:

On line 4 it should be ?> and not the other way around
On line 5 remove the quotes around <?= $filterlist2 ?>

That should fix the syntax errors in your php code. If you want to use the filterlist2 javascript variable in your html you should generate the html in the php file. Javascript variables don't persist when you are causing a new page reload. So combining the two files you should have just the following test2.php file.

test2.php:

<html>
    <head>
        <meta charset="utf-8">
        <title>Testing Web Mapping</title>
        <link rel="stylesheet" href="leaflet/leaflet.css" />
        <link rel="stylesheet" href="leaflet/MarkerCluster.css" />
        <link rel="stylesheet" href="leaflet/MarkerCluster.Default.css" />
        <link rel="stylesheet" href="tabcontent.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
        
<?
$UniqueIDsPass = ['Dane_5802790', 'Dane_5803376', 'Dane_5803377', 'Dane_5803025', 'Dane_5778080'];
$filterlist2 = json_encode($UniqueIDsPass);
?>
        <script type="text/javascript">var  filterlist = <?= $filterlist2 ?>;</script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script src="moveitems2.js"></script>
        <script src="leaflet/leaflet-ui.js"></script>   
        <script src="leaflet/leaflet.js"></script>
        <script src="leaflet/leaflet.ajax.min.js"></script>
        <script src="leaflet/leaflet.markercluster.js"></script>
</head>
<body>
<div>
<div id="map" style="width:700px; height: 850px"></div>
</div>
<form id="FilterForm" method="post" action="searchDataset.php" target='resultsFrame'>
    <button onclick="listboxSelectAll();">Search Button</button>
</form>

<script type="text/javascript">
                            
    var map = L.map('map',{
        center:[44.4340101, -90.0139754], 
        zoom:7});
    var usgs = L.tileLayer.wms("http://basemap.nationalmap.gov/ArcGIS/services/USGSImageryOnly/MapServer/WMSServer", {layers:'0', format: 'image/png', transparent: true, attribution: "USGS"}).addTo(map);
                            
    var PointsStyle = {
        "radius": 4,
        "color": "#fb0f04", 
        "fillColor": "#fb0f04",
        "weight": 1,
        "opacity": 1,
        "fillOpacity": 0
    };
                            
    function FilterSales(layer) {
        return filterlist.includes(layer.properties.UniqueID)
    }

    var markers = L.markerClusterGroup();
    var Sale_points = L.geoJSON.ajax('GIS/Sales_points_geojson.geojson', {
        pointToLayer: function (feature, latlng) {
            return markers.addLayer(L.circleMarker(latlng, PointsStyle));
        }, filter: FilterSales
    }).addTo(map);
                            
    map.addLayer(markers)
                            
    var Sale_polys = L.geoJSON.ajax('GIS/Sales_polygons_geojson.geojson', 
        {style: PolygonsStyle, onEachFeature: SalesTooltips, filter: FilterSales});
                                
</script>
</body>
</html>