{"id":175,"date":"2024-05-27T00:27:23","date_gmt":"2024-05-27T06:27:23","guid":{"rendered":"https:\/\/www.7softinteractive.net\/?p=175"},"modified":"2024-05-29T12:06:46","modified_gmt":"2024-05-29T18:06:46","slug":"php-slim-with-leaflet-map","status":"publish","type":"post","link":"https:\/\/www.7softinteractive.net\/?p=175","title":{"rendered":"Php-Slim with Leaflet Map"},"content":{"rendered":"\n

Title: Building a SlimPHP Application with Leaflet.js Mapping on Fedora Linux<\/strong><\/p>\n\n\n\n

\n\n\n\n

Introduction<\/strong><\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\n\n\n\n

Step 1: Install PHP and Composer<\/strong><\/p>\n\n\n\n

First, ensure you have PHP and Composer installed on your Fedora system. Open a terminal and run:<\/p>\n\n\n\n

sudo dnf install -y php php-cli php-common php-mbstring php-xml\nsudo dnf install -y composer<\/code><\/pre>\n\n\n\n
Verify the installations:<\/p>\n\n\n\n
php --version\ncomposer --version<\/code><\/pre>\n\n\n\n
\n\n\n\n
Step 2: Create a New SlimPHP Project<\/strong><\/p>\n\n\n\n
Create a new directory for your SlimPHP project and navigate into it:<\/p>\n\n\n\n
mkdir my-slim-map-app\ncd my-slim-map-app<\/code><\/pre>\n\n\n\n
Use Composer to create a new SlimPHP project:<\/p>\n\n\n\n
composer require slim\/slim \"^4.0\"\ncomposer require slim\/psr7\ncomposer require nyholm\/psr7\ncomposer require slim\/twig-view<\/code><\/pre>\n\n\n\n
\n\n\n\n
Step 3: Set Up the Project Structure<\/strong><\/p>\n\n\n\n
Create the following directory structure within your project:<\/p>\n\n\n\n
my-slim-map-app\/\n\u251c\u2500\u2500 public\/\n\u2502   \u2514\u2500\u2500 index.php\n\u251c\u2500\u2500 templates\/\n\u2502   \u2514\u2500\u2500 map.twig\n\u2514\u2500\u2500 src\/\n    \u2514\u2500\u2500 dependencies.php<\/code><\/pre>\n\n\n\n
\n\n\n\n
Step 4: Configure SlimPHP with Twig<\/strong><\/p>\n\n\n\n
Edit the index.php<\/code> file in the public<\/code> directory:<\/p>\n\n\n\n
<?php\n\nrequire __DIR__ . '\/..\/vendor\/autoload.php';\n\nuse Psr\\Http\\Message\\ResponseInterface as Response;\nuse Psr\\Http\\Message\\ServerRequestInterface as Request;\nuse Slim\\Factory\\AppFactory;\nuse Slim\\Views\\Twig;\nuse Slim\\Views\\TwigMiddleware;\n\n$app = AppFactory::create();\n\n$twig = Twig::create('..\/templates', ['cache' => false]);\n$app->add(TwigMiddleware::createFromContainer($app, Twig::class));\n\n$app->get('\/', function (Request $request, Response $response, $args) {\n    $view = Twig::fromRequest($request);\n    return $view->render($response, 'map.twig');\n});\n\n$app->run();<\/code><\/pre>\n\n\n\n
\n\n\n\n
Step 5: Create a Twig Template for the Map<\/strong><\/p>\n\n\n\n
Create a map.twig<\/code> file in the templates<\/code> directory with the following content:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Leaflet Map with SlimPHP<\/title>\n    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.css\" \/>\n    <style>\n        #map {\n            height: 100vh;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div id=\"map\"><\/div>\n    <script src=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.js\"><\/script>\n    <script>\n        var map = L.map('map').setView([51.505, -0.09], 13);\n\n        L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n            attribution: '&copy; <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a> contributors'\n        }).addTo(map);\n\n        L.marker([51.5, -0.09]).addTo(map)\n            .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')\n            .openPopup();\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
\n\n\n\n
Step 6: Serve Your Application<\/strong><\/p>\n\n\n\n
To serve your SlimPHP application, use the built-in PHP server. Navigate to your project directory and run:<\/p>\n\n\n\n
php -S localhost:8080 -t public<\/code><\/pre>\n\n\n\n
Open your web browser and visit http:\/\/localhost:8080<\/code>. You should see a Leaflet map displayed.<\/p>\n\n\n\n
\n\n\n\n
Step 7: Add More Features to Your Map<\/strong><\/p>\n\n\n\n
You can extend the functionality of your map by adding more markers, popups, and layers. For example, update map.twig<\/code> to include additional features:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Leaflet Map with SlimPHP<\/title>\n    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.css\" \/>\n    <style>\n        #map {\n            height: 100vh;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div id=\"map\"><\/div>\n    <script src=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.js\"><\/script>\n    <script>\n        var map = L.map('map').setView([51.505, -0.09], 13);\n\n        L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n            attribution: '&copy; <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a> contributors'\n        }).addTo(map);\n\n        var marker = L.marker([51.5, -0.09]).addTo(map)\n            .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')\n            .openPopup();\n\n        var circle = L.circle([51.508, -0.11], {\n            color: 'red',\n            fillColor: '#f03',\n            fillOpacity: 0.5,\n            radius: 500\n        }).addTo(map).bindPopup('I am a circle.');\n\n        var polygon = L.polygon([\n            [51.509, -0.08],\n            [51.503, -0.06],\n            [51.51, -0.047]\n        ]).addTo(map).bindPopup('I am a polygon.');\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
\n\n\n\n
Conclusion<\/strong><\/p>\n\n\n\n
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!<\/p>\n\n\n\n
clear and concise instructions for setting up a SlimPHP application with Leaflet.js for mapping on Fedora Linux.<\/p>\n","protected":false},"excerpt":{"rendered":"
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<\/p>\n","protected":false},"author":2,"featured_media":183,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-175","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-environment"],"_links":{"self":[{"href":"https:\/\/www.7softinteractive.net\/index.php?rest_route=\/wp\/v2\/posts\/175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.7softinteractive.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.7softinteractive.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.7softinteractive.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.7softinteractive.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=175"}],"version-history":[{"count":2,"href":"https:\/\/www.7softinteractive.net\/index.php?rest_route=\/wp\/v2\/posts\/175\/revisions"}],"predecessor-version":[{"id":194,"href":"https:\/\/www.7softinteractive.net\/index.php?rest_route=\/wp\/v2\/posts\/175\/revisions\/194"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.7softinteractive.net\/index.php?rest_route=\/wp\/v2\/media\/183"}],"wp:attachment":[{"href":"https:\/\/www.7softinteractive.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.7softinteractive.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.7softinteractive.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}