Show shape file (.shp)(map) on map with shape file
Include gasparesganga package in php code
https://gasparesganga.com/labs/php-shapefile/
<?php
// Register autoloader
require_once('vendor/gasparesganga/php-shapefile/src/Shapefile/ShapefileAutoloader.php');
Shapefile\ShapefileAutoloader::register();
// Import classes
use Shapefile\Shapefile;
use Shapefile\ShapefileException;
use Shapefile\ShapefileReader;
try {
// Open Shapefile
$Shapefile = new ShapefileReader('filepath/shapefile.shp');
// $json_data = $Shapefile->fetchRecord()->getGeoJSON();
$geoJsonArray = [];
while ($Geometry = $Shapefile->fetchRecord()) {
// Skip the record if marked as "deleted"
if ($Geometry->isDeleted()) {
continue;
}
// Print Geometry as an Array
/* print_r($Geometry->getArray());
// Print Geometry as WKT
print_r($Geometry->getWKT());
// Print Geometry as GeoJSON
print_r($Geometry->getGeoJSON());
// Print DBF data
print_r($Geometry->getDataArray()); */
$geoJsonArray[] = $Geometry->getGeoJSON();
}
} catch (ShapefileException $e) {
// Print detailed error information
echo "Error Type: " . $e->getErrorType()
. "\nMessage: " . $e->getMessage()
. "\nDetails: " . $e->getDetails();
}
$geoJsonArray = json_encode($geoJsonArray);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map View</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
</head>
<body>
<div id="map" style="width: 100%; height: 500px;"></div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
var map = L.map('map').setView([42.383, -93.305], 13); // Adjust the initial view
// Add a base layer (OpenStreetMap)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// GeoJSON data
var geoJsonData = "<?php echo $geoJsonArray; ?>";
// Iterate through the array of GeoJSON strings and add them to the map
geoJsonData.forEach(function(geoJsonString) {
var geoJson = JSON.parse(geoJsonString);
L.geoJSON(geoJson).addTo(map);
});
</script>
</body>
</html>
Comments
Post a Comment