Proportional symbol

[ebocher]

Existing conformance classes required for this use case:

• vector feature styling
• viz/feature.pass (define conformance classes) 🧨
• geometry selection 🧨
• Geometry Manipulation Functions (centroid 🧨)
• Interpolate function 🧨
• Shape Graphics

Example stylesheet:

Below a CSS encoding to describe a proportionnal symbol map to display number of inhabitants on a regular grid (SUM_POP property).

*{
  stroke: grey;
  stroke-width: 1px;
  [SUM_POP>0] {
    geometry: centroid(the_geom);
    mark:   symbol(circle);
    mark-size: [Interpolate(
         SUM_POP,
         0, 10,
         30, 20,
         84, 100,
         'numeric',
         'linear')];
   :mark {
       fill: orange;
       fill-opacity: 0.2;
       stroke: black;
       stroke-width : 1px;
     }
  }
}

Describe any capability not already addressed by existing conformance classes:

Example image illustrating the portrayal use case:

[jerstlouis]

[viz.pass = 1]
{
   stroke: { color: grey, width: 1 };
}
[viz.pass = 2][SUM_POP>0]
{
   geometry: centroid(the_geom);
   marker: Circle {
       fill: { color: orange, opacity: 0.2 };
       stroke: { color: black, width : 1 };
       radius: interpolate(SUM_POP, { 0: 10,  30: 20, 84: 100 }, numeric, linear);
   }
}

[oertz]

[feature.pass = 1]
{
   stroke: { color: grey, width: 1 };
}
[feature.pass = 2][SUM_POP>0]
{
   geometry: centroid(the_geom);
   marker: Circle {
       fill: { color: orange, opacity: 0.2 };
       stroke: { color: black, width : 1 };
       radius: interpolate(SUM_POP, { 0: 10,  30: 20, 84: 100 }, numeric, linear);
   }
}

[oertz]

*{
  stroke: grey;
  stroke-width: 1px;
}

[SUM_POP>0] {
    geometry: centroid(the_geom);
    mark:   symbol(circle);
    mark-size: [Interpolate(
         SUM_POP,
         0, 10,
         30, 20,
         84, 100,
         'numeric',
         'linear')];
   :mark {
       fill: orange;
       fill-opacity: 0.2;
       stroke: black;
       stroke-width : 1px;
     }
}

[maxcollombin]

Mapbox JSON encoding

NOTE:: MarkSymbolizer.wellKnownName is only partially supported by used parser: Only circle symbolizers are supported for the moment.

{
  "version": 8,
  "name": "Default Styler",
  "layers": [
    {
      "filter": [
        ">",
        "SUM_POP",
        0
      ],
      "id": "",
      "type": "line",
      "paint": {
        "line-color": "#808080"
      }
    },
    {
      "filter": [
        ">",
        "SUM_POP",
        0
      ],
      "id": "",
      "type": "circle",
      "paint": {
        "circle-radius": null,
        "circle-color": "#ffa500",
        "circle-opacity": 0.2
      }
    },
    {
      "filter": [
        "<=",
        "SUM_POP",
        0
      ],
      "id": "",
      "type": "line",
      "paint": {
        "line-color": "#808080"
      }
    }
  ]
}

[maxcollombin]

SLD encoding

<?xml version="1.0" encoding="UTF-8"?>
<sld:StyledLayerDescriptor
	xmlns="http://www.opengis.net/sld"
	xmlns:sld="http://www.opengis.net/sld"
	xmlns:gml="http://www.opengis.net/gml"
	xmlns:ogc="http://www.opengis.net/ogc" version="1.0.0">
	<sld:NamedLayer>
		<sld:Name>Default Styler</sld:Name>
		<sld:UserStyle>
			<sld:Name>Default Styler</sld:Name>
			<sld:FeatureTypeStyle>
				<sld:Name>name</sld:Name>
				<sld:Rule>
					<ogc:Filter>
						<ogc:PropertyIsGreaterThan>
							<ogc:PropertyName>SUM_POP</ogc:PropertyName>
							<ogc:Literal>0</ogc:Literal>
						</ogc:PropertyIsGreaterThan>
					</ogc:Filter>
					<sld:LineSymbolizer>
						<sld:Stroke>
							<sld:CssParameter name="stroke">#808080</sld:CssParameter>
						</sld:Stroke>
					</sld:LineSymbolizer>
					<sld:PointSymbolizer>
						<sld:Graphic>
							<sld:Mark>
								<sld:WellKnownName>circle</sld:WellKnownName>
								<sld:Fill>
									<sld:CssParameter name="fill">#ffa500</sld:CssParameter>
									<sld:CssParameter name="fill-opacity">0.2</sld:CssParameter>
								</sld:Fill>
								<sld:Stroke/>
							</sld:Mark>
							<sld:Size>
								<ogc:Function name="Interpolate">
									<ogc:PropertyName>SUM_POP</ogc:PropertyName>
									<ogc:Literal>0</ogc:Literal>
									<ogc:Literal>10</ogc:Literal>
									<ogc:Literal>30</ogc:Literal>
									<ogc:Literal>20</ogc:Literal>
									<ogc:Literal>84</ogc:Literal>
									<ogc:Literal>100</ogc:Literal>
									<ogc:Literal>numeric</ogc:Literal>
									<ogc:Literal>linear</ogc:Literal>
								</ogc:Function>
							</sld:Size>
						</sld:Graphic>
					</sld:PointSymbolizer>
				</sld:Rule>
				<sld:Rule>
					<ogc:Filter>
						<ogc:PropertyIsLessThanOrEqualTo>
							<ogc:PropertyName>SUM_POP</ogc:PropertyName>
							<ogc:Literal>0</ogc:Literal>
						</ogc:PropertyIsLessThanOrEqualTo>
					</ogc:Filter>
					<sld:LineSymbolizer>
						<sld:Stroke>
							<sld:CssParameter name="stroke">#808080</sld:CssParameter>
						</sld:Stroke>
					</sld:LineSymbolizer>
				</sld:Rule>
				<sld:VendorOption name="ruleEvaluation">first</sld:VendorOption>
			</sld:FeatureTypeStyle>
		</sld:UserStyle>
	</sld:NamedLayer>
</sld:StyledLayerDescriptor>