Style errors in ios-v2.1.0-pre.4

[kristfal]

Hey,

getting the following errors after updating to ios-v2.1.0-pre.4 and migrating the style to v8.

text-font:

console error:

2015-09-14 17:35:11.512 Embark[25740:2993541] [WARNING] {Map}[ParseStyle]: value of 'text-font' must be a string

Example layer causing error:

{
      "id": "MARCUL_LABEL",
      "type": "symbol",
      "source": "base",
      "source-layer": "MARCUL",
      "filter": [
        "==",
        "$type",
        "Point"
      ],
      "layout": {
        "symbol-placement": "point",
        "text-anchor": "top",
        "text-field": "{objnam} Aquaculture Installation",
        "text-font": [
          "DIN Offc Pro Medium"
        ],
        "text-size": {
          "base": 1,
          "stops": [
            [
              14,
              12
            ],
            [
              17,
              15
            ]
          ]
        }
      },
      "paint": {
        "text-color": "hsl(327, 100%, 45%)",
        "text-halo-width": 1,
        "text-halo-blur": 1,
        "text-halo-color": "hsl(360, 100%, 100%)",
        "text-translate": [
          0,
          12
        ],
        "text-translate-anchor": "viewport"
      },
      "paint.night": {
        "text-color": "hsl(327, 100%, 35%)",
        "text-halo-color": "hsl(200,0%,0%)"
      },
      "paint.contrast": {
        "text-color": "hsl(327, 100%, 45%)",
        "text-halo-color": "hsl(360, 100%, 100%)"
      }
    },

Layer is validated with v8 gl-style-validate and works fine in mapbox-gl-js 0.1.0. Changing the text-font property to a string resolves this issue (but it is not according to the v8 gl style spec) and this change breaks in gl-js.

circle layer type:

console error:

2015-09-14 17:34:39.008 Embark[25705:2980064] [WARNING] {Worker}[ParseTile]: unknown bucket render type for layer 'LNDARE_P' (source layer 'LNDARE')

Example layer:

{
      "id":"LNDARE_P",
      "type": "circle",
      "source":"base",
      "source-layer": "LNDARE",
      "filter": [
        "==",
        "$type",
        "Point"
      ],
      "paint": {
        "circle-radius": {
          "base": 1,
          "stops": [
            [
              11,
              0.5
            ],
            [
              17,
              5
            ]
          ]
        },
        "circle-color": "hsl(33,65%,89%)"
      },
      "paint.night": {
        "circle-color":"hsl(0, 0%, 16%)"
      },
      "paint.contrast": {
        "circle-color":"hsl(33,65%,83%)"
      }
    },

Also validated with v8 gl-style-validator and works fine on web.

Icon-size

It looks like the icon-size ignored/bugged as gl-native icon sizes are a lot larger than gl-js. See attached screenshots

gl-native:

gl-js:

In gl-js you'll barely see the blue crosses. Dont know if this could be caused by the errors mentioned above. Example layer:

{
      "id": "NAVMAR",
      "type": "symbol",
      "source": "base",
      "source-layer": "NAVMAR",
      "layout": {
        "icon-image": "{icon}",
        "icon-allow-overlap": true,
        "icon-size": {
          "base": 1,
          "stops": [
            [
              13,
              0.35
            ],
            [
              17,
              1
            ]
          ]
        }
      },
      "paint": {
        "icon-opacity": 1
      },
      "paint.contrast": {
        "icon-opacity": 0
      },
      "paint.night": {
        "icon-opacity": 0
      }
    },

[friedbunny]

/cc @lucaswoj @jfirebaugh

[incanus]

Re: the circle render problem, circles are not heavily testing on native yet (for example, iOS bindings in #2167 are not yet implemented) but IIRC the rendering from a style like this should work as of v8.

[kristfal]

Also, just noticed that the renderer seems to be skipping certain layers. Haven't found any patters.

Non-rendering layer:

    {
      "id": "LIGHT_SECTOR_Green",
      "type": "line",
      "source": "base",
      "source-layer": "LIGHTSECTOR",
      "filter": [
        "all",
        [
          "==",
          "geom_zoom",
          0
        ],
        [
          "==",
          "geom_type",
          0
        ],
        [
          "==",
          "colour",
          "4"
        ]
      ],
      "paint": {
        "line-opacity": 0.75,
        "line-color": "green",
        "line-width": {
          "base": 1,
          "stops": [
            [
              9,
              2
            ],
            [
              13,
              4
            ]
          ]
        }
      },
      "paint.night": {
        "line-color": "green",
        "line-opacity": 0.9
      },
      "paint.contrast": {
        "line-color": "green"
      }
    },

Almost identical layer that renders just fine:

{
      "id": "LIGHT_SECTOR_Red",
      "type": "line",
      "source": "base",
      "source-layer": "LIGHTSECTOR",
      "filter": [
        "all",
        [
          "==",
          "geom_zoom",
          0
        ],
        [
          "==",
          "geom_type",
          0
        ],
        [
          "==",
          "colour",
          "3"
        ]
      ],
      "paint": {
        "line-opacity": 0.75,
        "line-color": "red",
        "line-width": {
          "base": 1,
          "stops": [
            [
              9,
              2
            ],
            [
              13,
              4
            ]
          ]
        }
      },
      "paint.night": {
        "line-color": "red",
        "line-opacity": 0.9
      },
      "paint.contrast": {
        "line-color": "red"
      }
    },

Both of these layers render just fine in mapbox-gl-js 0.1.0. This error is also visible on the screenshot above, where the green part of the circles is not rendering on gl-native.

[kristfal]

@incanus: All issues resolved in ios-v2.1.2, great job.