We shouldnt have to call redraw after setting the filter. That should be in the method implementation.

I want to build something similar to FSP maps. What is the fastest way to do database queries for different filters. For ex. filter banks, post offices e.t.c

When I run npm run watch, I get this error:

npm run watch

> [email protected] watch /Users/nick/code/Leaflet.MapboxVectorTile
> watchify -v -d src/MVTSource.js -o dist/Leaflet.MapboxVectorTile.js


events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: ENOTDIR, lstat '/Users/nick/code/Leaflet.MapboxVectorTile/node_modules/vector-tile/lib/vectortilelayer.js/package.json'

npm ERR! [email protected] watch: `watchify -v -d src/MVTSource.js -o dist/Leaflet.MapboxVectorTile.js`

But when I run the command as:

watchify -v -d src/MVTSource.js -o dist/Leaflet.MapboxVectorTile.js

All is well. Something is off with paths. Maybe in the Mapbox package???

Hi,

I'm trying to use maxNativeZoom (in order to overzoom the tiles at certain zoom levels, ideally so we don't have to generate huge amounts of vector tiles at the higher zoom levels), but it seems to not work for Leaflet.MapboxVectorTile. This breaks expected behavior for something inheriting from L.TileLayer, what would it take to implement this feature? Is there a reason it doesn't exist currently?

The actual points don't seem to be loading.

The node project is listed on npm (and in package.json) as under ISC license. The ISC license template contains:

Copyright (c) 4-digit year, Company or Person's Name

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

but the LICENSE file states in its place:

Copyright (c) 2014, Spatial Development International
All rights reserved.

Source code can be found at:
https://github.com/SpatialServer/Leaflet.MapboxVectorTile

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software including binary distrubutions.

Not a lawyer here, but these do not sound like the same thing.

I added continuous zoom to leaflet using this Leaflet/Leaflet#1941.

It changes tilesize to get tiles decimal zoom levels. Now, I changed the tilesize in _getTilePoint function to get the correct tile. But inside that tile featureAt still doesn't work correctly.

It's probably because of _canvasIDToFeatures not returning the correct features at decimal zoom levels.

Need help solving this. @apollolm @hallahan @rgwozdz

we have a method setZIndex for MVTSource that sets the z index for things, but this should also apply in the options object in the constructor. This is part of the standard Leaflet Tile Layer API.

This option should get the _id property from a feature by default. Being that this is part of the MVT spec, we should always have a unique id with that property.

I have a map that's being reloaded frequently and needs to persist data between instances. I can't seem to find any exposed method for selecting features as they're loaded. Is there any functionality like that somewhere in the library that I could access somehow? Or, if not, do you think it would be reasonably straightforward to add that functionality?

Hey all,

I'm struggling with how to handle points that straddle a tile boundary after adding a >1px radius. I think I understand what's going on here. The tile canvas that has the center of the point has no way to draw the complete point and there is no mechanism to inform adjacent tiles that they should draw the rest of the point (the part that bleeds over).

What's the thought on how to handle this? Any options besides smaller points?

Here's an example of how I'm hitting this, notice the points near the tile borders are cut off.

I see that the confetti example has this as well but just masks it with smaller points based on zoom...
https://github.com/SpatialServer/Leaflet.MapboxVectorTile/blob/master/examples/confetti.js#L71

Unfortunately I need larger points so am hoping to figure out a way to handle this. Curious if anyone has ideas on what to do here.

Thanks,
Rob

I have a local vector tile server based on tilesplash and use L.TileLayer.MVTSource to load the vector tile layer at the client side:

var map = L.map('map').setView([0, 0], 2);

var layer = new L.TileLayer.MVTSource({
    url: 'http://localhost:3000/my_layer/{z}/{x}/{y}.mvt'
})

map.addLayer(layer);

I notice that the L.TileLayer.MVTSource could send request with invalid x and y parameter:

• x or y smaller than 0

http://localhost:3000/my_layer/2/-1/1.mvt

• x or y larger than the available number based on the zoom level

http://localhost:3000/my_layer/2/4/2.mvt

Is it a bug, or just because of incorrect layer config?

