Expand support for "*-pitch-alignment" and "*-size-alignment"

[lucaswoj]

The style spec has the concept of rotation-alignment which specifies how features are placed with respect to map rotation.

• rotation-alignment: viewport indicates that features should be rotated with respect to the viewport, drawn such that the top of the screen is "up".
• rotation-alignment: map indicates that features should be rotated with respect to the map, drawn such that north is "up"

I propose that we add the concept of pitch-alignment which specifies how features are placed with respect to map pitch.

• pitch-alignment: viewport indicates that features should be pitched with respect to the viewport, drawn on plane of the viewport.
• pitch-alignment: map indicates that features should be pitched with respect to the map, drawn on plane of the map.

cc @yhahn @mourner @tmcw @ansis @jfirebaugh @lbud

[yhahn]

:+1: this makes total sense to me. It's worth noting that atm our renderers don't support this fully but it's something we can work toward.

master gl js/native

rotation	pitch	text support	icon support
map	map	:white_check_mark:	:white_check_mark:
map	viewport	:white_circle:	:white_circle:
viewport	map	:white_circle:	:white_circle:
viewport	viewport	:white_check_mark:	:white_check_mark:

unskew gl js/native

rotation	pitch	text support	icon support
map	map	:white_check_mark:	:white_check_mark:
map	viewport	:white_check_mark:	:white_circle:
viewport	map	:white_check_mark:	:white_circle:
viewport	viewport	:white_check_mark:	:white_check_mark:

---

I'll sketch this property out in the unskew branch and PR. @lucaswoj do you feel ok about partial support for this property being out in the wild in our renderers and chipping away at full support iteratively?

[lucaswoj]

@lucaswoj do you feel ok about partial support for this property being out in the wild in our renderers and chipping away at full support iteratively?

Yup! I'd prefer that to designing our spec to around present partial renderer support.

[1ec5]

I’m implementing something similar for view-backed annotations on iOS in mapbox/mapbox-gl-native#5245. These properties will make it possible for gl-native to eventually support the same effects for GL point annotations too.

[jfirebaugh]

This is 👌 .

As a third complementary property, we'll want *-pitch-scale: {viewport,map} (https://github.com/mapbox/mapbox-gl-js/issues/2541, https://github.com/mapbox/mapbox-gl-native/issues/2186, https://github.com/mapbox/mapbox-gl-native/issues/5040, https://github.com/mapbox/mapbox-gl-native/issues/5169).

Full set of properties:

• [x] icon-rotation-alignment
• [ ] icon-pitch-alignment
• [ ] icon-pitch-scale
• [x] text-rotation-alignment
• [x] text-pitch-alignment
• [ ] text-pitch-scale
• [ ] circle-pitch-alignment
• [x] circle-pitch-scale -- https://github.com/mapbox/mapbox-gl-js/pull/2821 / https://github.com/mapbox/mapbox-gl-native/pull/5576

[johnnyluu]

Dear devs, is there a way for me to implement circle-pitch-alignment at the moment? I need some radius indicator on the map but the circles I added align with the viewport when I add pitch to the map, as shown in the image.

[yeldarby]

@johnnyluu - if you are looking for a workaround, defining a polygon with GeoJSON instead of using the Mapbox-defined Circle works pretty well.

Here is the function I wrote to generate the GeoJSON Polygon

var createGeoJSONCircle = function(center, radiusInKm, points) {
    if(!points) points = 64;

    var coords = {
        latitude: center[1],
        longitude: center[0]
    };

    var km = radiusInKm;

    var ret = [];
    var distanceX = km/(111.320*Math.cos(coords.latitude*Math.PI/180));
    var distanceY = km/110.574;

    var theta, x, y;
    for(var i=0; i<points; i++) {
        theta = (i/points)*(2*Math.PI);
        x = distanceX*Math.cos(theta);
        y = distanceY*Math.sin(theta);

        ret.push([coords.longitude+x, coords.latitude+y]);
    }
    ret.push(ret[0]);

    return {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [ret]
                }
            }]
        }
    };
};

You can use it like this:

map.addSource("polygon", createGeoJSONCircle([-93.6248586, 41.58527859], 0.5));

map.addLayer({
    "id": "polygon",
    "type": "fill",
    "source": "polygon",
    "layout": {},
    "paint": {
        "fill-color": "blue",
        "fill-opacity": 0.6
    }
});

If you need to update the circle you created later you can do it like this (note the need to grab the data property to pass to setData):

map.getSource('polygon').setData(createGeoJSONCircle([-93.6248586, 41.58527859], 1).data);

[princeofnaxos]

+1

[1ec5]

circle-pitch-scale, icon-pitch-scale, and text-pitch-scale should be renamed circle-scale-alignment, icon-scale-alignment, and text-scale-alignment, respectively: #645.

[lucaswoj]

This issue was moved to mapbox/mapbox-gl-js#4120