Gray screen with Leaflet 1.3.1

Question

Gray screen with Leaflet 1.3.1

Navigation

#1 by (0 votes)

0

I'm using Leaflet 1.3.1, to show a map on a blog made with Laravel and Vue.js

But the screen appears in gray. Although the markers, and the controls do appear.

And when I click on Inspect Elements, and I go to the layer, I see that it loads the .png of the world map. That is, by clicking on them, the Tile or Png of that particular square of the map will mutate.

This is my code:

layout / app.blade.php

  ..../
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/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

javascript laravel leaflet

asked by Miguel Herreros Cejas 04.05.2018 в 12:33

source

1 answer

Open a layout for registration Excel file generated in php and mysql does not open?

score 0 · Answer 1

I found the solution, I think. When you use vue.js, you can not use < script > inside to #app. I have to use the map by Vue.js way. It is a example:

 new Vue({
   el: '#app',
   data: {
   map: null,
   tileLayer: null,
   layers: [
  {
    id: 0,
    name: 'Restaurants',
    active: false,
    features: [
      {
        id: 0,
        name: 'Bogart\'s Smokehouse',
        type: 'marker',
        coords: [38.6109607, -90.2050322],
      },

  {
    id: 1,
    name: 'City/County Boundaries',
    active: false,
    features: [
      {
        id: 0,
        name: 'City of St. Louis',
        type: 'polygon',
        coords: [
          [38.770547, -90.168056],

        ],
      },
      },
    ],
  }
],
 },
 mounted() {
  this.initMap();
  this.initLayers();
  },
  methods: {
layerChanged(layerId, active) {
  const layer = this.layers.find(layer => layer.id === layerId);

  layer.features.forEach((feature) => {
    if (active) {
      feature.leafletObject.addTo(this.map);
    } else {
      feature.leafletObject.removeFrom(this.map);
    }
  });
},
initLayers() {
  this.layers.forEach((layer) => {
    const markerFeatures = layer.features.filter(feature => feature.type     === 'marker');
    const polygonFeatures = layer.features.filter(feature => feature.type === 'polygon');

    markerFeatures.forEach((feature) => {
      feature.leafletObject = L.marker(feature.coords)
        .bindPopup(feature.name);
    });

    polygonFeatures.forEach((feature) => {
      feature.leafletObject = L.polygon(feature.coords)
        .bindPopup(feature.name);
    });
  });
},
initMap() {
  this.map = L.map('map').setView([38.63, -90.23], 12);
  this.tileLayer = L.tileLayer(
    'https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}.png',
    {
      maxZoom: 18,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>',
    }
  );

  this.tileLayer.addTo(this.map);
},
 },
});