Map labels not showing

[rklerck]

Sorry to keep firing questions, but this one is kinda essential. Did your labels show on the map? I have label layers in my style and glyphs configured correctly, but they are never shown... It looks like the layers aren't loaded from the tile.

It appears to go wrong because the layer isn't inside the bucket, so this won't return a layer for the symbol:

Inside: drawLayerSymbols
var bucket = tile.getBucket(layer);

This is the data (without raw data) returned from the database:

{  
   "rawTileData":"",
   "buckets":[  
      {  
         "zoom":6,
         "layerIds":[  
            "landuse-residential0"
         ],
         "arrays":{  
            "layoutVertexArray":{  
               "length":190,
               "arrayBuffer":{  

               }
            },
            "elementArray":{  
               "length":157,
               "arrayBuffer":{  

               }
            },
            "elementArray2":{  
               "length":190,
               "arrayBuffer":{  

               }
            },
            "paintVertexArrays":{  

            },
            "segments":[  
               {  
                  "vertexOffset":0,
                  "primitiveOffset":0,
                  "vertexLength":190,
                  "primitiveLength":157
               }
            ],
            "segments2":[  
               {  
                  "vertexOffset":0,
                  "primitiveOffset":0,
                  "vertexLength":190,
                  "primitiveLength":190
               }
            ]
         }
      },
      {  
         "zoom":6,
         "layerIds":[  
            "park0"
         ],
         "arrays":{  
            "layoutVertexArray":{  
               "length":844,
               "arrayBuffer":{  

               }
            },
            "elementArray":{  
               "length":758,
               "arrayBuffer":{  

               }
            },
            "elementArray2":{  
               "length":844,
               "arrayBuffer":{  

               }
            },
            "paintVertexArrays":{  

            },
            "segments":[  
               {  
                  "vertexOffset":0,
                  "primitiveOffset":0,
                  "vertexLength":844,
                  "primitiveLength":758
               }
            ],
            "segments2":[  
               {  
                  "vertexOffset":0,
                  "primitiveOffset":0,
                  "vertexLength":844,
                  "primitiveLength":844
               }
            ]
         }
      },
      {  
         "zoom":6,
         "layerIds":[  
            "park_outline0"
         ],
         "arrays":{  
            "layoutVertexArray":{  
               "length":1828,
               "arrayBuffer":{  

               }
            },
            "elementArray":{  
               "length":1746,
               "arrayBuffer":{  

               }
            },
            "paintVertexArrays":{  

            },
            "segments":[  
               {  
                  "vertexOffset":0,
                  "primitiveOffset":0,
                  "vertexLength":1828,
                  "primitiveLength":1746
               }
            ],
            "segments2":[  

            ]
         }
      },
      {  
         "zoom":6,
         "layerIds":[  
            "water0"
         ],
         "arrays":{  
            "layoutVertexArray":{  
               "length":1293,
               "arrayBuffer":{  

               }
            },
            "elementArray":{  
               "length":1188,
               "arrayBuffer":{  

               }
            },
            "elementArray2":{  
               "length":1293,
               "arrayBuffer":{  

               }
            },
            "paintVertexArrays":{  

            },
            "segments":[  
               {  
                  "vertexOffset":0,
                  "primitiveOffset":0,
                  "vertexLength":1293,
                  "primitiveLength":1188
               }
            ],
            "segments2":[  
               {  
                  "vertexOffset":0,
                  "primitiveOffset":0,
                  "vertexLength":1293,
                  "primitiveLength":1293
               }
            ]
         }
      },
      {  
         "zoom":6,
         "layerIds":[  
            "waterway0"
         ],
         "arrays":{  
            "layoutVertexArray":{  
               "length":454,
               "arrayBuffer":{  

               }
            },
            "elementArray":{  
               "length":432,
               "arrayBuffer":{  

               }
            },
            "paintVertexArrays":{  

            },
            "segments":[  
               {  
                  "vertexOffset":0,
                  "primitiveOffset":0,
                  "vertexLength":454,
                  "primitiveLength":432
               }
            ],
            "segments2":[  

            ]
         }
      },
      {  
         "zoom":6,
         "layerIds":[  
            "road_trunk_primary0"
         ],
         "arrays":{  
            "layoutVertexArray":{  
               "length":2443,
               "arrayBuffer":{  

               }
            },
            "elementArray":{  
               "length":2095,
               "arrayBuffer":{  

               }
            },
            "paintVertexArrays":{  

            },
            "segments":[  
               {  
                  "vertexOffset":0,
                  "primitiveOffset":0,
                  "vertexLength":2443,
                  "primitiveLength":2095
               }
            ],
            "segments2":[  

            ]
         }
      },
      {  
         "zoom":6,
         "layerIds":[  
            "road_major_motorway0"
         ],
         "arrays":{  
            "layoutVertexArray":{  
               "length":562,
               "arrayBuffer":{  

               }
            },
            "elementArray":{  
               "length":534,
               "arrayBuffer":{  

               }
            },
            "paintVertexArrays":{  

            },
            "segments":[  
               {  
                  "vertexOffset":0,
                  "primitiveOffset":0,
                  "vertexLength":562,
                  "primitiveLength":534
               }
            ],
            "segments2":[  

            ]
         }
      },
      {  
         "zoom":6,
         "layerIds":[  
            "admin_sub0"
         ],
         "arrays":{  
            "layoutVertexArray":{  
               "length":1738,
               "arrayBuffer":{  

               }
            },
            "elementArray":{  
               "length":1314,
               "arrayBuffer":{  

               }
            },
            "paintVertexArrays":{  

            },
            "segments":[  
               {  
                  "vertexOffset":0,
                  "primitiveOffset":0,
                  "vertexLength":1738,
                  "primitiveLength":1314
               }
            ],
            "segments2":[  

            ]
         }
      },
      {  
         "zoom":6,
         "layerIds":[  
            "admin_country0"
         ],
         "arrays":{  
            "layoutVertexArray":{  
               "length":678,
               "arrayBuffer":{  

               }
            },
            "elementArray":{  
               "length":582,
               "arrayBuffer":{  

               }
            },
            "paintVertexArrays":{  

            },
            "segments":[  
               {  
                  "vertexOffset":0,
                  "primitiveOffset":0,
                  "vertexLength":678,
                  "primitiveLength":582
               }
            ],
            "segments2":[  

            ]
         }
      }
   ],
   "featureIndex":{  
      "coord":{  
         "z":6,
         "x":33,
         "y":31,
         "w":0,
         "id":64550,
         "posMatrix":null
      },
      "overscaling":1,
      "grid":{  

      },
      "featureIndexArray":{  
         "length":523,
         "arrayBuffer":{  

         }
      },
      "bucketLayerIDs":{  
         "0":[  
            "landuse-residential0"
         ],
         "1":[  
            "landuse0"
         ],
         "2":[  
            "park0"
         ],
         "3":[  
            "park_outline0"
         ],
         "4":[  
            "water0"
         ],
         "5":[  
            "waterway0"
         ],
         "6":[  
            "tunnel_railway_transit0"
         ],
         "7":[  
            "road_path0"
         ],
         "8":[  
            "road_minor0"
         ],
         "9":[  
            "tunnel_minor0"
         ],
         "10":[  
            "tunnel_major0"
         ],
         "11":[  
            "road_trunk_primary0"
         ],
         "12":[  
            "road_secondary_tertiary0"
         ],
         "13":[  
            "road_major_motorway0"
         ],
         "14":[  
            "railway-transit0"
         ],
         "15":[  
            "railway0"
         ],
         "16":[  
            "bridge_minor 
            case0"
         ],
         "17":[  
            "bridge_major  
            case0"
         ],
         "18":[  
            "bridge_minor0"
         ],
         "19":[  
            "bridge_major0"
         ],
         "20":[  
            "admin_sub0"
         ],
         "21":[  
            "admin_country0"
         ],
         "22":[  
            "place_label_city0"
         ],
         "23":[  
            "country_label-other0"
         ],
         "24":[  
            "country_label0"
         ]
      },
      "paintPropertyStatistics":{  
         "landuse-residential0":{  

         },
         "landuse0":{  

         },
         "park0":{  

         },
         "park_outline0":{  

         },
         "water0":{  

         },
         "waterway0":{  

         },
         "tunnel_railway_transit0":{  

         },
         "road_path0":{  

         },
         "road_minor0":{  

         },
         "tunnel_minor0":{  

         },
         "tunnel_major0":{  

         },
         "road_trunk_primary0":{  

         },
         "road_secondary_tertiary0":{  

         },
         "road_major_motorway0":{  

         },
         "railway-transit0":{  

         },
         "railway0":{  

         },
         "bridge_minor 
            case0":{  

         },
         "bridge_major  
            case0":{  

         },
         "bridge_minor0":{  

         },
         "bridge_major0":{  

         },
         "admin_sub0":{  

         },
         "admin_country0":{  

         },
         "place_label_city0":{  

         },
         "country_label-other0":{  

         },
         "country_label0":{  

         }
      }
   },
   "collisionTile":{  
      "angle":0,
      "pitch":0,
      "grid":{  

      },
      "ignoredGrid":{  

      }
   },
   "collisionBoxArray":{  
      "length":95,
      "arrayBuffer":{  

      }
   }
}

