Php-Slim with Leaflet Map

Title: Building a SlimPHP Application with Leaflet.js Mapping on Fedora Linux

Introduction

SlimPHP is a lightweight PHP framework that makes it easy to build web applications, and Leaflet.js is a powerful JavaScript library for interactive maps. Together, they provide a robust solution for creating web applications with mapping capabilities. In this guide, we’ll walk you through setting up a SlimPHP application with Leaflet.js for mapping on Fedora Linux.

Step 1: Install PHP and Composer

First, ensure you have PHP and Composer installed on your Fedora system. Open a terminal and run:

sudo dnf install -y php php-cli php-common php-mbstring php-xml
sudo dnf install -y composer

Verify the installations:

php --version
composer --version

Step 2: Create a New SlimPHP Project

Create a new directory for your SlimPHP project and navigate into it:

mkdir my-slim-map-app
cd my-slim-map-app

Use Composer to create a new SlimPHP project:

composer require slim/slim "^4.0"
composer require slim/psr7
composer require nyholm/psr7
composer require slim/twig-view

Step 3: Set Up the Project Structure

Create the following directory structure within your project:

my-slim-map-app/
├── public/
│   └── index.php
├── templates/
│   └── map.twig
└── src/
    └── dependencies.php

Step 4: Configure SlimPHP with Twig

Edit the index.php file in the public directory:

<?php

require __DIR__ . '/../vendor/autoload.php';

use Psr\Http\Message\ResponseInterface as Response;
use Psr\Http\Message\ServerRequestInterface as Request;
use Slim\Factory\AppFactory;
use Slim\Views\Twig;
use Slim\Views\TwigMiddleware;

$app = AppFactory::create();

$twig = Twig::create('../templates', ['cache' => false]);
$app->add(TwigMiddleware::createFromContainer($app, Twig::class));

$app->get('/', function (Request $request, Response $response, $args) {
    $view = Twig::fromRequest($request);
    return $view->render($response, 'map.twig');
});

$app->run();

Step 5: Create a Twig Template for the Map

Create a map.twig file in the templates directory with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Map with SlimPHP</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map {
            height: 100vh;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        var map = L.map('map').setView([51.505, -0.09], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        L.marker([51.5, -0.09]).addTo(map)
            .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
            .openPopup();
    </script>
</body>
</html>

Step 6: Serve Your Application

To serve your SlimPHP application, use the built-in PHP server. Navigate to your project directory and run:

php -S localhost:8080 -t public

Open your web browser and visit http://localhost:8080. You should see a Leaflet map displayed.

Step 7: Add More Features to Your Map

You can extend the functionality of your map by adding more markers, popups, and layers. For example, update map.twig to include additional features:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Map with SlimPHP</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map {
            height: 100vh;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        var map = L.map('map').setView([51.505, -0.09], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        var marker = L.marker([51.5, -0.09]).addTo(map)
            .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
            .openPopup();

        var circle = L.circle([51.508, -0.11], {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.5,
            radius: 500
        }).addTo(map).bindPopup('I am a circle.');

        var polygon = L.polygon([
            [51.509, -0.08],
            [51.503, -0.06],
            [51.51, -0.047]
        ]).addTo(map).bindPopup('I am a polygon.');
    </script>
</body>
</html>

Conclusion

You have successfully set up a SlimPHP application with Leaflet.js for interactive mapping on Fedora Linux. This setup provides a robust foundation for building web applications with dynamic maps. Feel free to expand your application by adding more routes, templates, and Leaflet features. Happy mapping!

clear and concise instructions for setting up a SlimPHP application with Leaflet.js for mapping on Fedora Linux.

7Soft Interactive Inc.

Php-Slim with Leaflet Map

Leave a Reply Cancel reply