There seems to be a projection issue with web mercator columns. We currently store all our geometries in both web mercator and census projections. When I make vector tiles from the census projection column, it doesn't seem to transform the geometry, at least in the queries I can see it running. When I try to make a vector tile layer from the web mercator column, nothing shows up in my preview. I don't get any errors. Zooming all the way out, I can't find the shapes somewhere else on the globe, so I'm not convinced it's just creating them in the wrong projection. Creating raster tiles from the web mercator column works just fine.

I stumbled across this event, which does exactly what I was looking for, by reading the source code (because it felt like it should exist, it seemed like a logical event to have). It would be useful if it were documented somewhere.

I can make a pull request for this if necessary, but I figured I'd open a ticket.

I don't know if I am doing something wrong but there doesn't seem to be support for lineJoin in the style. It would be really nice to have it, since it is supported in basic Leaflet (http://leafletjs.com/reference.html#path-linejoin).

I would like to get rid of these spiky things: http://jsfiddle.net/3dpdfeyh/

It could be a simple integration even with the class L.TileLayer.SVG exists in Leaflet 1.0
This thing should add support for SVG CSS

Tried this plugin with the leaflet 1.0.3 and got error that L.TileLayer.Canvas is undefined.

Hi All,

I'm having a few issues when trying to work with the onClick functionality. When clicking a feature, I am getting incorrect attribute information as well as messed up feature selections (see picture for what I mean by this. Seems to be selecting only part of the feature and then incorrect tiles as well).

For example, I have a countries layer pulled in but when clicking the United States it returns the properties for Cuba and when clicking on Canada it returns Bahamas. In some cases, it does not return a feature at all, as if there was no feature in that tile. What makes this even stranger is that after refreshing I'll get different results when clicking on the same tiles. Clicking the US will give me Honduras and clicking Canada will give me Mexico.

I would appreciate any insight anyone can give.

Thanks!

Edit: I have also tried this out with other point and polygon data sets as well as the data used in the samples and am having the same issues.

I am trying to achieve this

Pre render all mapbox vector files (.pbf) files using tilemaker https://github.com/systemed/tilemaker from planet OSM downloaded data and then serving them through apache server.

When i tried to use leaflet i see the error Unimplemented type: 4, Unimplemented type: 6 errors.

Any ideas, and also is there any GUI tool where i can open and check the PBF files.

There is a temporary workaround here:

Without this, a feature is potentially drawn to the wrong layer. This breaks the clearing of tiles and causes things to be double drawn.

It would be great if this library could read raw GeoJSON or TopoJSON files.

According to the Leaflet docs, the TileLayer.redraw() function is supposed to re-fetch the tiles, and re-draw them.

It appears that the MVTSource.redraw() function isn't actually re-fetching, but instead just passing through to the TileLayer.Canvas.redraw() call.

It could be that I'm not familiar enough with the code and missed something, but it looks like this means that the ajax call to re-request the tile gets stepped around, by passing off the TileLayer.Canvas too early? Is this an easy fix?

I need to access to the Mapillary vector tiles using Leaflet as they are shown in the Mapillary web site, for example

https://www.mapillary.com/app/?lat=44.90785153249567&lng=7.673778533935547&z=16

I've tried to use the Mapillary vector tiles API as documented here

http://blog.mapillary.com/update/2015/05/27/vectortiles.html

so using this request

https://d2munx5tg0hw47.cloudfront.net/tiles/{z}/{x}/{y}.mapbox

but I can see the vector tiles only for levels 0 - 14 not more, then I receive a 403 (Forbidden) error.

I've found in the Mapillary Forum (ref. mapbox/osm-navigation-map#48), that they are changing the url to access to the vector tiles.

The new url is the follow:

https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt

with these specifications

• Endpoint: http://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt
• Extent: 4096
• mapillary-sequences Layer (Type Line)
• mapillary-images Layer (Type Circle)

So I've tried to load this new vector tile layer in a simply Leaflet 0.7 map using this code

<html>
    <head>
        <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <title>Test Leaflet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
        <script src="http://rawgit.com/SpatialServer/Leaflet.MapboxVectorTile/master/dist/Leaflet.MapboxVectorTile.min.js"></script>

        <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>

  </head>
  <body>

    <div id="map">
      <script>

        // *** The base map ...
        var baseLayer = new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
            zIndex: 1,
            attribution: 'Map data: &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        });

        // *** The Mapillary vector tiles ...
        var config = {
          url: "https://d2munx5tg0hw47.cloudfront.net/tiles/{z}/{x}/{y}.mapbox",
          zIndex: 2,
            // *** Set the style fot Mapillary vector tiles: linestring ...
            style: function(feature) {
              var style = {};
              var selected = style.selected = {};
              var type = feature.type;
              switch (type) {
                case 1: //'Point'
                  // unselected
                  style.color = '#ff0000';
                  style.radius = 3;
                  // selected
                  selected.color = 'rgba(255,255,0,0.5)';
                  selected.radius = 5;
                  break;
                case 2: //'LineString'
                  // unselected
                  style.color = 'rgba(206,14,193,0.5)';
                  style.size = 2;
                  // selected
                  selected.color = 'rgba(0,255,0,0.0)';
                  selected.size = 3;
                  break;
                case 3: //'Polygon'
                  // unselected
                  style.color = 'rgba(149,139,255,0.4)';
                  style.outline = {
                    color: 'rgb(20,20,20)',
                    size: 2
                  };
                  // selected
                  selected.color = 'rgba(255,25,0,0.3)';
                  selected.outline = {
                    color: '#d9534f',
                    size: 3
                  };
              }
                return style;
              }
        };




                // *** The New Mapillary vector tiles ...
                var configNew = {
                    url: "http://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt",
                    zIndex: 3,
                    "minzoom": 2,
                    "maxzoom": 18,
                    // *** Set the style fot Mapillary vector tiles: linestring ...
                    style: function(feature) {
                        var style = {};
                        var selected = style.selected = {};
                        var type = feature.type;
                        switch (type) {
                            case 1: //'Point'
                                // unselected
                                style.color = '#ff0000';
                                style.radius = 3;
                                // selected
                                selected.color = 'rgba(255,255,0,0.5)';
                                selected.radius = 5;
                                break;
                            case 2: //'LineString'
                                // unselected
                                style.color = 'rgba(0,0,255,0.5)';
                                style.size = 2;
                                // selected
                                selected.color = 'rgba(0,255,0,0.0)';
                                selected.size = 3;
                                break;
                            case 3: //'Polygon'
                                // unselected
                                style.color = 'rgba(149,139,255,0.4)';
                                style.outline = {
                                    color: 'rgb(20,20,20)',
                                    size: 2
                                };
                                // selected
                                selected.color = 'rgba(255,25,0,0.3)';
                                selected.outline = {
                                    color: '#d9534f',
                                    size: 3
                                };
                        }
                        return style;
                  }
              };



        // *** Add the layers to the map ...
        var mapillarySequences = new L.TileLayer.MVTSource(config);

                // *** Add the new layers to the map ...
              var mapillarySequencesNew = new L.TileLayer.MVTSource(configNew);


        var map = L.map('map', {
                                 center: [12.2, 22.9],
                                 zoom: 2,
                                 autoZIndex: false,
                                 layers: [baseLayer, mapillarySequences, mapillarySequencesNew]
                               });

        // *** Configure the layers for the Control Layers widget ...
        var baseMaps = {
            "Basemap": baseLayer
        };
        var overlayMaps = {
            "Mapillary Sequences": mapillarySequences,
                        "Mapillary New Sequences": mapillarySequencesNew
        };

        // *** Add the Control Layers to the map ...
        L.control.layers(baseMaps, overlayMaps).addTo(map);


      </script>
    </div>

  </body>
</html>

You can view the map at this link

http://www.cesaregerbino.com/Mapillary/VectorTilesTest/testLeaflet.html

In the map there are both the "old" mapillary vector tiles (purple lines), and the "new" mapillary vector tiles.

It's working fine but unfortunately if you try to zoom in at more details nothing is mapped.

Searching on the web I've found this link

http://mapbox.github.io/osm-navigation-map/#6.09/44.391/8.984

that seems working fine as I'd like, so I've tried to replicate it and I've done it, here you are the code

<html>
<head>
    <meta charset='utf-8' />
    <title>Test MapBox</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.22.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.22.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
  <div id='map'></div>
  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiY2VzYXJlIiwiYSI6Im1LdmxtRU0ifQ.uoGK9BB9eywCPknCRlB9JA';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/light-v9',
        center: [-105.2, 44.6],
        zoom: 3.5,
        hash: true,
        attributionControl: false
    });

    map.addControl(new mapboxgl.Navigation({
        position: 'top-right'
    }));

    map.on('style.load', function(e) {
        init();
        toggleMapillary();
    });

    function init() {
        // do all initialisation stuff here

        var mapillaryCoverage = {
            "type": "vector",
            "tiles": [
                "http://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt"
            ],
            "minzoom": 2,
            "maxzoom": 16
        };

       map.addSource("mapillaryCoverage", mapillaryCoverage);

       var mapillaryCoverageLine = {
           "id": "mapillaryCoverageLine",
           "type": "line",
           "source": "mapillaryCoverage",
           "source-layer": "mapillary-sequences",
           "layout": {
               "visibility": "none"
           },
           "paint": {
               "line-color": '#2e870a',
               "line-width": {
                   "stops": [
                       [8, 1],
                       [15, 3]
                   ]
               },
               "line-opacity": {
                   "stops": [
                       [8, 0.2],
                       [17, 1]
                   ]
               }
           }
       };

     map.addLayer(mapillaryCoverageLine, 'noturn');

    };

    function toggleMapillary() {
        var mapillaryLayers = ['mapillaryCoverageLine'];

        mapillaryLayers.forEach(function(id) {
            var currentState = map.getLayoutProperty(id, 'visibility');
            var nextState = currentState === 'none' ? 'visible' : 'none';
            map.setLayoutProperty(id, 'visibility', nextState);
        });
    }

  </script>

