Home > Article > Backend Development > Create a map application using PHP and Leaflet

Create a map application using PHP and Leaflet

WBOYOriginal: 2023-05-11 15:54:371209browse

In recent years, Web GIS technology has been increasingly widely used, and Leaflet, as a lightweight open source JavaScript map library, has become the first choice for many Web map applications. Web applications written in PHP language can easily display map information and geographical location data on the Web. This article explains how to create a map application using PHP and Leaflet.

Preparation work

Before development, we need to prepare some development tools. First, you need to install the PHP development environment in advance. The code in this article is developed based on PHP7.3.12 version. Secondly, you need to download the Leaflet library. You can download the latest version of the library from the official website, or get the source code on GitHub. Finally, we need to choose a web framework to help us quickly build web services developed in PHP. In this article we choose to use a PHP framework: Lumen.

Create a map application

(1) Create a Lumen project

We can install Lumen through Composer. Enter the following command in the command line (provided Composer has been installed):

composer create-project --prefer-dist laravel/lumen map-app

This command will create a Lumen project named map-app in the current file directory.

(2) Install dependencies

Enter the project root directory and execute the following command to install the required dependencies:

composer install

(3) Integrate Leaflet

us Create a new folder (such as "public") in the root directory of the website and extract the downloaded Leaflet library file into this folder. Add the following code to the HTML page to introduce the Leaflet library:

<link rel="stylesheet" href="/public/leaflet/leaflet.css" />
<script type="text/javascript" src="/public/leaflet/leaflet.js"></script>

(4) Define routing

In the Lumen framework, we usually use routing to handle URL requests. Create a file named "web.php" in the "routes" directory and define different URLs corresponding to different processors. For example:

<?php
$router->get('/', 'MapController@showMap');
?>

We create a file named "MapController.php" in the root directory to handle different URL requests. This file contains the following method:

<?php
namespace AppHttpControllers;

use LaravelLumenRoutingController as BaseController;

class MapController extends BaseController {

  public function showMap() {
    return view('map');
  }

}
?>

This method specifies that when the user accesses the "/" URL, the Blade template named "map.blade.php" will be displayed accordingly.

(5) Define Blade template

Blade is an extremely popular PHP template engine that allows us to write template files using a specific syntax format. In the “resources/views” directory, we create a template file named “map.blade.php”. The file contains the following code:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/public/leaflet/leaflet.css" />
  <script src="/public/leaflet/leaflet.js"></script>
  <style>
    #mapid { height: 600px; }
  </style>
</head>
<body>
  <div id="mapid"></div>
  <script>
    var mymap = L.map('mapid').setView([51.505, -0.09], 13);
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
          '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
          'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'change me'
    }).addTo(mymap);
  </script>
</body>
</html>

This template file defines the initial position and zoom level of a map, using the street map style provided by Mapbox, in which the "accessToken" needs to be filled in with your own Mapbox Access Token. In the template file, we also need to reference the Leaflet library file introduced in the “public” folder.

(6) Run the application

Now you can enter the following command in the command line to start the Web server:

php -S localhost:8000 -t public

Visit "http://localhost: 8000” to see the web page showing the map.

Conclusion

Through the study of this article, readers have learned how to use PHP and Leaflet to create map applications. We learned how to use the Lumen framework, how to import the Leaflet library, how to create maps in templates, and how to start a web server. Readers can use this article to gain a preliminary understanding of how to use PHP to create Web GIS applications.

The above is the detailed content of Create a map application using PHP and Leaflet. For more information, please follow other related articles on the PHP Chinese website!

php JavaScript composer html Token public map github http Access

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to do real-time data synchronization using PHP and FirebaseNext article：How to do real-time data synchronization using PHP and Firebase

See more

Create a map application using PHP and Leaflet

Related articles