Leaflet map latitude and longitude marker with PHP

How to make a simple Leaflet map box with a marker at your set latitude and longitude values. Leaflet is a free, open-source javascript library for working with interactive maps.

This is what the final result will look like:

The marker location is set by lat and lon values in the URL, the example being map.php?lat=-37.818217&lon=144.956784

Gist link

These are the parts that make up map.php

Starting the page of with PHP which determines the latitude and longitude values, if they are not set it will state so and give an example link.

Getting values from a URL can be done in Javascript however I choose PHP because it will provide compatibility with another project.

<?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;
}
?>

Now the leaflet code, this goes before the closing </body> tag. PHP will output the lat and lon values, the map tiles are just regular Open street map style and the marker is not draggable.

$(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: '&copy; <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);
})

This is the map.php page “boring” parts. It needs leaflet CSS, Jquery and leaflet JS to work. Then there is the custom CSS style for the map box.

<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>

Thats it, this will make a map box with a market placed for the latitude and longitude set via the URL.

Gist link