Style JSON compatible layer/source intialisers

[tobrun]

Plugin request to implement mapbox/mapbox-gl-native#13467 as a plugin. Ideally we solve the former ticket with a core API, but we can still provide this functionality with a small plugin in the meantime.

The idea is that the plugin is a json parser that accepts a json string as input and creates objects equivalent to the Android Style API

• Create new plugin module
• Use a json parser to create intermediate object representing the style json
• Create the appropriate Android Style API objects
• Add example to test app
• Add tests

@mapbox/maps-android

[LukasPaczos]

Sounds great! One proposition - let's keep it simple and make the plugin return only the parsed Layer/Source object to the caller, otherwise, we'd have to expose and synchronize all of the different ways of adding those objects to the map as options. Another advantage would be that the plugin wouldn't be reliant on the Style.

[ekigamba]

@LukasPaczos I second that, cool idea

[arminnasiri]

cool idea

[tobrun]

Sounds good @LukasPaczos, note that we need return a wrapper around layers and sources as the style json can have nested items. Take for example this gl-js code:

map.addLayer({
        "id": "route",
        "type": "line",
        "source": {
            "type": "geojson",
            "data": {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [-122.48369693756104, 37.83381888486939],
                        [-122.48348236083984, 37.83317489144141],
                        [-122.48339653015138, 37.83270036637107],
                        [-122.48356819152832, 37.832056363179625],
                        [-122.48404026031496, 37.83114119107971],
                        [-122.48404026031496, 37.83049717427869],
                        [-122.48348236083984, 37.829920943955045],
                        [-122.48356819152832, 37.82954808664175],
                        [-122.48507022857666, 37.82944639795659],
                        [-122.48610019683838, 37.82880236636284],
                        [-122.48695850372314, 37.82931081282506],
                        [-122.48700141906738, 37.83080223556934],
                        [-122.48751640319824, 37.83168351665737],
                        [-122.48803138732912, 37.832158048267786],
                        [-122.48888969421387, 37.83297152392784],
                        [-122.48987674713133, 37.83263257682617],
                        [-122.49043464660643, 37.832937629287755],
                        [-122.49125003814696, 37.832429207817725],
                        [-122.49163627624512, 37.832564787218985],
                        [-122.49223709106445, 37.83337825839438],
                        [-122.49378204345702, 37.83368330777276]
                    ]
                }
            }
        },
        "layout": {
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {
            "line-color": "#888",
            "line-width": 8
        }
    });

[tobrun]

Other examples:

map.addLayer({
	"id": "terrain-data",
	"type": "line",
	"source": {
		type: 'vector',
		url: 'mapbox://mapbox.mapbox-terrain-v2'
	},
	"source-layer": "contour",
	"layout": {
		"line-join": "round",
		"line-cap": "round"
	},
	"paint": {
		"line-color": "#ff69b4",
		"line-width": 1
	}
});

map.addLayer({
	"id": "points",
	"type": "symbol",
	"source": {
		"type": "geojson",
		"data": {
			"type": "FeatureCollection",
			"features": [{
				"type": "Feature",
				"geometry": {
					"type": "Point",
					"coordinates": [-77.03238901390978, 38.913188059745586]
				},
				"properties": {
					"title": "Mapbox DC",
					"icon": "monument"
				}
			}, {
				"type": "Feature",
				"geometry": {
					"type": "Point",
					"coordinates": [-122.414, 37.776]
				},
				"properties": {
					"title": "Mapbox SF",
					"icon": "harbor"
				}
			}]
		}
	},
	"layout": {
		"icon-image": "{icon}-15",
		"text-field": "{title}",
		"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
		"text-offset": [0, 0.6],
		"text-anchor": "top"
	}
});

map.addSource("earthquakes", {
	type: "geojson",
	// Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
	// from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
	data: "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
	cluster: true,
	clusterMaxZoom: 14, // Max zoom to cluster points on
	clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});

map.addLayer({
	id: "clusters",
	type: "circle",
	source: "earthquakes",
	filter: ["has", "point_count"],
	paint: {
		// Use step expressions (https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-step)
		// with three steps to implement three types of circles:
		//   * Blue, 20px circles when point count is less than 100
		//   * Yellow, 30px circles when point count is between 100 and 750
		//   * Pink, 40px circles when point count is greater than or equal to 750
		"circle-color": [
			"step",
			["get", "point_count"],
			"#51bbd6",
			100,
			"#f1f075",
			750,
			"#f28cb1"
		],
		"circle-radius": [
			"step",
			["get", "point_count"],
			20,
			100,
			30,
			750,
			40
		]
	}
});

[AliKhoshraftar]

I need it for android.
Good Idea.

[langsmith]

cc @zestyping as fyi that this is moving.

[zestyping]

Thank you! This looks promising!

[stale]

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[zestyping]

@langsmith Is this moving forward? This is still something that would be eventually useful for ODK. We aren't blocked right now, so this isn't urgent, just wanted to check.

[langsmith]

@zestyping ,

We've been focusing on several other higher priority pieces of work with the Maps SDK, so none of the Maps Android team has had the time to work on this plugin refactoring. I/we haven't forgotten about it though.