Add to Watchlist

Advanced CartoCSS Techniques

8 views

Citation of segment
Embed Code
Purchasing a DVD Cite video

Formal Metadata

Title Advanced CartoCSS Techniques
Title of Series FOSS4G 2014 Portland
Author McConchie, Alan
Fitzsimmons, Seth
License CC Attribution 3.0 Germany:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
DOI 10.5446/31746
Publisher FOSS4G, Open Source Geospatial Foundation (OSGeo)
Release Date 2014
Language English
Producer FOSS4G
Open Source Geospatial Foundation (OSGeo)
Production Year 2014
Production Place Portland, Oregon, United States of America

Content Metadata

Subject Area Computer Science
Abstract CartoCSS is becoming an ever more popular Ð and ever more powerful Ð tool for cartographic and data styling. In this talk, Stamen designers and technologists will present some tips and tricks to make your next design sing. Tips and tricks covered include, but will not be limited to: pixelation, use of dingbat fonts for texture and markers, post-facto label adjustment, alternate uses for text symbolization, where to find and use entropy, blending, and geometry manipulation.
Keywords CartoCSS
Mapbox
Series
Annotations
Transcript
Loading...
I have a buddy by and balance a statement on is a bunch of map designers so actually there's 3 of us who work in this presentation on the 3 of us presented something similar at state the map but I've added a bit new material at the end so if the the words in the map and you were worried that you seen this you will be some new material and so huge thanks to surface Simmons was also here at this conference and K. Watkins whose what our desires to the naked eye and so they both got a lot of work into this presentation in a lot of things that Marshall meant just looking at the title and anytime you have a tort it's got tips and tricks and stuff in the name means it gets to be kind of a grab bag down there's not going to be as much of a a conceptual art through this presentation as had which was excellent and probably says you will have as well so this'll be in between those 2 you really contextualizing talks I will get into a lot of nitty-gritty but I think you get a sense of how we're dealing with a lot of the same concerns that the bear brought up that we're really trying to make sure that we're using this technical tool on but with the intent in mind which maps trying to accomplish and and really keeping that map the map reader the map during mind like how they can unappreciated news the maps the so we're having this is maps with
distinct personalities which is another way of talking about and the idea of focusing on intent but will will get into a lot of the we just the the real like how you accomplish something in this tool that currency assessed of so these maps and show you are from town no 1 on and some are using tunnel to which is now a map OX studio uh we use both of those are practice we love all those map OX tools and so terminal to were not but studio coming built this things
and then in a few cases like the 1st 1 is shown our our design work with Pinterest we actually build the on that boxes vectors format box to deploy so this matter interest and was was designed for being hosted on that box so it was a collaboration between the 2 of us I'm in all this work is stuff we done within the last year the country's map was around the end of 2013 and if you're familiar with pages you know what they're kind of their brand is what they're going forward their maps or what they what they wanted to go forward the maps and what they're trying to the freaked interfaces so look
like and feel like so we really wanted something that felt felt but distinctive that fell really handcrafted really warm and friendly and and beautiful just a few examples of using really
large type I'm using a lot of texture almost everything as texture in it and because we knew they can just maps that most readers can have questions on them and you can use a lot of texture you can use a lot of color and when we're designing maps of and have more complicated data overlays we we really learned we can do a whole lot of texture area we're careful the and this is all just that
the OpenStreetMap data that has been processed for the map OX factors so
we use and we use custom fonts for really important and take to get that since a personality there's were styling and with different amounts of fill in those fonts onto some of the some of the really large text has mostly on empty interior some of them are more bomb solid there's the 2 colors of text so we have 4 label hierarchies and and by I turn a lot of the
nitty-gritty slides so we talked about and say them out in terms of how you deal with the tile boundaries farm with especially with labels easy to things like the tax avoid edges or you can you can tweak your meta tiles on this there is more and more documentation that coming online so I slowed skip that but sometimes even when you can't I can get your labels to avoid tile boundaries the c can sometimes what we're and
up doing was just skipping any labels that were too long and in Germany we found the a lot of these really long city names and so you can use regular expressions in courtesy assess and so this 1 is is basically grabbing anything yeah it's it's dumping anything is beyond the 12 characters and setting the text name to blank so there's that there's a lot of cities that have just a point man and you don't see it because the name of that town is really long so there's a lot of like really just like
so things that you have to do to to make a map work the and this is for an
earlier draft of another of another project we're working on but as the show more exaggerated
version of what kind things were doing texts were just like really ramping up the letting the kerning in squeezing those letters together and doing a lot of halos in and strokes around the edges so you can see that having a little bit on the interest map but this is drafted something really extreme that you see how in the Central African Republic all those lines the words themselves are like total glued together and the only reason you can read it as this out once so that's like putting these negative line spacings negative characters basins the and more special case in
that we did on you'll notice action this map that there's some of the state labels are oriented in different directions and so this is something that with women were designed for the the web more than designing with code you really don't have a whole lot of control or the single you do but you can't do this for every label everywhere in the world the whole point of of doing work world maps with code is that you end up having to set rules that will apply everywhere and you can physically go test them everywhere but low zooms when we're looking at you know that the whole US or looking at where labels are placed on countries in 3 or 4 why not go ahead and like customize the placement you do what like a handmade panic petrographer right during and say this label needs to be moved a little bit so for California if if
the feature is named California we apply special role to it this is the power of CSS you actually manually go and do these things so you rotate California 44 degrees and we just trial and error to effects on same thing with Kansas we had actually rotated and offset it so that the United States label would work at the sum level of so you it takes a bit of extra time but that's what all school handmade photographers will have to do and then you can do this as long as you know you ambition is not to do it for everyone in the world the and 1 thing was also have fun we did for
the just map to make it look a bit handmade but once a year rotating things in your new near nudging those labels a little bit you can put a bit of a nudge on everything using some other value that is coming in your data in this case all these features have an OSM ID in the map OX vector data and we just use that as a bit of a random number generator and and based on those MIT and we do like a mod 3 just to get a little tiny angle and sometimes they're rotate a little less and sometimes a rotated a little bit to the right you can see that if you were drop these lines across you can see is shown in this tilted 1 way engineers told all but another way I this is all
the textures and here are really something that dictates spent a lot of time on 1 and the colors she did a lot of years of work basically choosing of few set of few limited colors and then using the currency assessed lighten and darken operations so that basically you can in no need to calculate those those hex values self we could say understand users 1 hex value uses built-in tool select like little that little bit of time for this feature likeness more lot more for another feature any you kind of know that he's cause a really work together but at a lot of that and using the
operations to it multiply colors and multiply textures so you can apply a background texture and then you fill in the park feature with the color that is going to use this shop style multiplier effects on so the textures keep coming through you not overlapping a new texture but you end up with a green pattern texture and a solid blue color and texture and is really subtle
things like a nice structure goes along the water and these some tricks that we learned from
on the edge the map OX true because they the way that map what's that coming you don't always have a land feature chirality of water feature but if you wanna have a stroke outside of land you have to do a few tricks like In this case you do a dark fill on the water 1st and then you apply another 1 that's a light field but you put a blur on that and the result is the edges of that light filled get blurred away and you end up seeing the dark in the background only along the edges so you really see a subtle dark shadow on the land but that's actually being applied to the wire and so the project we're
working on it was less less personal less on idiosyncratic was enough for the Golden Gate Park Conservancy they are manage all the national parks in the Bay area
and they won nice-looking map that really reflected that National Park kind of style and feel so it feels like those rate maps you'd get from a park ranger when you actually drive up to the park gates and but it also works as a supplement and we had integrated with on Google driving directions and then in the 2nd directions from another provider so we had a pull out of things together on top of this map
and it's all open source of
so we we have 3 repos that we put into the park Conservancy's phone and get out group so you can look at those 3 repose and see the different styles we apply recent work on the background of the features and labels separately and you can see a little bit of several things going on in the labels you see some kind of alignments that you might not notice another kind of privacy is a space maps the campgrounds and the labels on the campgrounds or all left-aligned which was actually have hard to get courtesy assessed to align things left so we end up having to
do was create transparent icons that had a bunch of white space to or blank space to the left so that the text would align left but would aligned to the center of the icon so then the result here is that it looks like the label aligns left to the left edge of the icons and so the making your own icons do what you gotta do to make this stuff work and if you look closely all those
little overlooks are actually looking in the right direction so this not just an icon showing where you can have a nice view you can actually see which direction you ought to be looking at their we couldn't really figure out And
Or we were really capable of rotating those icons correctly and also with the read alignment thing we were doing it wasn't work so instead what we have but actually the slightest showing how you on the but in the all shield symbolizes which were mainly used for creating a like an interstate highway shielding putting a number on it but you can I you some of these lines to detach the shield ISO shield unlock image means you can create text anywhere doesn't have to go on top of that shield so that means were labeling the icon on as a shield symbolizes but as for how we rotate
em we had to create a few rotated
images so this is a little bit of of an illustrator work and then a little bit of scripting to rotate the mall at 15 degrees and then given a there was a small enough subset of overlooks and our our on plans that the Park Service you were willing to sit down and look at the spreadsheet of 30 overlooks and tell which direction pointed they added a field saying what the orientation was and we apply a specific marker file for each of those so a lot of in this you customizing things when you have a small enough subset of data the you can customize and some more recent work this is going
to be a stuff is still in progress so it's not going to be quite as as tips and tricks kind of thing but what we 1 of our most popular about styles and is toner
which is again designed purely for putting data on top of the this black and white looks looks beautiful on its own but also really great to put in colored overlays polygons and so on and so we need this a long time ago with with uh this tool that was developed at same called Scott and cascade neck which was kind a precursor of courtesy assess and end for a long time we just don't have the resources to port that Carter CSS and only really recently did we and finally find the time and we got a nite branches in and was actually like Foundation originally paid for us to produce these maps of so toner is free to use for unlimited use for any base snappy what tiles are out there and now finally that we have ported currency assess and we can set up the database will not be three-year-old data is now only 2 months old data in single started going faster and and I should mention that um
brand-new who's been working with us is also super amazing and helping us the report are rendering infrastructure off of
1 server in in in a basin somewhere onto the cloud and so follow with him or follow-up assess who's here about how we're doing this stuff in the back and the the but the changes were making right now are
very so we're actually trying to copy cascade Nikolova over currency assessed the the and 1 thing you might also notice is that we have enabled the retina and rendering and were still figuring out the kinks and that like how that changes how we apply styles like are we going to have to special case a lot of our style so that so we place labels differently for right now and this some strange things are showing up that are kind of interesting but I'm 1 of the things that we have got to do that were that things were bugging me and there's misspellings in natural Earth and of anyone else's run into these things and so I you know that maintain of natural orifice at Apple we may not see any improvement so we have the thing was to get together and and start working on a 4th natural orthotopic break and but In the
special case in things if is a misspelling just like find the things misspelled and change the name of so In this case the Strait of Georgia was spelled straight as in straight line not straight is in the water body of and so there's a few those that bug me and so whenever the it they're render finds of features means Strait of Georgia spelled wrong we just change the name of another another little quirk courtesy assesses that you can't seem to just assign a new text name you have to be added to something and so you have to have a field that is empty in this case freezing name alter which is happens to be empty in these cases so we're adding this during the new string we want to this blank string because it has to be a label it is drive somehow from a field but but we've also been
doing we we tried actually doing toner based on the map box vectors and there were just too many little tweaks that we want to do that were not available on coming out of map OX vectors and the vectors that they provide our great because they're really and super efficiently designed for most kinds cartography but if you want to you really tweak things won't get into your database that is from driving you rendering you can rely on those 1 thing we wanted to do was filter buildings by size and in the map box vectors buildings come in the you don't have the area of the building is no way to calculate during that render so you basically have to draw all buildings and other buildings and what we do for toner is envisaging 14 you start to see some buildings that have a large area and you get interesting effects this way actually because and you end up seeing more or less where industrial areas are and where the central business district because of 1 to these buildings which are this becoming gray crosshatched features they shop downtown where these these buildings that Filhol city block we show up around commission center where we are but in OSN there's actually buildings almost all throughout Portland and is not showing up to class map the same
the the other thing do with we realize an OSM their speeches called building equals no so we had a filter and only dried buildings that are not building type equals now and they can see what we do is we go 14 if the area of the buildings greater than equal 5 thousand will drive 2 ends in 15 we can lower the threshold minimizing 16 show every building
and where there was talk about with stars that we and we frequently found with our visualizations that were putting up a colorful polygon but duties on top of something it looks bad when it covers up the label sometimes a really looks bad when a couple covers up the road network so toner actually comes in a lot of different flavors of this toner Dutch background so these are all available to you as well but so toner dash background has all the labels removed so also Torah labels
later that is all transparent except for the labels of end to generate that we use the exact same style sheet but then we add this extra stylesheet which sets map background to transparent and then in our project file we just deactivate all the layers that we don't want so we don't really have to write multiple stylesheets we just have to put this override on there and deactivate a lot of these layers when we render
so then you can get to international lines which is just the roads we also the buildings layer you that the
base layer to postings on top of so then you just need a little bit of an extra coding in your in your leaflet or whatever you you using to put the base layer been dryer G adjacent polygons then driver labels in and and rows on top and you can see you're nice pretty labels not color orange and purple they they float on top the for they also wanted yeah you know
the black and white layer at the bottom white Thomas style is great for data is actually a really pale base map is an even better so we have a called 200 dash lights and in this case we apply a new style sheet that just overrides these variables which define the color for the so all the other style elements of the same all the weights so the same we don't have to change those we just say well instead of calling the water black you call the water so we actually take on taxes is 0 and then we do like MIT 85 % chance so you can really control those things until you get this light style that looks I want to look Our glass more I wanna talk about and is
something that we just launched this week which really said about and it's showing that townhall actually is becoming a tool that we can use for doing all kinds of maps that are not necessarily even tile-based so I 1 came to us and there they have a GS apartment and they've done the statistical models showing where bird species are likely to be found in 2080 under and in various on emission scenarios is as climate change is theory that a bird will want to have a change so we've made much of maps like
this now tile no 1 has some really great Rasta support and you have to use 1 of Development versions I think there were the the unstable released as natural habitat is spending in the diversion for months and months and there's a lot of the blog post explaining how to do the rest of us is so we ended up doing again designing for how do we make this accessible to an end user and the other one's goal also was to create a single map out of these multiple datasets they had so that it could be shareable across social media and you don't have to send people necessarily to a web page we see here is where the bird is going to be in years where was in his words can be in summer in and so on they wanted to fit into a single map so what we are doing is and we got the yellow and blue outlines are showing where this particular bird it's range is in year 2000 so that's the current state and then the wispy rostas which you know the GS people gave to us we can create those on but we're composite in them so that the blue colors are the probability of where the bird is going to be on during the winter season in the year 2080 and then the yellow colors are where it's going to be in the summer and then where those where the bird is they're all year round it blends into a green the so this is just a little glimpse of what
how the the rest is selling works in currency assessed you've got you apply these colors stops so down here stubs 0 use the variable when 2 0 which is at the top which an RGB a color so that the that 4th value is the alpha value in 0 meaning that when the value is 0 in the roster meaning that the bird is not going to be found that spot is fully transparent and then when the value which is 1 we use that variable for winter high which is the same color but a full alpha meaning it's totally opaque and then those blend together so that you can blend the color of the winter and summer together because and we're using the roster composite operation multiplying the other thing I notice about this if you're
aware that is coming out of town all this is the map projection of the this is what you would get just loading these things into town all normally so this is a bit going off of courtesy assessed but like other ways advanced chip and tips for using the tunnel is we look inside your
project out and all file and there's a whole bunch of lines that you can ignore most of them but there's 1 called SRS which is your spatial reference for the maps the and it's a big long crazy string is probably best you don't fully understand it but it is up to standard thing this these proj proj for strings are are a kind of Lingua Franca of like how you just define a map projection and if you take any other projection you want you to go online and find out what it's prod string is any change that line tunnel start rejecting for you there is I haven't I needed on you I for that and to actually use within townhall but it's not that hard to just open up that file at it so that you don't really need to understand the basically proj is telling it it's in Albers equal-area projection then there's parameters for the you know that the tangent lines in center points you catch a tweet all that stuff you want to that where you have taken hours and then change the center point and move around so once you get into understanding those prize for strings a little bit and you have to understand them entirely you can do all
kinds of things so the the other thing
that I also wanted to talk about is once were editing that project file use whatever tools you want whatever scripting language a comfortable with you can start driving tunnel from the command line by calling node wherever you tunnels installed export the name of the project and then you can tell a 2 x 4 it is a PNG with with and so 1 of so because of 1 gave me not only for time frames for each bird the but they also gave me 300 different bird species so wrote the script to just basically take our project files swap out the data files so that is pointing to the current roster and spits out a huge folder of P and G's for me so then these are and it
gets and if you go to the website you can pick any individual burden is regenerated 314 animated so and the the city the guess together putting the legend on how did that in in a tragic just on the command line to just like you know join stuff together the so insistent you start scripting your your so that they have to click the forward 16 times to start them all moving that was count anyway yeah anyway so they should also moving at some point and say I you can you can start to use it is holding all kinds of different things and I have a bunch of left over at the end of the to that and the other thank you thank without any questions microphones are there do you feel like there's anything missing from Carter's yes right now other functionality nice to have in I think sure there's a lot of things have been as having a lot of these were examples like kind of were running into a limit of what can be done on and wishing for a bit more flexibility like we'd like almost all of the values to be able to be defined programmatically and not all the mark but my understanding is that a lot of that is just limitations in terms of how courtesy assess compiles into map next such and so it sounds like you were require some improvements map and that's something that I don't know do also the ministers great what we can do and so on and yet I I think that I'm nothing specifics task the thanks so it is possible to define more complex a layout inside the labels so for example if I if I want to know representing a label so directs the always-on own truly and on 1 side the and the eventually on the other 1 and not a mesh about that particular combination but there are some pretty mean on powerful layout options you can tell it to you you give it a list of of orientations that you prefer and for example if you labeling the cities in you want them all to be positioned to the northeast as is kind of standard cartographic practice in say try that 1st and then map Nick will do that for the 1st season encounters and then when it tries to label a city that that but would overlap another label it will drop to your 2nd choice and the choice in those kinds of so those that can control we tend use a lot of but in terms of of applying a different orientation you would more likely have to add a field 2 years incoming data so that you would look for fruitful for yeah labels that have a tag horizontal and then you could apply the rule to them however you like the OK thank you you this is a really basic question that I'm realizing that I know how to implement cardo deep guy that I know how to implement Carter CSS entire milk and Carter T. B. had you implemented in a standard before you will you don't it really implement kurtosis as in a standard for because this is really just for the rules for creating tiles and creates tiles for you on the fly tunnel creates them for you in 1 batch and you upload them leaflet only can show tiles you've already made somewhere else thanks the the but but also another basic question whether the animated but gives that you're showing where those just those are just give service composites of different with those this composite of different being files that you exported from townhall running as gifts are 100 you again region yeah I just you using the the scripting of tunnel edges generated for gift for PNG is converted them yeah using ImageMagick intuitive so tunnel didn't know anything about the animation part just knew it was creating a bunch of of static images the thank you and 1 thing I noticed that statement has to very good idea mostly putting their the feature make some room good to that people can look at them notice she did you have it for the National Park match and would in general how do you find your York because your cry that she also has to like that idea how exactly yeah and we we we tried to talk to the client front but often we forget about whether or not the event OK with us open-sourcing it later so we do have a lot of projects that are not open source that we would like to come with the Park concerns in particular they were really interested in making sure obscenity open-source because in their mind they're 1 of the few well-funded Park sort and organizations and they knew that the resources they were putting into this they wanted to be reusable by other parts so in some cases putting it online is is like a selling point in this part of the plan from the beginning of the this is more like we have this is really cool we should ask them the recall not sports as the now here the we I think you
Word
Texture mapping
Computer animation
Presentation of a group
State of matter
Statement (computer science)
Similarity (geometry)
Bit
User interface
Web page
Collaborationism
Texture mapping
Computer animation
Vector space
Personal digital assistant
File format
Cuboid
Area
Overlay-Netz
Texture mapping
Graph coloring
Data type
Texture mapping
Divisor
Graph coloring
Hierarchy
Solid geometry
Computer font
Subtraction
Point (geometry)
Slide rule
Meta element
Computer animation
Term (mathematics)
Boundary value problem
Regular expression
Metropolitan area network
Tessellation
Revision control
Word
Texture mapping
Projective plane
Negative number
Cyberspace
Bit
Line (geometry)
Group action
Game controller
Texture mapping
Code
State of matter
Direction (geometry)
Multiplication sign
Zoom lens
Sound effect
Bit
Rule of inference
Power (physics)
Web 2.0
Degree (graph theory)
Summation
Digital photography
Energy level
Software testing
Error message
Texture mapping
Random number generation
Multiplication sign
Bit
Drop (liquid)
Line (geometry)
Set (mathematics)
Limit (category theory)
Computer animation
Case modding
Vector space
Angle
Graph coloring
Personal digital assistant
Operator (mathematics)
Hex map
Right angle
Multiplication
Texture mapping
Graph coloring
Operator (mathematics)
Green's function
Sound effect
Pattern language
Water vapor
Solid geometry
Data structure
Area
Texture mapping
Computer animation
Personal digital assistant
Projective plane
Light field
Conservation law
Water vapor
Acoustic shadow
Logic gate
Motion blur
Resultant
Texture mapping
Computer animation
Bit rate
Internet service provider
Direction (geometry)
Logic gate
Flow separation
Texture mapping
Computer animation
Software repository
Conservation law
Bit
Cyberspace
Information privacy
Local Group
Resultant
Computer icon
Arithmetic mean
View (database)
Direction (geometry)
Line (geometry)
Computer icon
Reading (process)
Number
Degree (graph theory)
Spreadsheet
Latent heat
Service (economics)
Computer animation
Computer file
Direction (geometry)
Planning
Bit
Field (computer science)
Subset
Overlay-Netz
Texture mapping
Computer animation
Multiplication sign
Database
Polygon
Arithmetic progression
Tessellation
Mathematics
Computer animation
Natural number
Personal digital assistant
Artistic rendering
Point cloud
Traffic reporting
Area
Building
Texture mapping
Sound effect
Line (geometry)
Field (computer science)
Technical drawing
Software bug
Vector space
Personal digital assistant
String (computer science)
Database
Volumenvisualisierung
Cuboid
Filter <Informatik>
Freezing
Social class
Area
Building
Visualization (computer graphics)
Graph coloring
Polygon
Computer network
Speech synthesis
Filter <Informatik>
Data type
Subtraction
Building
Texture mapping
Computer animation
Computer file
Projective plane
Function (mathematics)
Line (geometry)
Polygon
Device driver
Bit
Code
Row (database)
Greatest element
Texture mapping
Element (mathematics)
Water vapor
Mathematical model
Variable (mathematics)
Weight
Theory
Mathematics
Computer animation
Graph coloring
Personal digital assistant
Species
Web page
Texture mapping
State of matter
Software developer
1 (number)
Tessellation
Revision control
Word
Arithmetic mean
Roundness (object)
Graph coloring
Hypermedia
Blog
Operator (mathematics)
Alpha (investment)
Point (geometry)
Texture mapping
Mathematics
Computer file
String (computer science)
Projective plane
Bit
Line (geometry)
Parameter (computer programming)
Tangent
Twitter
Wind tunnel
Computer file
Multiplication sign
Projective plane
Software framework
Scripting language
Species
Subtraction
Formal language
Axiom of choice
Point (geometry)
Complex (psychology)
Implementation
Batch processing
Service (economics)
Computer file
Open source
Multiplication sign
Combinational logic
Client (computing)
Mereology
Rule of inference
Event horizon
Field (computer science)
Power (physics)
Fluid statics
Latent heat
Term (mathematics)
Computer configuration
Scripting language
Subtraction
Task (computing)
Standard deviation
Dialect
Polygon mesh
Projective plane
Electronic mailing list
Planning
Counting
Bit
Limit (category theory)
Functional (mathematics)
Entire function
Tessellation
Arithmetic mean
Personal digital assistant
Statement (computer science)
Website
Self-organization
Quicksort
Matching (graph theory)
Loading...
Feedback

Timings

  455 ms - page object

Version

AV-Portal 3.8.2 (0bb840d79881f4e1b2f2d6f66c37060441d4bb2e)