Archive for January, 2018

What are Sprites?

Posted by G.P. in Terminology on January 23, 2018

 

Sprites are a newish concept in the cartography world. I haven’t written about them here before as they didn’t really have a lot of relevance until Mapbox started using them in Mapbox GL JS. It turns out that sprites are a handy way to provide map icons to a vector tile project.

To be brief, a spritesheet is comprised of sprites, which are really just map icons. A vector tile map style displays map icons via a reference to a spritesheet. Spritesheets mush the sprites up into a very small amount of space to keep the file size small.

Here is an example of one portion of what actually is an unusually large spritesheet that will be used for icon-heavy nautical charts:

 

nautical_sprites

 

You may also see the term “spriteset,” which is referring to the two files that Mapbox GL JS spec uses to place these things on a map: the png file and the json file. The json file is really just a list of all these sprites by name and location in the png file. Something like this:

 

sprite_json_snippet

 

So you see the json file shows the location and size of each sprite and references them by name. As I’ve learned the hard way, the name is actually very important. You use the name in the json style to tell the map what to render. So for example:

 

power-tower_example

 

Here you can see that the we are symbolizing data where type=tower with a sprite that is named “power-tower-12” in the spritesheet json. However, it would have been much nicer if it had been called “tower” in the spritesheet json. Why? Because here’s another bit of that same stylesheet, where you see how it works much better:

 

variable_usage_in_icon-image

 

Here it will just go find whatever sprite in the spritesheet has a name that matches what’s in the type field (plus has the -18 on the end, which isn’t that important to know about for now but just is a way of referencing the size of the icon in case you maybe have two different icon sizes). The first way you would have to hard-code each and every icon name with whatever you are filtering for, the second way you simply name each icon/sprite the same thing as what it is referenced as in the data.

Alright, that’s it for this whirlwind intro to sprites. There’s a lot glossed-over here but serves to get us all acquainted I think.

P.S. I’ve been using TexturePacker to throw pngs and svgs into a spritesheet with a custom exporter I built for the Mapbox GL JS spec. There’s also spritezero to checkout for free.

P.P.S. Here’s a little view of TexturePacker and what looks like it should be my next corporate logo, the little green duckling.

 

green_duckling

 

No Comments

Cartonotes

Posted by G.P. in Design on January 8, 2018

Presenting a few random cartonotes from various digital maps I’ve been working on lately:

Indicate marine parks, preservation areas, and state beaches that extend into the water as transparent polygons with solid or dashed outlines. This allows the feature to be seen without giving the impression that it is solid land or some other solid feature.

State Beach

 

When symbolizing road features it can be easiest to simply use a single color for all road types. This is simple but effective.

Simple Roads

 

However, if you are interested in more complex road symbology using road casings and different colors for the different classes (e.g., highway, primary, secondary), then take care to make sure that bridges are separated and placed on top of the other road features.The feature order list will be something like this:

  1. highway bridges
  2. primary bridges
  3. secondary bridges
  4. highway, not bridges
  5. primary, not bridges
  6. secondary, not bridges

In other words, the bridges go above everything else that isn’t a bridge, even if the bridge is of type primary or secondary. You can see a secondary bridge (peach color) in the screenshot below that runs over a highway (purple color).

Complex Roads

 

It is pretty typical to use the same hue with a slightly darker value for polygon outlines, as shown in the airport outline below. Hexcolortool is handy for lightening or darkening a color by a given percentage. Of course you can also adjust the value in the HSV color system or the lightness in HSL color system to achieve this.

Typical Outine

 

Labels for features that are higher in order do not necessarily need to be darker in color. In the following example label hierarchy is achieved with larger state labels in a lighter color, while city labels are smaller but darker.

labels

 

No Comments