Adding leafletjs map and marker to a laravel project

To add a LeafletJS map and marker to a Laravel project, follow these steps:

Install LeafletJS: First, you need to include LeafletJS in your Laravel project. You can either download the files manually from the LeafletJS website (https://leafletjs.com/) or use a package manager like NPM or Yarn. Here, we will use NPM.

Open your terminal or command prompt and navigate to your Laravel project directory. Run the following command to install LeafletJS:

npm install leaflet --save

This command will install LeafletJS and add it to your project's dependencies.

Create a Blade view: Create a new Blade view file where you want to display the map. For example, create a new file called map.blade.php in the resources/views directory.
Add LeafletJS to the Blade view: In the map.blade.php file, add the following HTML code to include LeafletJS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-C6xysGQPOZn+YoIQmQjW1QuOaw7X1qjeuVltK7l/Oa47gw/lXkqbwIYqIxjgFtr9y2" crossorigin="anonymous"></script>
    <style>
        #mapid { height: 400px; width: 100%; }
    </style>
</head>
<body>
    <!-- Your HTML content goes here -->

    <div id="mapid"></div>

    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

This code includes the LeafletJS CSS and JavaScript files, as well as jQuery, which is required by LeafletJS. It also sets up a #mapid div with a height of 400 pixels and a width of 100%.

Add a marker to the map: To add a marker to the map, you need to write some JavaScript code. Add the following JavaScript code to the <script> tag in the map.blade.php file:

<script>
    // Initialize the map
    var map = L.map('mapid').setView([51.505, -0.09], 13);

    // Add a marker
    L.marker([51.5, -0.09]).addTo(map)
        .bindPopup('A marker popup!')
        .on('click', function () {
            alert('You clicked a marker!');
        });
</script>

This code initializes the map with a center position of [51.505, -0.09], which is the default position for London. It also adds a marker at the same position and sets up a popup and click event for the marker.

Access the map view: Finally, you need to create a route and controller action to access the map.blade.php view. Create a new controller called MapController.php in the app/Http/Controllers directory and add the following code:

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class MapController extends Controller
{
    public function index()
    {
        return view('map');
    }
}

Then, create a new route in the routes/web.php file:

Route::get('/map', 'MapController@index');

Now, you can access the map view by visiting the /map URL in your web browser.

That's it! You have successfully added a LeafletJS map and marker to your Laravel project.