</body>
</html>

You can view the map at this link

http://www.cesaregerbino.com/Mapillary/VectorTilesTest/testMapBox.html#8.71/44.5084/8.5412

In this map there is only the "new" mapillary vector tiles layer.

It's working fine too but unfortunately if you try to zoom out at less details nothing is mapped.

So it seems that the new mapillary vector tiles behaviour it's different if I use it in a Leaflet map or in a MapBox map.

I'd like to use it in a Leaflet (0.7) map but I need to see on the map the layer also when I'm in detailed map (zoom in ...).

Any link / suggestion / example?! Thank you a lot in advance!!

Cesare

P.S
I've opened a question here (with a little bounty ...), http://gis.stackexchange.com/questions/207105/how-to-access-to-mapillary-vector-tiles-to-show-all-levels-0-16 if you're interested ... :-)

Right now, you are allowed to have style.selected = { color: "foo", size: 5 }.
You should be able to use the same properties for polylines and points as well.

(Currently you have to use style.selected.lineWidth and style.selected.strokeStyle.

...so it's possible to tap into the features before they draw.

Test case is the following:

var mvtSource = new L.TileLayer.MVTSource({...})
map.addLayer(mvtSource)
map.removeLayer(mvtSource)

This code results in a JS error in L.TileLayer.bringToFront() method.

Here is online demo: http://aparshin.ru/temp/mvt_bug.html

Looks like the reason is that you are trying to do some actions when previously requested vector tile is received for already removed layer.

How can I add a popup to a feature containing feature name and id?

Starting from zoom level 19 we get the following error:

typeof this._tiles[canvasId] === 'undefined'

The _tiles object inside the clearTile method starting from zoomlevel 19 seems to be empty. When I check the network traffic our geoserver still sends pbf data with information.

Is there a way ( or is it in the plan to be implemented ) a way to have onhover events on a layer ( to show for example a districts name on hover ) ?

I saw something somewhat related to this here: #10 (comment) Does it mean that it would be too slow/resource intensive to implement ?

The latest version in git tag is 0.1.7
But the latest version in npm is 0.1.6
Maybe should update the npm version
Thanks

cdnjs/cdnjs#6746

Hi,

I'm new to vector tiles and I was wondering what the format and structure that 'MapboxVectorTile' expect and support.

Can I point to a vector .mbtiles ? or do I need to point to a .pbf file ? or a folder with sub-folders containing the .pbf files ? Or this need to be hooked with a server that serve the tiles ?

Thanks

I tried a small, naive change to add raster icons (using the L.icon class), but I see this weird effect where raster icons sometimes appear, and sometimes don't:

http://ec2-54-198-8-124.compute-1.amazonaws.com/testpage/

Zooming in and out results in different raster icon instances showing up each time. If I have both icons and normal point styling, then the point styling always shows up, in contrast to the icons.

I was wondering if anyone had any ideas, or suggestions for an approach to debug this?

The diff is simply this:

--- a/src/StaticLabel/StaticLabel.js
+++ b/src/StaticLabel/StaticLabel.js
@@ -26,11 +26,22 @@ function StaticLabel(mvtFeature, ctx, latLng, style) {
 function init(self, mvtFeature, ctx, latLng, style) {
   var ajaxData = mvtFeature.ajaxData;
   var sty = self.style = style.staticLabel(mvtFeature, ajaxData);
-  var icon = self.icon = L.divIcon({
-    className: sty.cssClass || 'label-icon-text',
-    html: sty.html,
-    iconSize: sty.iconSize || [50,50]
-  });
+
+  var icon;
+  if (sty.iconUrl) {
+    icon = self.icon = L.icon({
+      className: sty.cssClass || 'label-icon-text',
+      html: sty.html,
+      iconUrl: sty.iconUrl,
+      iconSize: sty.iconSize || [50,50]
+    });
+  } else {
+    icon = self.icon = L.divIcon({
+      className: sty.cssClass || 'label-icon-text',
+      html: sty.html,
+      iconSize: sty.iconSize || [50,50]
+    });
+  }

I get the following error on tiles that fail:

typeof this._tiles[canvasId] === 'undefined'

I haven't dived too far into the source code, but I suspect there's a race condition here. I think the tile isn't downloaded by the time it tries loading it and as a result, it fails to load the geometry. Any way to ensure the tile is downloaded before a render event happens?

EDIT: To ensure this wasn't a data problem, I used MapBox GL JS with the same tile service and it was able to load the geometry properly for all tiles.

If you return to a zoom that you had the map at previously, the vector tiles do not redraw.

I'm interested in rendering MVT from TileStache Vector provider:
http://tilestache.org/doc/TileStache.Goodies.VecTiles.mvt.html

However, I'm getting the Error('Unimplemented type: ' + type) for type 3, 4, 6, 7

Should I assume these are same types as those listed here, double, int64, etc?
https://github.com/mapbox/vector-tile-spec/blob/master/1.0.1/vector_tile.proto

I'm not sure about that, because the JS source code has:
Protobuf.Int32 = 5;
but the mvt spec:
optional uint64 uint_value = 5;

So, these must be different?

What seems to be the problem, do you have any suggestions on what I should do?

@rgwozdz I am trying to display around a million points dynamically generated from a postgis table on the map. The initial rendering times and animations work fine. But, after zooming in and out a few times it becomes extremely slow and eventually the tab crashes. What can be a solution for this?

I understand the mapbox vector tile layer reads pbf files. Why not generate them on-the-fly? https://www.mapbox.com/blog/introducing-geojson-vt/

How can I update the style of a layer or any other attribute like onclick without actually having to remove the layer and adding it again?

Like mapbox is there any ready to use style sheet for leaflet

We need a setStyle to put in a new style function and redraw

Hi, I could not find any example for drawing road labels. I tried modifying the india-label example -

    if (feature.layer.name === 'addresspoint') {
      console.log('Found layer = ' + feature.layer.name);
      style.staticLabel = function() {
        var style = {
          html: feature.properties.BLDG_NUM,
          iconSize: [33,33],
          cssClass: 'label-icon-text'
        };
        return style;
      };
    }

    if (feature.layer.name === 'roadlabel') {
      console.log('Found layer = ' + feature.layer.name);
      style.staticLabel = function() {
        var style = {
          html: feature.properties.NAME,
          iconSize: [33,33],
          cssClass: 'label-icon-text'
        };
        return style;
      };
    }

The addresspoints get displayed correctly, because they are of the type Point.

But the roadlabels being of type LineString do not get displayed. I face the same problem with labels of type Polygon.

So how do I show labels other than Point type?

I want to make a feauture selectable but not unselectable until other selected.
so i have a var named oldFeauture and in my onClick funtion i do this:

          onClick: function(e) {
           if(oldFeauture && e.feature.selected === true){
            oldFeauture.toggleEnabled =true
           }
           if(e.feature.selected === true){
            oldFeauture = e.feature
            e.feature.toggleEnabled =false
          }
          }

But some zoom levels later i change the data (the previous are no longer appear on map)
so when i click on this new feautures the feauture is null.
Why is that? Is there any other way to solve this?

And another mini question... can i somehow change style on hover?

We have an interface that has a map and a grid displaying feature data in a tabular form. As the dataset is relatively small the grid contains data for all features. The initial map view displays all features also.
We have a requirement to be able to select a row in the grid and highlight the feature on the map. This works fine if the the feature is currently drawn on screen but fails if the map view is changed so that the feature is no longer visible. The MVTFeature exists but has no canvas. The code I'm using looks like this:

    onGridSegmentSelect: function (panel, record, index) {
        var gid = record.getId(),
            layerId = Object.keys(this.vectorTileLayer.layers)[0],
            feature = this.vectorTileLayer.layers[layerId].features[gid];

        try {
            feature.select();
        } catch (e) {}

        this.map.panTo(record.get('mid_point'));
    },

If the feature is in view the feature is selected and the map pans to center on the feature. If it's not visible selection fails but because the feature has been marked as selected when the layer is re-drawn after the pan action it's drawn correctly with the selected style.

Using a try/catch block seems like a poor workaround. Is there a better way of doing this?

I can't seem to make tiles from tables that are not in the public schema. If I add the schema in settings.js, the tables will show up in my table listing, and I can see the detail page about the table. But when I click on the dynamic map or vector tile service link for that table, I get an error "There was an error with the web service. Please try your operation again." The output from the server is pasted below.

---------------------- Output when I have the table in another schema----------------------------

Executing query: select column_name, CASE when data_type = 'USER-DEFINED' THEN udt_name ELSE data_type end as data_type from INFORMATION_SCHEMA.COLUMNS where table_name = $1, granularity_geometries_13
Executing query: select ST_SRID("geometry") as SRID FROM "granularity_geometries_13" LIMIT 1;
GET /services/tables/granularity_geometries_13 304 66ms
GET /img/logo.png 304 2ms
GET /stylesheets/layout.js 304 3ms
GET /fonts/fonts.css 304 5ms
GET /stylesheets/style.css 304 7ms
GET /img/sdlogo.jpg 304 6ms
Executing query: select column_name from INFORMATION_SCHEMA.COLUMNS where (data_type = 'USER-DEFINED' AND udt_name = 'geometry') AND table_name = $1, granularity_geometries_13
Executing query: SELECT ST_Extent(geometry) as table_extent FROM "granularity_geometries_13";
TypeError: /opt/emp_eng/PGRestAPI/endpoints/tables/views/table_vector_tiles.jade:98
96|
97| pre.codePreview

98| | #{featureCollection[0].link}/{z}/{x}/{y}.pbf;
99|
100| div.helpLink
101| | Get more help with

Cannot read property '0' of undefined
at eval (eval at (/opt/emp_eng/PGRestAPI/node_modules/jade/lib/jade.js:152:8), :799:60)
at /opt/emp_eng/PGRestAPI/node_modules/jade/lib/jade.js:153:35
at Object.exports.render (/opt/emp_eng/PGRestAPI/node_modules/jade/lib/jade.js:197:10)
at Object.exports.renderFile (/opt/emp_eng/PGRestAPI/node_modules/jade/lib/jade.js:233:18)
at View.exports.renderFile as engine
at View.render (/opt/emp_eng/PGRestAPI/node_modules/express/lib/view.js:76:8)
at Function.app.render (/opt/emp_eng/PGRestAPI/node_modules/express/lib/application.js:505:10)
at ServerResponse.res.render (/opt/emp_eng/PGRestAPI/node_modules/express/lib/response.js:756:7)
at Object.common.respond (/opt/emp_eng/PGRestAPI/common.js:31:13)
at Function. (/opt/emp_eng/PGRestAPI/endpoints/tables/index.js:1193:14)
/opt/emp_eng/PGRestAPI/endpoints/tables/views/table_vector_tiles.jade:98
96|
97| pre.codePreview

98| | #{featureCollection[0].link}/{z}/{x}/{y}.pbf;
99|
100| div.helpLink
101| | Get more help with

Cannot read property '0' of undefined
There was an error with the web servcice. Please try your operation again.
GET /services/tables/granularity_geometries_13/geometry/vector-tiles 500 51ms - 73b
GET /services/tables/ee_districts_districtshape 200 50ms - 4.52kb
GET /stylesheets/layout.js 304 2ms
GET /img/logo.png 304 2ms
GET /fonts/fonts.css 304 9ms
GET /stylesheets/style.css 304 11ms
GET /img/sdlogo.jpg 304 1ms

If more than one polygon exists for a unique feature in a given tile, the parseVectorTileLayer method will end up overwriting the existing references to that feature, and add a copy of itself to the features list for that tile.

For example, the islands off the coast of California should be visible; Instead the last California
polygon in the list of polygons for that tile was effectively duplicated.

Here's the decoded json of the tile for reference. I used Tilestache to generate the tiles, and Mapzen's mapbox vector tile library to encode them.

{
  "states": [
    {
      "geometry": [
        [
          4096,
          2231
        ],
        [
          3532,
          2232
        ],
        [
          3534,
          4096
        ],
        [
          4096,
          4096
        ],
        [
          4096,
          2231
        ]
      ],
      "properties": {
        "label": "Utah"
      },
      "id": 24
    },
    {
      "geometry": [
        [
          3898,
          0
        ],
        [
          3252,
          240
        ],
        [
          3294,
          342
        ],
        [
          3355,
          346
        ],
        [
          3379,
          386
        ],
        [
          3362,
          464
        ],
        [
          3308,
          467
        ],
        [
          3292,
          491
        ],
        [
          3305,
          565
        ],
        [
          3283,
          584
        ],
        [
          3285,
          629
        ],
        [
          3358,
          693
        ],
        [
          3354,
          861
        ],
        [
          3396,
          931
        ],
        [
          3502,
          1005
        ],
        [
          3485,
          1043
        ],
        [
          3409,
          1091
        ],
        [
          3378,
          1203
        ],
        [
          3318,
          1275
        ],
        [
          3314,
          1376
        ],
        [
          3342,
          1413
        ],
        [
          3302,
          1554
        ],
        [
          3290,
          1691
        ],
        [
          3308,
          1720
        ],
        [
          3274,
          1818
        ],
        [
          3319,
          1843
        ],
        [
          3406,
          1842
        ],
        [
          3457,
          1787
        ],
        [
          3494,
          1790
        ],
        [
          3533,
          1866
        ],
        [
          3532,
          2232
        ],
        [
          4096,
          2231
        ],
        [
          4096,
          0
        ],
        [
          3898,
          0
        ]
      ],
      "properties": {
        "label": "Arizona"
      },
      "id": 1
    },
    {
      "geometry": [
        [
          3532,
          2232
        ],
        [
          3533,
          1866
        ],
        [
          3494,
          1790
        ],
        [
          3457,
          1787
        ],
        [
          3406,
          1842
        ],
        [
          3319,
          1843
        ],
        [
          3274,
          1818
        ],
        [
          3308,
          1720
        ],
        [
          3290,
          1691
        ],
        [
          3302,
          1554
        ],
        [
          3342,
          1413
        ],
        [
          3314,
          1376
        ],
        [
          3322,
          1332
        ],
        [
          2275,
          2332
        ],
        [
          1364,
          3155
        ],
        [
          1365,
          4096
        ],
        [
          3534,
          4096
        ],
        [
          3532,
          2232
        ]
      ],
      "properties": {
        "label": "Nevada"
      },
      "id": 19
    },
    {
      "geometry": [
        [
          1231,
          923
        ],
        [
          1253,
          899
        ],
        [
          1201,
          904
        ],
        [
          1231,
          923
        ]
      ],
      "properties": {
        "label": "California"
      },
      "id": 35
    },
    {
      "geometry": [
        [
          1964,
          375
        ],
        [
          1909,
          389
        ],
        [
          1871,
          467
        ],
        [
          1964,
          375
        ]
      ],
      "properties": {
        "label": "California"
      },
      "id": 35
    },
    {
      "geometry": [
        [
          1519,
          574
        ],
        [
          1571,
          551
        ],
        [
          1530,
          554
        ],
        [
          1519,
          574
        ]
      ],
      "properties": {
        "label": "California"
      },
      "id": 35
    },
    {
      "geometry": [
        [
          1958,
          631
        ],
        [
          1982,
          588
        ],
        [
          1924,
          595
        ],
        [
          1915,
          635
        ],
        [
          1873,
          661
        ],
        [
          1958,
          631
        ]
      ],
      "properties": {
        "label": "California"
      },
      "id": 35
    },
    {
      "geometry": [
        [
          1376,
          864
        ],
        [
          1323,
          843
        ],
        [
          1274,
          890
        ],
        [
          1349,
          905
        ],
        [
          1376,
          864
        ]
      ],
      "properties": {
        "label": "California"
      },
      "id": 35
    },
    {
      "geometry": [
        [
          1390,
          916
        ],
        [
          1497,
          895
        ],
        [
          1539,
          904
        ],
        [
          1431,
          872
        ],
        [
          1390,
          916
        ]
      ],
      "properties": {
        "label": "California"
      },
      "id": 35
    },
    {
      "geometry": [
        [
          1364,
          3155
        ],
        [
          2275,
          2332
        ],
        [
          3322,
          1332
        ],
        [
          3318,
          1275
        ],
        [
          3378,
          1203
        ],
        [
          3409,
          1091
        ],
        [
          3485,
          1043
        ],
        [
          3502,
          1005
        ],
        [
          3396,
          931
        ],
        [
          3354,
          861
        ],
        [
          3358,
          693
        ],
        [
          3285,
          629
        ],
        [
          3305,
          565
        ],
        [
          3292,
          491
        ],
        [
          3379,
          441
        ],
        [
          3355,
          346
        ],
        [
          2412,
          251
        ],
        [
          2396,
          311
        ],
        [
          2368,
          309
        ],
        [
          2338,
          506
        ],
        [
          2286,
          582
        ],
        [
          2045,
          781
        ],
        [
          1995,
          760
        ],
        [
          1943,
          776
        ],
        [
          1951,
          819
        ],
        [
          1904,
          901
        ],
        [
          1799,
          889
        ],
        [
          1682,
          934
        ],
        [
          1627,
          1007
        ],
        [
          1524,
          1072
        ],
        [
          1409,
          1069
        ],
        [
          1313,
          1098
        ],
        [
          1200,
          1084
        ],
        [
          1133,
          1137
        ],
        [
          1130,
          1393
        ],
        [
          1053,
          1423
        ],
        [
          1043,
          1523
        ],
        [
          896,
          1628
        ],
        [
          818,
          1779
        ],
        [
          672,
          1917
        ],
        [
          644,
          2041
        ],
        [
          704,
          2087
        ],
        [
          714,
          2142
        ],
        [
          687,
          2200
        ],
        [
          662,
          2221
        ],
        [
          587,
          2217
        ],
        [
          489,
          2321
        ],
        [
          491,
          2395
        ],
        [
          447,
          2477
        ],
        [
          447,
          2597
        ],
        [
          325,
          2698
        ],
        [
          264,
          2688
        ],
        [
          291,
          2762
        ],
        [
          281,
          2814
        ],
        [
          8,
          3118
        ],
        [
          0,
          4096
        ],
        [
          1365,
          4096
        ],
        [
          1364,
          3155
        ]
      ],
      "properties": {
        "label": "California"
      },
      "id": 35
    }
  ]
}

Why won't it work? Maybe we should switch to something else? Testling local works fine...

do y'all have plans to refactor this plugin to extend GridLayer (instead of TileLayer.Canvas) for compatibility w/ Leaflet 1.x?

I wonder if there is a workaround (IE9, cross-domain failure).

I tried XDomainRequest on IE9, but no luck. Not sure if responeType being 'arraybuffer' adds more difficulty on the request or not.

IE10, 11 both work fine.

When I try to get bbox of feature, it gives me an error saying 'Cannot set property 'pos' of undefined'. So, how can I zoom and pan to feature onclick?

To support users that want to import this library into their projects via bower, please add a tag to this repo with the current version. Once that is complete, I'll update the bower.json file and register with bower.