Making maps pretty Andrea Aime Jim Groffen Making Maps Pretty - PowerPoint PPT Presentation

Making maps pretty Andrea Aime Jim Groffen Making Maps Pretty Making Maps Pretty 1 1

Making maps pretty Introduction Making Maps Pretty Making Maps Pretty 2 2

Introducing carthography • Depiciting shape and location, conveing qualitative and quantitative information over a map • Map: visually appealing, but still correct and useful for a specific purpose Making Maps Pretty Making Maps Pretty 3 3

Target audience • Ability to read specific symbols • Ability do discern colors and small features on the map T_10_2 Happy Surface and Hostile Planned -=Reduced North Direction East Direction Velocity = Red 9 _ Task Force – No Quantity – 9 Nuclear - Yes Making Maps Pretty Making Maps Pretty 4 4

Target medium • Device type (desktop, netbook, mobile) • Colors available? Making Maps Pretty Making Maps Pretty 5 5

Purpose • What should it display? • How will it be used? Making Maps Pretty Making Maps Pretty 6 6

Clarity – Information Density • General Purpose or Specific Purpose • Level of Detail • Usability Making Maps Pretty Making Maps Pretty 7 7

Labels • Font • Density • Contrast Making Maps Pretty Making Maps Pretty 8 8

Line styling COLOUR COLOUR CASING CASING THICKNESS TRANSPARENT CASING THICKNESS TRANSPARENT CASING Making Maps Pretty Making Maps Pretty 9 9

Colour schemes SEQUENTIAL SEQUENTIAL QUALITATIVE QUALITATIVE DIVERGING DIVERGING Making Maps Pretty Making Maps Pretty 10 10

Raster SATELLITE SATELLITE HILLSHADE HILLSHADE INTENSITY CONTOURS Making Maps Pretty Making Maps Pretty 11 11

Fallacies Making Maps Pretty Making Maps Pretty 12 12

Making maps pretty Map elements Making Maps Pretty Making Maps Pretty 13 13

Polygons • Bounded areas – Phisical: coastlines – Conceptual: administrative subdivisions • Two stylable components – Outline – Fill • Filling the polygon – To show the shape or a uniform quality – To show a quantity or a non uniform quality (thematic mapping) Making Maps Pretty Making Maps Pretty 14 14

Points • Entities with a position, but no dimension – Too small at all scales – Too small at small scales (cities, buildings) • Represented – Small, simple symbols – Large, elaborate symbols • Communicate differences – Using color – Using size – Using shape Making Maps Pretty Making Maps Pretty 15 15

Lines • Entities too thin to be represented as polygons – At all scales – At certain scales (rivers, roads) • Nature: – Landscape features – Computed (isolines) • Communicate with: – Color – Width – Graphics Making Maps Pretty Making Maps Pretty 16 16

Raster • Imagery • Grid of phisical values (temperature, elevation, ...) • Contrast enhancement is sometimes necessary • Color classification – Continous – By classes Making Maps Pretty Making Maps Pretty 17 17

Text • Labels – Font – Color – Contrast – Density – Hierarchy Making Maps Pretty Making Maps Pretty 18 18

Colour • Choosing an appropriate color scheme – Culture – Ability to discern shades of colour – sing too many/too few colours • Exercise – http://colorbrewer2.org/ Making Maps Pretty Making Maps Pretty 19 19

Making maps pretty Using styles Making Maps Pretty Making Maps Pretty 20 20

Separating styles and data • Styled Layer Descriptor: markup specifying how to style a map • Separate from the map – The same style can be reused against various data – The same data can be styled in different ways • Notable examples in the IT industry – HTML and CSS – Model/View/Controller Making Maps Pretty Making Maps Pretty 21 21

Rule line symbolizer FeatureTypeStyle surface=hiway constraint type=Road Rule line symbolizer max scale: 50k Features Rule text symbolizer capital=true NAME FeatureTypeStyle point symbolizer constraint Rule text symbolizer Pop > 500000 NAME type=City max scale: 50k point symbolizer Raster Rule Other point symbolizer Canberra Queanbeyan Content Style Portrayal (ie Drawing) Composition Making Maps Pretty Making Maps Pretty 22 22

