L.vectorGrid.protobuf plugin

[josejachuf]

Browsers Tested

• [x] Chrome
• [x] Firefox
• [ ] Edge
• [ ] Safari 9
• [ ] Safari 8
• [ ] IE 11

Versions

• Leaflet: v1.7.1
• Vue2Leaflet: 2.6.0

Hi, someone uses plugin [1]

Today I consult this with the author of the plugin, but it seems to me that it can be on the Vue-Leaflet side.

I have a vector-tile server from my own layer. As an example when I use it directly with Leaflet, it works fine. That is:

<div id="mapid" style="width: 100%; height: 800px;"></div>
<script>

  var mymap = L.map('mapid').setView([-32,-64], 8);

  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 18,
  id: 'mapbox/streets-v11',
  tileSize: 512,
  zoomOffset: -1
  }).addTo(mymap);

  var vectorTileOptions = {
    vectorTileLayerStyles: {
      puntos: {
        color: "#666666",
        weight: 2,
        fillColor: "#ffb407",
        opacity: 1,
        fillOpacity: 0.4,
        fill: true
      }      
    },
    minZoom: 8,
    maxZoom: 18,
    interactive: true,
  };
  var pbfLayer = L.vectorGrid.protobuf("{{=url('app.tiles')}}/{z}/{x}/{y}.pbf",
                                       vectorTileOptions
                                       ).addTo(mymap);
</script>

As I said, the above works fine, but when I use the plugin in my project with Vue (quasar) it has a failure.

<l-protobuf
  :options="vectorTileOptions"
  :visible="true"
  url="http://127.0.0.1:8009/tiles/{z}/{y}/{x}.pbf"
  name="PointsVTL"
  layerType="overlay"
/>

import {
  LMap,
  LControlLayers,
  LControl,
  // LControlAttribution,
  LTileLayer,
  // LWMSTileLayer,
  // LPolygon,
  LGeoJson,
  LImageOverlay,
  LMarker,
  LPopup
} from 'vue2-leaflet'
import { CRS, latLng, Icon } from 'leaflet'
import 'leaflet/dist/leaflet.css'
import LProtobuf from 'vue2-leaflet-vectorgrid'

vectorTileOptions: {
  vectorTileLayerStyles: {
    puntos: {
      color: '#666666',
      weight: 2,
      fillColor: '#ffb407',
      opacity: 1,
      fillOpacity: 0.4,
      fill: true
    }
  },
  minZoom: 8,
  maxZoom: 18,
  interactive: true
}

1. The layer is not added to the control-layer
2. I do not see the points layer on the map
3. Apparently the layer if it was added to the map, because I see that it continuously makes the server requests
4. No error is produced or shows error messages

Any ideas?

Jose

[1] https://github.com/tesselo/vue2-leaflet-vectorgrid

[josejachuf]

Here was an error: yx/xy

<l-protobuf
  :options="vectorTileOptions"
  :visible="true"
  url="http://127.0.0.1:8009/tiles/{z}/{y}/{x}.pbf"
  name="PointsVTL"
  layerType="overlay"
/>

url="http://127.0.0.1:8009/tiles/{z}/{y}/{x}.pbf" change for url="http://127.0.0.1:8009/tiles/{z}/{x}/{y}.pbf"

Now I can see the points, but it still fails to:

1. The layer is not added to the control-layer
2. The layer is below all other layers and you have to turn off the base layers to see it, but the layers are sorted correctly

Jose

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.