We will be using leaflet, mapbox and laravel to generate a map. It should be noted that map only accepts coordinates in form of latitude and longitude. You must first import latitude and longitude in your local mysql database to proceed. Please read this blog to import coordinates.
Database Table
Please make a table with name "addresses" and a model name "Address". The "Addresses" table must have following fields.
id address (varchar 255) latitude (double) longitude (double)
Once you created the table and model. Add some addresses with latitude and longitude into it.
MapController
The index function of controller fetches data from "addresses" table and stores into locations array. The first element of the location array "location" is the tool tip view, second and third elements are latitude and longitude.
<?php
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use App\Models\Address;
class MapController extends Controller
{
public function index()
{
$locations = [];
foreach (Address::All() as $address) {
$locations[] = [
'location' => view('map-tool-tip')->with(['address' => $address])->render(),
'latitude' => $address->latitude,
'longitude' => $address->longitude
];
}
return view('map')->with([
'locations' => json_encode($locations)
]);
}
}
map-tool-tip.blade.php
This blade file is a tool tip view of the address that we will be visible when the marker of the map is clicked.
<strong>
{{ $address->address }}
</strong>
map.blade.php
Finally, the main map blade file where we send location data in json format from AddressController's index function. Don't forget to update default zoom location at .setView([47.977894, -96.569046], 12, [50, 50]); which includes default coordinates of Belgium.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<style type="text/css">
#map {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var mapboxTiles = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '<a target="_blank" href="http://www.mapbox.com/about/maps/" target="_blank">@ Mapbox</a>'
});
var map = L.map('map')
.addLayer(mapboxTiles)
.setView([47.977894, -96.569046], 12, [50, 50]);
$.each({!! $locations !!}, function (key, val) {
popup = L.popup({
closeOnClick: true,
autoClose: true
}).setContent(val.location);
L.marker([val.latitude, val.longitude]).addTo(map).bindPopup(popup);
});
</script>
</body>
</html>
Leave A comment
Email address is optional and will not be published. Only add email address if you want a reply from blog author.
Please fill required fields marked with *