1

I am using Leaflet 1.3.1, for show a map in a blog made with Laravel and Vue.js

The screen it is showing in grey, however, the markers and controls are showed.

introducir la descripción de la imagen aquí

When I check Inspect Elements in my browser, and check the layer , I can see that the .png of the map are loader, if I push it, the Tile or PNG is showing correctly and I can see this part of the map.

This is my code:

layout/app.blade.php

  ..../
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<script src="js/map/Leaflet.CountrySelect.js"></script>
/.....

Home.blade.php

  extends('layouts.app')
  @section('content')
  <style>
    .leatfet-container img{
      min-height: none;
      min-width:none;
   }

    </style>


    <div id="map" style="width:100%;height:700px"></div>
    <script>    
    var baseLayer = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',{attribution: 'Tiles &copy; CartoDB'});
    var map = L.map("map",{layers: [baseLayer], trackResize: false, center: [0.00, 0.00], zoom: 4});

    var select = L.countrySelect({exclude:"French Southern and Antarctic Lands"});

    select.addTo(map);

    select.on('change', function(e){
        if (e.feature === undefined){ //Do nothing on title
            return;
        }
            var country = L.geoJson(e.feature);
            if (this.previousCountry != null){
                map.removeLayer(this.previousCountry);
            }
            this.previousCountry = country;

            map.addLayer(country);
            map.fitBounds(country.getBounds());

        });
</script>

@foreach($articles as $article) 
<script>
var ltd = {{$article->longitude}};
var lng = {{$article->latitude}};

L.marker([ltd, lng]).addTo(map)
    .bindPopup("{{ $article->title }}").openPopup();
</script>
@endforeach
@endsection

I could check in this forum and checked answer like this:

Leaflet output is grey

However, if you check my code, you can see that I tried to resolve it, but it not working yet.

3
  • Which web browser(s) have you tested this with? – IvanSanchez May 7 '18 at 10:40
  • Smells like stackoverflow.com/questions/36246815/… – ghybs May 11 '18 at 0:43
  • I resolve the issue. The problem was, when you use Vue.js, you can not use <script></script> inside to div or section with id="app". I have to put out this markers or use VUe.js way for work with LeaFlet. – Miguel Herreros Cejas May 15 '18 at 8:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.