Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style DSL #758

Open
tobrun opened this issue Nov 13, 2021 · 2 comments
Open

Style DSL #758

tobrun opened this issue Nov 13, 2021 · 2 comments

Comments

@tobrun
Copy link
Collaborator

tobrun commented Nov 13, 2021

Now that we have concepts as Runtime Styling and Data Driven Styling due to support of expressions, layers, etc.
We can start thinking about introducing a builder like pattern to compose a style object.
Ideally this comes after but #757 but can be added independent.

For reference on how this looks in Kotlin code:

style(styleUri = Style.TRAFFIC_DAY) {
    +imageSource("imag") {
      url(IMAGE_URL)
      coordinates(
        listOf(
          listOf(-35.859375, 58.44773280389084),
          listOf(-16.171875, 58.44773280389084),
          listOf(-16.171875, 54.7246201949245),
          listOf(-35.859375, 54.7246201949245)
        )
      )
    }
    +geoJsonSource(id = "earthquakes") {
      url(GEOJSON_URL)
      cluster(false)
    }
    +circleLayer(layerId = "earthquakeCircle", sourceId = "earthquakes") {
      circleRadius(get { literal("mag") })
      circleColor(rgb(255.0, 0.0, 0.0))
      circleOpacity(0.3)
      circleStrokeColor(Color.WHITE)
    }
}
@tobrun tobrun added android enhancement New feature or request ios web labels Nov 13, 2021
@felix-ht
Copy link
Collaborator

felix-ht commented Nov 19, 2021

That would be great!

How it could look like in dart:

final style = Style(
  styleString: Styles.TRAFFIC_DAY,
  sources: [
    ImageSource(id: "imag", url: IMAGE_URL, coordinates: [
      [-35.859375, 58.44773280389084],
      [-16.171875, 58.44773280389084],
      [-16.171875, 54.7246201949245],
      [-35.859375, 54.7246201949245],
    ]),
    GeoJsonSource(id: "earthquakes", url: GEOJSON_URL, cluster: false),
  ],
  layers: [
    Layer(
      layerId: "earthquakeCircle",
      sourceId: "earthquakes",
      properties: CircleLayerProperties(
        circleRadius: [Expressions.get, "mag"],
        circleColor: "#ff0000",
        circleOpacity: 0.3,
        circleStrokeColor: Colors.white.toHexStringRGB(),
      ),
    ),
  ],
);

We could also add one common base class for layers and sources, but keeping them separate feels more "dartish" to me.

@felix-ht felix-ht mentioned this issue Nov 30, 2021
4 tasks
@stale
Copy link

stale bot commented Jan 18, 2022

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

@stale stale bot added the stale label Jan 18, 2022
@tobrun tobrun removed the stale label Jan 18, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants