Adding Interactive Maps to Laravel Applications with Leaflet js - Step 4 - Adding a new Location/Marker

In the last post in this series, I will explain how by clicking on a particular location on the map we can retrieve the latitude and longitude of that location and use it to create a new court in the tennis club.

In order to create a new court without leaving the map itself we will leverage twitter bootstrap's modals. Modals are forms or dialogue boxes that pop up in front of your application leaving the same web page loaded in the background. Often times the modal could be something simple asking the user to approve or confirm something. Once the modal is dealt with, it disappears again.

When we click on the map, a new modal should appear prompting us to enter details of a new court in that location. The latitude and longitude of the location will be pulled from the event of the location clicked on by the user and then populated on to the form. The form, although it will be in a modal will be based on the standard create new court form which has already been auto-generated by the scaffolder.

Create a new file - \resources\courts\court\createcourtmodal.blade.php using the following code

<!-- Modal -->
 <div class="container fluid">
     <div id="createCourtModal" class="modal fade" role="dialog">
       <div class="modal-dialog">
         <!-- Modal content-->
         <div class="modal-content">
             <div class="modal-header">
               <h4 class="modal-title" >Create New Court</h4>
             </div>
             <div class="modal-body container-fluid">
                 {!! Form::open(['id' => 'createCourtForm','route' => 'courts.store']) !!}
                    @include('courts.fields')
                 {!! Form::close() !!}
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                 <input type="submit" id="submit" class="btn btn-default"/>
             </div>
         </div>
       </div>
     </div>
 </div>
 <script>
 $('#submit').click( function(e) { 
     $("#createCourtForm").submit();
     $('#createCourtModal').modal('hide');
 });
 </script>

Next modify the file \resources\courts\showmap.blade.php to include the following - set the map to point to a function that will capture the click event and add the function itself. This function sets the lat and lng fields within the modal (they're actually in the fields.blade.php file) using the coordinates of the location clicked on the map. It then "shows" the modal.

mymap.on('click', onMapClick);

function onMapClick(e) { 
    $('#lat').val(e.latlng.lat);
    $('#lng').val(e.latlng.lng);        
    $('#createCourtModal').modal('show');
}

These should go inside the script tag at the bottom of the showmap view. In addition add an include directive to pull in the createcourtmodal.

As the number fileds auto-generated by the scaffolder for the latitude and longitude don't actually accept numbers with decimal places, we need to change them back to text fields to correct this small error. Open \resources\courts\fields.blade.php and change where it says "number" to "text" as follows

To complete the picture, once a new location has been added to the map, we want to re-direct back to the /courts/show/map view. To do this open the \app\Http\Controllers\courtController.php and find the store( ) method which is called when the modal form is submitted. Change the line which redirect back to the courts.index route so that it re-directs to the courts.show.map route as follows.

Now when you add a new court you will be re-directed back to the map with the new marker loaded.