Saving, Retrieving and Displaying a Map Layer using LeafletJS, Laravel and MySQL.

5 min readMar 17, 2021

First let me lay out what I will be trying to demonstrate through this article. For my second year project, I needed to allow a user to mark a location on a map and save those coordinates to a database. At this point in time, I was using Laravel for the backend and blade/bootstrap for the frontend. Yes, I know, not the most exciting technology out there, but it’s what I am familiar with.

For the map, I am using LeafletJS because it was recommended to me by a senior colleague with prior knowledge on the technology. The Leaflet Draw plugin will help me allow a user to mark their coordinates on the map.

Storing the Layer

So basically, the user will draw on the leafletJS map, the coordinates will be processed and assigned to a hidden input field using jQuery and stored in the database by Laravel.

Initial Setup

Step 1

Before we move onto saving the coordinates, first we have to create an environment where the layer can be saved. As I will be saving the entire layer to the database (I find this easier to retrieve that data when the entire layer is saved but individual coordinates can be saved as well), the database column will be of JSON type. This allows us to store the data as an array. I won’t get into how to create database tables in Laravel, but all you need to know is that for the field where you intend on saving the layer, create it as;

$table->json('polygon');

I've named the field “polygon” but feel free to name it whatever you want.

Step 2

The next step is to configure the model. If you’ve used Laravel before, all these concepts will be quite familiar to you. Since we are saving the layer as an array, it needs to be cast to an array when the data is sent to the database. In order to do this, we go to the model and explicitly cast every instance of polygon being saved to the database, into an array. This can be achieved by;

protected $casts = ['polygon' => 'array'];

Moving on…

Now lets take a look at the blade file where we will have the map.

First we will need to add a few imports, of the libraries and addons we will need.

<link rel="stylesheet" href="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7/leaflet.css" /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" /><script src="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7/leaflet.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"><script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

We require Leaflet, LeafletDraw, Bootstrap and JQuery.

To add the map to the Blade file we only need a single div. The map will be implemented as JavaScript.

<div id="map">

This is pretty much all the HTML we need for the map but for saving we will need another input field and a submit button.

<input id="polygon" type="text" class="form-control" name="polygon" value="{{request('polygon')}}">

For now I’ve set the type=”text” in order to demonstrate how the coordinate will be saved to this input field, but in actual implementation, it can be set to hidden.

Now the script segment of the code;

First I have set the center of the map to the center of the my country (Kandy). Then I have added the layer to the map which will display it under Open Street Maps.

Under draw control, we have the position. Which refers to where the drawing tools will be displayed. We also have different properties for each drawing tool.

color: The color the line will take.
allowIntersection: Will decide whether the line can intersect or not. If not an error message will be shown and drawing intersected lines will be prohibited.
showArea: Displays the total size of the area which the user has demarcated.
repeatMode: Prevents having to select the previously selected tool to draw another layer.

Setting a tool to false will disable that tool. Which is what I have done with the circlemarker tool.

On line 57, the layer is added to the map and on line 58, we are saving the details of the layer to the input field. Now when we click on the submit button, the layer details will be sent to the Laravel controller as if it is a normal input and it can be saved to the database. Because we are casting the data to an array within the model, the data will be saved to the database as an array.

Images

Observe that the polygon is purple as that is the color which we have set it to.

The tools are available at the top right, because the position was set to top right.

Now let us set the text field to hidden and change the position of the toolbox.

We can now observe that the position of the toolbox has been set to bottom left and the text field has been hidden. Also notice that the demarcated land size is also being shown.

Full code for blade file — Storing

Retrieving and Displaying the Layer

Now what we want to do is retrieve the layer from the database and input it to a leaflet layer which can be displayed on the map.

There's not much to worry about as the database and model setup has already been done.

Firstly we need to retrieve the data from the database and pass it onto the blade file which will contain the leaflet map. This can be done like any other basic data injection.

Assume the data is being passed in as $polygon.

<script>var polygon = @json($polygon);var layer = L.geoJSON(JSON.parse(polygon)).addTo(map);</script>

First we convert the data into JSON data and, parse it and add it to the map. And its as simple as that.

But what if the map doesn’t zoom in or out to fit my data?

<script>// Adjust map to show the coordinatesvar bounds = layer.getBounds();map.fitBounds(bounds);</script>

Full code for blade file — Retrieving

And that's pretty much it. Hope this helps.