Adding Interactive Maps to Laravel Applications with Leaflet js - Step 2 - Installing Leaflet with Laravel Mix

To complete this step you will need to ensure Node is installed and Laravel mix is working. If you need to review this step checkout this post on installing a Star rating system http://learnlaravel.net/953/adding-a-star-rating-system-to-your-application-step-4-adding-the-star-rating-component/. To install Leaflet with node package manager type

npm install leaflet

To instruct mix to add leaflet to the app.js file add the following line to resources\js\app.js

require('leaflet/dist/leaflet.js');

Then to instruct mix to add the leaflet css to app.css add the follwing line to resources\sass\app.scss

@import "~leaflet/dist/leaflet.css";

Now rebuild the public\css\app.css and public\js\app.js files by running the following command in the CLI

npm run dev

You may need to double check that the app.css and app.js files are linked in the resources\layouts\app.blade.php file - this should include the following two lines at the top

<link rel="stylesheet" href="{{asset('css/app.css')}}"> 
<script src="{{asset('js/app.js')}}"></script>

Next we need to add a method to the courtController and a corresponding route which will allow us to display our leaflet map. To do this add the following method to app\Http\controllers\courtController.php

public function showMap()
{
    return view('courts.showmap');
}

To make this method work add the following line to routes\web.php

Route::get('/courts/show/map', 'courtController@showmap')->name('courts.showmap');

Before you can use the mapbox you need to register on the site mapbox.com to obtain an API access token. This process takes just a couple of minutes. Its completely free to register and get an access token. Use of this free token is capped at 50,000 free requests per month. This should be more than enough for emerging applications and web sites. Finally to add a blade view which will render the map save the following file to \resources\views\courts\showmap.blade.php. Replace YOUR_API_TOKEN_HERE with the token you retrieved from Mapbox when you registered.

@extends('layouts.app')
 @csrf
 @section('content')
 <div id="mapid" class="center-block" style="width: 100%; height: 400px;"></div>
 <script>
     var mymap = L.map('mapid');
     var icon = new L.Icon();
     icon.options.shadowSize = [0,0];
     icon.options.iconSize = [20, 40];
     icon.options.iconAnchor = [10, 70];
     icon.options.iconUrl = "{{asset('images/vendor/leaflet/dist/marker-icon.png')}}";
     L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=YOUR_API_TOKEN_HERE', {
         attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
         maxZoom: 18,
         id: 'mapbox/streets-v11',
         tileSize: 512,
         zoomOffset: -1,
     }).addTo(mymap);
 mymap.setView(new L.LatLng(53.4053, -6.3784), 13); 
 </script>
 @endsection

Now if you visit http://localhost:8000/courts/show/map you should see a map as follows

In the next post we'll look at using the json from the courts to drop pins on the map at the various locations of the courts.

Leave a Reply Cancel reply