Photography & Video GRAPHICS

Introducing Print map maker, a tool for generating basemaps

The Los Angeles Times is releasing “Print Map Maker” as an alternative method for building print locator maps and using the same technologies that power modern web maps.

Simple print locator maps are extremely effective storytelling tools, but they can take a long time to produce. Why? Well, to start with, you have to find a reference that is licensed to use, digitize it and redraw the information, which can be a lot of work for an element that is 2 inches square.

GIS is a solid step in the right direction. And for larger maps, especially those that illustrate complex data, it’s the tool of choice. But that’s a specialized skill that doesn’t exist on every staff.

Print Map Maker allows artists and designers to create quality maps at a resolution high enough to look crisp on newsprint. We’ve been experimenting and publishing with this tool for six months and it has served us remarkably well.

Print Map Maker uses custom global map tiles similar to those used in Google Maps. Tiles were designed in Mapbox Studio to match Los Angeles Times print map styles. We then created a javascript web app that generates maps at multiple column sizes based on an address search or latitude and longitude coordinates.

Here it is in action

Advantages

  • Dramatic reduction in production time. Search for an address, adjust the map and generate a perfectly sized background map in less than a minute.
  • Roads and other features are drawn with OpenStreetMap data, which is open source, community-driven and can be republished with attribution.
  • Background maps, which match our current print styles and templates, are relatively easy to design in Mapbox Studio.
  • The required Mapbox account is free for the first style so you can try before you buy. Multiple styles require a paid subscription that starts at $5 per month.
  • Labels can be added in either a drawing program such as Adobe Illustrator or a pagination program like InDesign.
  • Works for 80% to 90% of print maps (your mileage may vary).
  • Generates a web version simultaneously.
  • Unifies design styles across print and digital products.

Challenges

  • Requires time at the beginning to set up Mapbox styles and to customize the HTML document.
  • The generated image is RGB and has to be converted to CYMK for some print production. This will require careful consideration and testing when designing styles.
  • Requires reliable registration during press run.
  • Need a duplicate print template — some maps will require vector at the source (GIS).
  • Only a limited number of map projections are supported.
  • Map data are community generated so the possibility for error exists.

How it’s done

Print Map Maker pulls in map tiles and displays them using Mapbox’s version of leaflet.js. An image is generated using leaflet-image, which appears at the bottom of the page. The image can be downloaded and converted to fit your needs. It helps to understand the conversion if you think in multiples of three. If your one-column graphic is 100 pixels wide, make the one-column div in the HTML page 300px (three times the width).

<style type="text/css" media="screen">
 #map_1col{width:330px; height:700px;}
 #map_2col{width:699px; height:1200px;}
 #map_3col{width:1065px; height:1200px;}
 #map_4col{width:1434px; height:1200px;}
 #map_web{width:1300px; height:731px;}

The tool generates a 72-ppi image, which translates to 72 dpi for print folk. When the oversized image is downloaded it can be resized (without resampling) from a 72-ppi image to 216 ppi (3x) in Photoshop. Save the resulting image and it should fit perfectly in your document where labels can be added.

Customizing map tiles

Customizing map features works the same way. If your streets are 1 point wide, make them 3 points wide in Mapbox Studio and they will scale back down in the final image. The streets in the example below end up 0.65 points wide. You can adjust the appearance at each zoom level.

[class='street']{
 [zoom>=0] { line-width: 0; }
 [zoom>=12] { line-width: 0.6; }
 [zoom>=13] { line-width: 1; }
 [zoom>=14] { line-width: 1.95; }
 [zoom>=15] { line-width: 1.95; }
 [zoom>=16] { line-width: 1.95; }
} 

A simplified set of styles is included in the github repo.

Add a data layer

As an added feature, GeoJSON data can be overlaid directly on the maps. Just about any type of GIS data can be converted to GeoJSON using online tools or Quantum GIS (free). Or you can generate your own at geojson.io.

To add boundary, line or point layers, paste the properly formatted GeoJSON into the field and click to ADD GeoJSON. It automatically applies styles for polygons, lines and points and adds them to all the maps. The tool also supports multiple layers.

Is it a better solution?

We think so — especially during breaking news events. And while not perfect, the tool has freed up time for more robust projects and digital efforts. It’s frequently faster than repurposing file maps.

Follow me on twitter @lendegroot or @latimesgraphics. Copyright © 2017, Los Angeles Times

62°