[oscarfonts]

Actually the provided sample dataset and style should render labels. Doesn't it work for you?

[rklerck]

It doesn't.. Tried it again by cloning the rep but it doesn't work. Only real difference now is that I use "https://github.com/an-rahulpandey/cordova-plugin-dbcopy" and the base64js. But everything else is working, so I don't think that's a problem.

Could be an IOS problem, but not sure what it can be! This sucks.

ANDROID TEST I tested it on a Android device but I don't see any labels there! I have the exact same source code, but changed the fonts url to "http://fonts.openmaptiles.org/{fontstack}/{range}.pbf".

Because of that I changed the style to:

 "layout": {
      "text-field": "{housenumber}",
        "text-size": 10,
        "text-font": [
          "Open Sans Regular"
        ]
      },

When i check network traffic, the font pbf's are loaded correctly. But nothing is visible...

[rklerck]

Great that your trying to fix this issue! I tested the new version on both Android and IOS, but labels don't work. Do I have to do something extra for it to work?

[oscarfonts]

I changed the mapbox-gl-js dependency version. So make sure you do "npm install" and "npm run build" again.

BTW, mapbox-gl cannot handle multiple glyph sources, so the glyph URL actually used is the one from the first style loaded (the one you pass to the map constructor - empty.json in the example).

Please tell me if it worked. Thanks.

[rklerck]

Working perfect on both Android and IOS, awesome job!