Development

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

Next Pink Cliffs Heathcote drone images »

Previous « Getting image EXIF data with Ubuntu

Tags: How toLeafletPHPWeb Dev

5 years ago

FTP getting array of file details such as size using PHP
Using FTP and PHP to get an array of file details such as size and…
Creating Laravel form requests
Creating and using Laravel form requests to create cleaner code, separation and reusability for your…
Improving the default Laravel login and register views
Improving the default Laravel login and register views in such a simple manner but making…