Incorporating PHP arrays into JavaScript for creating a dynamic Leaflet map

Question

Incorporating PHP arrays into JavaScript for creating a dynamic Leaflet map

I have a PHP array containing names and coordinates for infrastructure stored in a database. Here is how I am trying to pass it:

    $data = array();
    @endphp

    @foreach ($infrastructures as $infrastructure)
        @if ($loop->iteration)
            @php
                $name = $infrastructure->inf_name;
                $coord = $infrastructure->inf_lat.",".$infrastructure->inf_long;
                $data = $name.",". $coord;
            @endphp
        @endif
    @endforeach

The result of the loop is (Red Beach Seawall,1.3582,172.9266 Buota Bridge,1.3901,173.1343 Nippon Causeway,1.3399,172.9579 Maaman Kaburara,0.403,173.9217 TUC Main Road,0.2264,182)

However, I want the output to be formatted like this in JavaScript.

<script>
                var infras= <?= json_encode($infras); ?>;
                var mymap = L.map('mapid').setView([1.3582,172.9266], 13);
                L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
                attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
                maxZoom: 10,
                id: 'mapbox/streets-v11',
                tileSize: 512,
                zoomOffset: -1,
                accessToken: enter your accesstoken here
                }).addTo(mymap);

                for (var i = 0; i < infras.length; i++){
                var marker = L.marker([infras[i][1],infras[i][2]]).addTo(mymap).bindPopup(infras[i][0]);
                }
 </script>

Could someone please help me with this?

Thank you

javascript laravel leaflet

Answer 1

Answer №1

To optimize the process, consider converting it into an array in the controller first and then passing $infras to the view.

php snippet

$infras= [];

foreach ($infrastructures as $infrastructure) {
  $infras[] = [
     $infrastructure->inf_name,
     infrastructure->inf_lat.",".$infrastructure->inf_long
  ];
}

You can directly render it into the js within the view or experiment with @json() based on your Laravel version. In complex json structures, using json_encode is recommended due to potential issues.

js script

 var infras= <?= json_encode($infras); ?>;

Update as per comment received

public function index(Request $request) {    
     $infrastructures = $this->infrastructureRepository->all();   

     $infras= [];
    
     foreach ($infrastructures as $infrastructure) {
       $infras[] = [
          $infrastructure->inf_name,
          infrastructure->inf_lat.",".$infrastructure->inf_long
       ];
     }
     
     return view('dashboard.index', [
        'infras' => $infras,
        'infrastructures' => $infrastructures,
       ]);  
     }
}

Answer 2

To optimize the process, consider converting it into an array in the controller first and then passing $infras to the view.

php snippet

$infras= [];

foreach ($infrastructures as $infrastructure) {
  $infras[] = [
     $infrastructure->inf_name,
     infrastructure->inf_lat.",".$infrastructure->inf_long
  ];
}

You can directly render it into the js within the view or experiment with @json() based on your Laravel version. In complex json structures, using json_encode is recommended due to potential issues.

js script

 var infras= <?= json_encode($infras); ?>;

Update as per comment received

public function index(Request $request) {    
     $infrastructures = $this->infrastructureRepository->all();   

     $infras= [];
    
     foreach ($infrastructures as $infrastructure) {
       $infras[] = [
          $infrastructure->inf_name,
          infrastructure->inf_lat.",".$infrastructure->inf_long
       ];
     }
     
     return view('dashboard.index', [
        'infras' => $infras,
        'infrastructures' => $infrastructures,
       ]);  
     }
}

Answer 3

Answer №2

Within my controller...

public function displayMap(Request $request)
        {
            $locations = $this->locationRepository->all();
    
    
            $coords= [];
    
            foreach ($locations as $location) {
              $coords[] = [
                 $location->loc_name,
                 $location->loc_lat,$location->loc_long
              ];
            }
    
            return view('dashboard.map', [
                'coords' => $coords,
                'locations' => $locations,
               ]);
        }
    }

Inside my map.blade.php file

        <div id='mapid' style='width: 100%; height: 300px;'></div>
        <script>
            var coords= <?= json_encode($coords); ?>;
            var mymap = L.map('mapid').setView([1.3582,172.9266], 13);
            L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 20,
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1,
            accessToken: 'enter your accesstoken here'
            }).addTo(mymap);

            for (var i = 0; i < coords.length; i++){
            var marker = L.marker([coords[i][1],coords[i][2]]).addTo(mymap).bindPopup(coords[i][0]);
            }
        </script>

Answer 4

Within my controller...

public function displayMap(Request $request)
        {
            $locations = $this->locationRepository->all();
    
    
            $coords= [];
    
            foreach ($locations as $location) {
              $coords[] = [
                 $location->loc_name,
                 $location->loc_lat,$location->loc_long
              ];
            }
    
            return view('dashboard.map', [
                'coords' => $coords,
                'locations' => $locations,
               ]);
        }
    }

Inside my map.blade.php file

        <div id='mapid' style='width: 100%; height: 300px;'></div>
        <script>
            var coords= <?= json_encode($coords); ?>;
            var mymap = L.map('mapid').setView([1.3582,172.9266], 13);
            L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 20,
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1,
            accessToken: 'enter your accesstoken here'
            }).addTo(mymap);

            for (var i = 0; i < coords.length; i++){
            var marker = L.marker([coords[i][1],coords[i][2]]).addTo(mymap).bindPopup(coords[i][0]);
            }
        </script>

Incorporating PHP arrays into JavaScript for creating a dynamic Leaflet map

Answer №1

Answer №2

Similar questions

Which design pattern would be best suited for monitoring the completion of multiple ajax requests?

Issue with ThreeJs: Difficulty loading separate images on top and bottom surfaces

Prevent Editing of Input Box in JQuery UI Sortable

Develop a custom cell editor for ag-Grid and insert it into a designated location within

Difficulty encountered while managing dropdown functionality in Protractor using TypeScript

Why is AngularJS redirection not retrieving the value from window.localStorage?

What is the method for retrieving the JSON data with the fetch API?

Access the environment variables generated throughout a collection run in the Newman Library

Reverse the order in which the array is iterated

Steps to fix ESlint warning: Avoid using assignment in return Statement (no-return-assign)

Use jQuery to dynamically capture and store the value of data-rowindex into an array

Shift the sideways movement of the triangle symbol

Tips for using jQuery to add several image source URLs to an array

Guide on displaying a document in react-doc-viewer from a protected API endpoint in either Next.Js or ReactJs

"Enhancing Error Handling in Express with Node.js Middleware for Parsing

Limit user input in TextField to positive unsigned integers using ReactJS Material-UI

Embedding a line chart created with chart.js into an SVG container with the help of d3.js

I encountered a SyntaxError that reads "Unexpected token instanceof" while using the Chrome Javascript console

What is the best way to retrieve a value from an asynchronous function in Node.js?

I am looking to create an engaging photo viewing experience by utilizing a modal to display each image in my gallery when clicked