search

Leaflet / Leaflet.VectorGrid

Display gridded vector data (sliced GeoJSON or protobuf vector tiles) in Leaflet 1.0.0
598 stars 194 forks source link

Uncaught TypeError: Cannot read property 'slicer' of undefined #150

Closed soli004 closed 6 years ago

soli004 commented 6 years ago

I have this issue when using Leaflet.draw together with Leaflet.VectorGrid.

Everything works fine except when I put in this into index.html as a test for using VectorGrid I get this error "Uncaught TypeError: Cannot read property 'slicer' of undefined". How to solve this?

` var geojson = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"Name":"test","Number":2.25,"Size":45},"geometry":{"type":"Point","coordinates":[59.5,14.5]}}]}

var canvasTile =L.vectorGrid.slicer(geojson,{
                interactive: true,
                rendererFactory: L.canvas.tile,
                vectorTileLayerStyles:{
                    sliced:{ icon: new L.Icon.Default()}
                }
                }).addTo(map);
    canvasTile.on('click', function(e) {
                    var pro = e.layer.properties;
                    var HTML = '';
                    for (var q in pro) {
                        HTML += q + ":" + pro[q] + '<br />';
                    }
                    L.popup()
                        .setContent(HTML)
                        .setLatLng(e.latlng)
                        .openOn(map);

                })`
soli004 commented 6 years ago

This is the index file

` <!DOCTYPE html>

Test Leaflet
`
soli004 commented 6 years ago

printscreen 2018-03-10 kl 08 47 45 printscreen 2018-03-10 kl 08 47 16

manuamador commented 6 years ago

GeoJSON may be a protected name. Have you tried to rename your var ?

JamesLMilner commented 6 years ago

I would firstly recommend adding a head and body block to your HTML and moving all of your script tags to the end of the block, making sure Leaflet is loaded in first. It also looks like perhaps you load in another Leaflet by accident via <script src="libs/leaflet-src.js"></script>.

soli004 commented 6 years ago

Finally got it fixed... :)

tomchadwin commented 6 years ago

How? It will help others if you can give more details.

soli004 commented 6 years ago

Actually the issue went away when I removed the second leaflet as JamesMilnerUK suggested and I also did not use GeoJson as manuamador comment on. I did also remove awesome fonts scripts as a start, tried to remove as much as I could and start build up from there. This is the changes for the vector grid part...

`var new_polygon = new L.layerGroup();

$.getJSON("../data/area.geojson", function(json) {

var vectorGrid =  L.vectorGrid.slicer(json, {
                  maxZoom: 20,
                  rendererFactory: L.svg.tile,
                  vectorTileLayerStyles: {
                      sliced: {
                      weight: 4,
                      color: 'black',
                      opacity: 0.8,
                      fill: true,
                      stroke: true,
                      fillOpacity: 0

                      } 
                     },
                     interactive: true,
                   }) 

 .on('click', function(e) {
  var properties = e.layer.properties;
  L.popup()
    .setContent(
      "<b>Name</b>: " + properties.name + 
      "<br><b>Sum</b>: " + properties.sum + " st" +
      "<br><b>AreaID</b>: " + properties.areaID)
    .setLatLng(e.latlng)
    .openOn(map);
                    })
vectorGrid.addTo(new_polygon)

            }) `