Root SLD elements • StyledLayerDescriptor – NamedLayer (UserLayer) • UserStyle (NamedStyle) • We concentrate on the UserStyle contents since that is where a Style is defined • Unless you're making dynamic styling requests (that few WMS support) you can safely ignore the other elements and treat them as boilerplate <StyledLayerDescriptor … > <NamedLayer> <Name>name for style layer</Name> <UserStyle> <Title>Title for style layer</Title> <FeatureTypeStyle> … </FeatureTypeStyle> </UserStyle> </NamedLayer> </StyledLayerDescriptor> Making Maps Pretty Making Maps Pretty 23 23

FeatureTypeStyle • Contains rules driving the map renderer • Can be used to ensure innner layering (ensure certain features will be drawn before others)* • Can mention the type of feature to be styled (safer to just skip it) <FeatureTypeStyle> <Rule> ... </Rule> <Rule> ... </Rule> </FeatureTypeStyle> <FeatureTypeStyle> <Rule> ... </Rule> <Rule> ... </Rule> </FeatureTypeStyle> *: the SLD specification does not tell exactly how rendering order should be applied Making Maps Pretty Making Maps Pretty 24 24

Rule • Contains the symbolizers (what actually draws features on the map) • Controls them: – Scale controls: display features only at certain scales – Filtering: display only features matching certain conditions <Rule> <MinScaleDenominator>400000</MinScaleDenominator> <MaxScaleDenominator>1000000</MaxScaleDenominator> <ogc:Filter> <ogc:PropertyIsEqualTo> <ogc:PropertyName>MTFCC</ogc:PropertyName> <ogc:Literal>S1200</ogc:Literal> </ogc:PropertyIsEqualTo> </ogc:Filter> <LineSymbolizer> ... </LineSymbolizer> </Rule> Making Maps Pretty Making Maps Pretty 25 25

Filtering • PropertyIsEqualTo • PropertyIsNotEqualTo • Spatial or attribute filters • PropertyIsLessThan • Logical combinations • PropertyIsLessThanOrEqualTo • ElseFilter • PropertyIsGreatherThan • PropertyIsGreatherThanOrEqualTo • PropertyIsBetween <ogc:Filter> <ogc:And> • PropertyIsLike <ogc:PropertyIsEqualTo> <ogc:PropertyName>oneway</ogc:PropertyName> • PropertyIsNull <ogc:Literal>0</ogc:Literal> </ogc:PropertyIsEqualTo> <ogc:PropertyIsGreaterThan> <ogc:PropertyName>maxspeed</ogc:PropertyName> • BBOX • Beyond <ogc:Literal>60</ogc:Literal> • Intersects • Dwithin </ogc:PropertyIsGreaterThan> <ogc:Not> • Contains <ogc:Disjoint> <ogc:PropertyName>Geometry</ogc:PropertyName> • Crosses <gml:Envelope srsName= "urn:x-ogc:def:crs:EPSG:6.3:4326" > • • Overlaps And <gml:lowerCorner>138.0 -35.5</gml:lowerCorner> <gml:upperCorner>139.0 -34.5</gml:upperCorner> • Touches • Or </gml:Envelope> • Equals • Not </ogc:Disjoint> </ogc:Not> • Within </ogc:And> </ogc:Filter> Making Maps Pretty Making Maps Pretty 26 26

Point symbolizer • Applies to all geometry types (centroids used) • Can use simple marks or external images <PointSymbolizer> <PointSymbolizer> <Graphic> <Graphic> <ExternalGraphic> <Mark> <!-- avoid hot linking, this is just a sample --> <WellKnownName>square</WellKnownName> <OnlineResource xlink:type= "simple" <Fill> xlink:href= "http://www.google.com/mapfiles/marker.png" /> <CssParameter name= "fill" > <Format>image/png</Format> #FF0000 </ExternalGraphic> </CssParameter> </Graphic> </Fill> </PointSymbolizer> </Mark> <Size>6</Size> </Graphic> </PointSymbolizer> Making Maps Pretty Making Maps Pretty 27 27

Line symbolizer • Controls how a line is displayed • Can use continuous lines, dash arrays, but also graphical symbols <LineSymbolizer> <LineSymbolizer> <Stroke> <Stroke> <CssParameter name= "stroke" >#0000FF</CssParameter> <CssParameter name= "stroke" > <CssParameter name= "stroke-width" >6</CssParameter> #000000 <CssParameter name= "stroke-linejoin" >round</CssParameter> </CssParameter> <CssParameter name= "stroke-linecap" >round</CssParameter> <CssParameter name= "stroke-dasharray" > </Stroke> 10 5 1 5 </LineSymbolizer> </CssParameter> </Stroke> </LineSymbolizer> Making Maps Pretty Making Maps Pretty 28 28