Leaflet map latitude and longitude marker with PHP
<?php | |
if (isset($_GET['lat']) && isset($_GET['lon'])) { | |
$lat = $_GET['lat']; | |
$lon = $_GET['lon']; | |
} else { | |
echo "<h1>Latitude and Longitude must be set in URL</h1>"; | |
echo "<p>Example: <a href='map.php?lat=-37.818217&lon=144.956784'>map.php?lat=-37.818217&lon=144.956784</a></p>"; | |
exit; | |
} | |
?> | |
<html lang="en"> | |
<head> | |
<title>Map</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css"/> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js"></script> | |
<style> | |
body { | |
background: rgb(73, 234, 188); | |
} | |
.container { | |
background-color: white; | |
width: 25rem; | |
position: absolute; | |
top: 40%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
padding: 1.4rem; | |
box-shadow: 1px 5px 5px 0 rgba(0, 0, 0, 0.20); | |
border-radius: 0.2rem; | |
box-sizing: border-box; | |
} | |
.container * { | |
box-sizing: inherit; | |
font-size: inherit; | |
} | |
.container #MapBox { | |
margin-bottom: 0.75rem; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<div id="MapBox" style="height: 21rem"></div> | |
</div> | |
<script> | |
$(function () { | |
setLocation = [<?php echo $lat;?>, <?php echo $lon;?>]; | |
var map = L.map('MapBox').setView(setLocation, 14); | |
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', { | |
attribution: '© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors' | |
}).addTo(map); | |
map.attributionControl.setPrefix(false); | |
var marker = new L.marker(setLocation, { | |
draggable: false | |
}); | |
map.addLayer(marker); | |
}) | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment