Patched Mapbox GL Spec about ol-mapbox-style HOT 12 OPEN

@lukasmartinelli I think you can create a pull request against https://github.com/mapbox/mapbox-gl-style-spec. I'll take care of the formal requirements once you have submitted it. Just reference the pull request here.

from ol-mapbox-style.

@orangemug I still didn't find time to do this, but it's still high on my list.

from ol-mapbox-style.

Are you talking about e.g. https://github.com/mapbox/mapbox-gl-style-spec/blob/mb-pages/reference/v8.json? In general, I like the idea. I'm just wondering what would be the best way to implement it. Ideally, unsupported features would just be commented out, but JSON does not allow comments. On the other hand, if unsupported features are removed from the spec, it will be harder to add them back later. Do you have any thoughts on this?

from ol-mapbox-style.

Are you talking about e.g. https://github.com/mapbox/mapbox-gl-style-spec/blob/mb-pages/reference/v8.json?

Yes.

In general, I like the idea. I'm just wondering what would be the best way to implement it. Ideally, unsupported features would just be commented out, but JSON does not allow comments. On the other hand, if unsupported features are removed from the spec, it will be harder to add them back later. Do you have any thoughts on this?

Perhaps fork and add ol-mapbox-style the sdk-support field. This way we only annotate properties that are supported and do not delete/add anything to the spec.

          "sdk-support": {
            "basic functionality": {
              "js": "0.10.0",
              "android": "2.0.1",
              "ios": "2.0.0",
              "macos": "0.1.0"
            }

from ol-mapbox-style.

So you mean something like

      "sdk-support": {
        "basic functionality": {
          "js": "0.10.0",
          "android": "2.0.1",
          "ios": "2.0.0",
          "macos": "0.1.0",
          "ol-mapbox-style: "1.0.0"
        }
      }

I agree that doing this is the cleanest way. If you agree, before creating a fork, I'd create an upstream ticket with the suggestion - maybe it can even be added there.

from ol-mapbox-style.

I agree that doing this is the cleanest way. If you agree, before creating a fork, I'd create an upstream ticket with the suggestion - maybe it can even be added there.

Good idea, try that. I think the chances are not so big but upstream would be the best way.

from ol-mapbox-style.

Hey @ahocevar did you get anywhere with this? I noticed in mapbox/mapbox-gl-js#4170 (comment) you were planning to work on it.

Also congrats on the improvements to ol-mapbox-style I've been updating the dependency in https://github.com/maputnik/editor over the months and the map styles are starting to look really good.

from ol-mapbox-style.

Thanks for the response @ahocevar. I really want to get OpenLayers properly supported in Maputnik so anything I can do to help just shout. We've still got a little bit of work to do Maputnik side also, see https://github.com/maputnik/editor/issues?q=is%3Aissue+is%3Aopen+label%3Aopenlayers

Note: I had a look into this over the weekend, I was thinking visual regression type tests might be quite nice. Basically some GeoJSON + styling for each style rule that's in the Mapbox GL style spec.

from ol-mapbox-style.

Note: I had a look into this over the weekend, I was thinking visual regression type tests might be quite nice. Basically some GeoJSON + styling for each style rule that's in the Mapbox GL style spec.

@ahocevar I'm going to give this a go, see where I can get to. I've started over at https://maparatus.github.io/ol-mapbox-style-spec/ I'm going to build a bunch of test styles to see the visual differences between ol-mapbox-style/maplibre-gl later on maybe we could build this into some automated visual regression tests.

from ol-mapbox-style.

There are some interesting quirks, for example here I'd argue that ol/ol-mapbox-style does a better job (OpenLayers is on the right)

I'm currently unsure if the style-spec come with a caveat for OpenLayers

from ol-mapbox-style.

I've update https://maparatus.github.io/ol-mapbox-style-spec/ with a bunch more examples. Some notable differences

• background - we currently set CSS on the background <div/> however the background should move with the camera. This isn't noticeable at the moment because we only set background-color (I tried adding background-pattern and noticed this).
• *-pitch-* - OpenLayers doesn't have pitch so we can exclude these
• raster-* - most of these should be possible with the approach outlined here #1055

from ol-mapbox-style.

Here is how the maplibre compatibility support is going so far, results are in the ol-mapbox-style-spec repo and the spec is at ./src/spec. That page also contains PR and issue links to this repo for various features missing/buggy.

Any feedback welcome (and encouraged)

Key for the results:

• ❌ Not supported: not yet supported
• 🏚️ Fallback: fill-extrusion emulates the 2D part of that spec for example
• ✅ Supported: has same behaviour as maplibre to a large enough extent to considered supported

Results:

• ❌ source_raster_dem.redFactor
• ❌ source_raster_dem.blueFactor
• ❌ source_raster_dem.greenFactor
• ❌ source_raster_dem.baseShift
• ✅ layer.type.values.fill
• ✅ layer.type.values.line
• ✅ layer.type.values.symbol
• ✅ layer.type.values.circle
• ❌ layer.type.values.heatmap
• 🏚️ layer.type.values.fill-extrusion
• ✅ layer.type.values.raster
• ✅ layer.type.values.hillshade
• ✅ layer.type.values.background
• ✅ layout_background.visibility
• ✅ layout_fill.fill-sort-key
• ✅ layout_fill.visibility
• ✅ layout_circle.circle-sort-key
• ✅ layout_circle.visibility
• ❌ layout_heatmap.visibility
• 🏚️ layout_fill-extrusion.visibility
• ✅ layout_line.line-cap
• ✅ layout_line.line-join
• ✅ layout_line.line-miter-limit
• ❌ layout_line.line-round-limit
• ✅ layout_line.line-sort-key
• ✅ layout_line.visibility
• ❌ layout_symbol.symbol-placement
• ❌ layout_symbol.symbol-spacing
• ❌ layout_symbol.symbol-avoid-edges
• ✅ layout_symbol.symbol-sort-key
• ❌ layout_symbol.symbol-z-order
• ✅ layout_symbol.icon-allow-overlap
• ❌ layout_symbol.icon-overlap
• ❌ layout_symbol.icon-ignore-placement
• ❌ layout_symbol.icon-optional
• ✅ layout_symbol.icon-rotation-alignment
• ✅ layout_symbol.icon-size
• ❌ layout_symbol.icon-text-fit
• ❌ layout_symbol.icon-text-fit-padding
• ✅ layout_symbol.icon-image
• ✅ layout_symbol.icon-rotate
• ❌ layout_symbol.icon-padding
• ❌ layout_symbol.icon-keep-upright
• ❌ layout_symbol.icon-offset
• ✅ layout_symbol.icon-anchor
• ❌ layout_symbol.icon-pitch-alignment
• ❌ layout_symbol.text-pitch-alignment
• ✅ layout_symbol.text-rotation-alignment
• ✅ layout_symbol.text-field
• ✅ layout_symbol.text-font
• ✅ layout_symbol.text-size
• ✅ layout_symbol.text-max-width
• ✅ layout_symbol.text-line-height
• ✅ layout_symbol.text-letter-spacing
• ✅ layout_symbol.text-justify
• ❌ layout_symbol.text-radial-offset
• ❌ layout_symbol.text-variable-anchor
• ❌ layout_symbol.text-variable-anchor-offset
• ✅ layout_symbol.text-anchor
• ✅ layout_symbol.text-max-angle
• ❌ layout_symbol.text-writing-mode
• ✅ layout_symbol.text-rotate
• ✅ layout_symbol.text-padding
• ❌ layout_symbol.text-keep-upright
• ✅ layout_symbol.text-transform
• ✅ layout_symbol.text-offset
• ❌ layout_symbol.text-allow-overlap
• ❌ layout_symbol.text-overlap
• ❌ layout_symbol.text-ignore-placement
• ❌ layout_symbol.text-optional
• ✅ layout_symbol.visibility
• ✅ layout_raster.visibility
• ✅ layout_hillshade.visibility
• ❌ light.anchor
• ❌ light.position
• ❌ light.color
• ❌ light.intensity
• ❌ terrain.source
• ❌ terrain.exaggeration
• ❌ paint_fill.fill-antialias
• ✅ paint_fill.fill-opacity
• ✅ paint_fill.fill-color
• ✅ paint_fill.fill-outline-color
• ❌ paint_fill.fill-translate
• ❌ paint_fill.fill-translate-anchor
• ✅ paint_fill.fill-pattern
• 🏚️ paint_fill-extrusion.fill-extrusion-opacity
• 🏚️ paint_fill-extrusion.fill-extrusion-color
• ❌ paint_fill-extrusion.fill-extrusion-translate
• ❌ paint_fill-extrusion.fill-extrusion-translate-anchor
• 🏚️ paint_fill-extrusion.fill-extrusion-pattern
• ❌ paint_fill-extrusion.fill-extrusion-height
• ❌ paint_fill-extrusion.fill-extrusion-base
• ❌ paint_fill-extrusion.fill-extrusion-vertical-gradient
• ✅ paint_line.line-opacity
• ✅ paint_line.line-color
• ❌ paint_line.line-translate
• ❌ paint_line.line-translate-anchor
• ✅ paint_line.line-width
• ❌ paint_line.line-gap-width
• ❌ paint_line.line-offset
• ❌ paint_line.line-blur
• ✅ paint_line.line-dasharray
• ❌ paint_line.line-pattern
• ❌ paint_line.line-gradient
• ✅ paint_circle.circle-radius
• ✅ paint_circle.circle-color
• ✅ paint_circle.circle-blur
• ✅ paint_circle.circle-opacity
• ✅ paint_circle.circle-translate
• ❌ paint_circle.circle-translate-anchor
• ❌ paint_circle.circle-pitch-scale
• ❌ paint_circle.circle-pitch-alignment
• ✅ paint_circle.circle-stroke-width
• ✅ paint_circle.circle-stroke-color
• ✅ paint_circle.circle-stroke-opacity
• ❌ paint_heatmap.heatmap-radius
• ❌ paint_heatmap.heatmap-weight
• ❌ paint_heatmap.heatmap-intensity
• ❌ paint_heatmap.heatmap-color
• ❌ paint_heatmap.heatmap-opacity
• ✅ paint_symbol.icon-opacity
• ❌ paint_symbol.icon-color
• ❌ paint_symbol.icon-halo-color
• ❌ paint_symbol.icon-halo-width
• ❌ paint_symbol.icon-halo-blur
• ❌ paint_symbol.icon-translate
• ❌ paint_symbol.icon-translate-anchor
• ✅ paint_symbol.text-opacity
• ✅ paint_symbol.text-color
• ✅ paint_symbol.text-halo-color
• ✅ paint_symbol.text-halo-width
• ✅ paint_symbol.text-halo-blur
• ✅ paint_symbol.text-translate
• ❌ paint_symbol.text-translate-anchor
• ✅ paint_raster.raster-opacity
• ✅ paint_raster.raster-hue-rotate
• ❌ paint_raster.raster-brightness-min
• ❌ paint_raster.raster-brightness-max
• ✅ paint_raster.raster-saturation
• ❌ paint_raster.raster-contrast
• ❌ paint_raster.raster-resampling
• ❌ paint_raster.raster-fade-duration
• ✅ paint_hillshade.hillshade-illumination-direction
• ❌ paint_hillshade.hillshade-illumination-anchor
• ✅ paint_hillshade.hillshade-exaggeration
• ✅ paint_hillshade.hillshade-shadow-color
• ✅ paint_hillshade.hillshade-highlight-color
• ✅ paint_hillshade.hillshade-accent-color
• ✅ paint_background.background-color
• ❌ paint_background.background-pattern
• ✅ paint_background.background-opacity

from ol-mapbox-style.