Making Web Maps Prettier

Ian Turton, Astun Technology Ltd

August 2016

Summary

Introduction
Examples
Solutions

Surely all maps are pretty

Well some are and some aren't
check out #cartofail for examples

Styled Layer Descriptor (SLD)

it's a standard!
hardly anyone implements it!

Robots

SLD

<se:Rule>
  <se:Name>Scientific station</se:Name>
  <se:Description>
    <se:Title>Scientific station</se:Title>
  </se:Description>
  <ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
    <ogc:PropertyIsEqualTo>
      <ogc:PropertyName>featurecla</ogc:PropertyName>
      <ogc:Literal>Scientific station</ogc:Literal>
    </ogc:PropertyIsEqualTo>
  </ogc:Filter>
  <se:PointSymbolizer>
    <se:Graphic>
      <se:Mark>
        <se:WellKnownName>circle</se:WellKnownName>
        <se:Fill>
          <se:SvgParameter name="fill">#ffffff</se:SvgParameter>
        </se:Fill>
        <se:Stroke>
          <se:SvgParameter name="stroke">#000000</se:SvgParameter>
        </se:Stroke>
      </se:Mark>
      <se:Size>1.8</se:Size>
    </se:Graphic>
  </se:PointSymbolizer>
</se:Rule>

Cascading Style Sheets (CSS)

it's not a mapping standard
every one implements it differently
no compatibility

 * { 
        fill: lightgray;
          stroke: black;
            stroke-width: 2;
               
    }

    [PERSONS < 2000000]{
        fill: #4DFF4D;
    }

    [PERSONS >= 2000000] [PERSONS < 4000000]{
        fill: #FF4D4D;
    }

    [PERSONS >= 4000000]{
        fill: #4D4DFF;
    }

Writing SLD

By hand (not really good)
Using a GIS (OK but tiring)
By program (good if it knows what you want)

Hand Editing

use a TEXT editor (not Word)
Use the GeoServer editor (validating)

GIS Editors

QGIS
UDIG

QGis

Good styling tools
No Label export (yet?)

UDig

Good styling tools
Can edit raw XML
Some what unstable

Custom SLD Editors

Shapefile Viewer
SLDEditor

Shapefile Viewer

Applies ColorBrewer to a shapefile attribute
http://github.com/ianturton/ShapefileViewer

SLDEditor

Interactive GUI for writing SLDs
Developed by SciSys, planning to become OSGEO project
http://github.com/robward-scisys/sldeditor

Pretty Maps

Tips & tricks

set the background colour of the map (bgcolor=0x9fd9c9)
chose a "good" colour scheme
use interpolate instead of many filters

    <se:Fill>
        <se:SvgParameter name="fill">
        <ogc:Function name="Interpolate">
          <ogc:Mul>
            <ogc:Div>
              <ogc:PropertyName>gdp_md_est</ogc:PropertyName>
              <ogc:PropertyName>pop_est</ogc:PropertyName>
            </ogc:Div>
            <ogc:Literal>1000000</ogc:Literal>
          </ogc:Mul>
          <ogc:Literal>0</ogc:Literal>
          <ogc:Literal>#a63e75</ogc:Literal>
          <ogc:Literal>1000</ogc:Literal>
          <ogc:Literal>#eaa28a</ogc:Literal>
          <ogc:Literal>5000</ogc:Literal>
          <ogc:Literal>#f9cd90</ogc:Literal>
          <ogc:Literal>10000</ogc:Literal>
          <ogc:Literal>#c4ef6d</ogc:Literal>
          <ogc:Literal>20000</ogc:Literal>
          <ogc:Literal>#56a617</ogc:Literal>

          <ogc:Literal>color</ogc:Literal>
        </ogc:Function>
      </se:SvgParameter>
    </se:Fill>

Tips & tricks

if need be draw the layer twice
use geometry functions to get the centroid
use maths functions to calculate sizes

  <se:PolygonSymbolizer>
  <se:Geometry>
    <ogc:Function name="buffer">
      <ogc:Function name="Centroid">
        <ogc:PropertyName>geom</ogc:PropertyName>
      </ogc:Function>
      <ogc:Mul>
        <ogc:Literal>12.0</ogc:Literal>
        <ogc:Div>
          <ogc:Function name="pow">
            <ogc:PropertyName>pop_est</ogc:PropertyName>
            <ogc:Literal>0.5</ogc:Literal>
          </ogc:Function>
          <!--<ogc:Literal>1000000000</ogc:Literal> sqrt -->
          <ogc:Literal>31622</ogc:Literal>
        </ogc:Div>
      </ogc:Mul>
    </ogc:Function>
  </se:Geometry>

Tips & tricks

GeoServer can follow lines
If you don't want to see the lines then don't add a LineSymbolizer!

Other Issues

Bad Choropleths

ColorBrewer to the rescue
both QGis and UDig provide access to ColorBrewer palettes
don't use rainbows unless you want to appear on #cartofail

Missing and Repeated Labels

Use the centroid
Use <VendorOption name="partials">

Finally

Think about how your map will look.
Think about your map will be used.

Questions?

@ijturton
ian@ianturton.com
iant on StackExchange
http://www.ianturton.com/talks/foss4g/talks/foss4g2016.html

Making Web Maps Prettier Ian Turton, Astun Technology Ltd August 2016