Unifying Illustrator, TileMill / CartoCSS, and GeoServer

With the release of TileMill 0.10.0, there are a series of new compositing operations available within the CartoCSS language and rendering engine. A brief review of these features seems to open up a world of new potential.

However, I have a problem. I work in an organization where our primary product is a hard-copy map. As we evolve our product line, our challenge is to produce digital, interactive, web-enabled versions of our hard-copy map content and maintain a high-level of cartographic goodness. Our cartographic team works in Adobe Illustrator, and are quite proficient in it.

The problem we face is having to do cartographic work twice in order to switch between Illustrator and the Web. There has to be a better way. We are currently using TileMill for a significant amount of our web rendering, but also intend to transition to GeoServer. This means we have .AI, CartoCSS and .SLD in the mix.

We need to keep Illustrator as our foundation for creating content, so what is the best option to extend to the web? First is the problem of converting from .AI to CartoCSS, specifically the conversion of graphic styles for each Illustrator layer to its CartoCSS equivalent. I’ve never heard of a converter tool for this and am interested to know if anyone (@opengeo @ortelius @mapbox @ericg @tmcw @springmeyer @kelso @mattpriour…anyone at Adobe) has an idea if it is feasible or the amount of effort it would take.

Second is the problem of having to convert .AI to both CartoCSS for TileMill and SLD for GeoServer. The best option would be to have GeoServer consume CartoCSS natively, that way offline tiles and web services could maintain the same cartographic styling.

I posed similar questions on Twitter to @cageyjames and @spara, and @spara’s reply got me thinking whether I was looking at this question the wrong way. Is this too old school to be considering tools like this, so I wanted to know if anyone else had been thinking about it.

Thankfully @mattpriour replied that work was already being planned at OpenGeo to implement CartoCSS for GeoServer. And @godwinsgo also replied that GeoServer already has some form of CSS style rendering. So it looks like the CartoCSS in GeoServer has a chance of being completed, that just leaves the .AI to CartoCSS conversion.

Anyone have any thoughts?

Print Friendly, PDF & Email

7 thoughts on “Unifying Illustrator, TileMill / CartoCSS, and GeoServer”

  1. Josh, Thanks for raising these questions and glad you are encouraged by the recent TileMill Compositing features.

    The needs of print/hard-copy and web are surely different. But, I’ve always felt that they could be much better bridged and that modular open source libraries could help. TileMill uses Mapnik internally, which itself is purely a cross-platform rendering library that makes few spatial assumptions and is equality suitable for desktop or web and for vector output or rasterized graphics. Just as you can write TileMill on top of Mapnik you could likely (re)write Illustrator on top of Mapnik. And it’s Mapnik where these clipping and masking and other blending algorithms were implemented – TileMill provides a graphical environment to author CartoCSS and CartoCSS itself is exposing the compositing features in mapnik via this json file: https://github.com/mapnik/mapnik-reference.

    But of course in reality we can’t re-write the perfect tool for all types of cartography from the ground up using nothing but cross-platform open source libraries. This means that writing converters between styling representations of different software is both a suboptimal workaround and a necessity.

    Writing converters between Illustrator and other styling representations should be doable. But I would be hesitant to have Illustrator as the starting point since its not really designed for managing large/spatial data and it does not have a clean separation of data and styles. Are you using MapPublisher to load data into Illustrator or are your cartographers starting in ArcGIS then exporting to Illustrator at all? I ask because it seems like a potentially more fruitful route would be to have a tool that starts with the basic parameters common to both your web and hard copy maps and then exports out starting points for those representations that could be further tweaked in the ideal tool. I’ll personally start pondering whether TileMill could offer this support – basically SVG output optimized for Adobe Illustrator, that could then be hand tweaked for hard-copy targets. QGIS also comes to mind as having potential – particularly because its such a solid environment for managing spatial data.

    1. Dane, thanks for your detailed reply, it definitely caused me to think about the problem in a different way. To answer your questions, we are currently using ArcGIS for assembling the geographic data needed for the hard-copy map, then exporting to .ai for cartographic finishing. The HIU had experimented with MapPublisher prior to my arrival, but found they liked the export method better. Since we are working with the data in Illustrator without the spatial component, perhaps it makes the task easier, as it is only the cartographic styling that has to be exported? The linkages between the data and the styles would have to be re-established back in TileMill, but there would also likely be additional functionality (like layer switching tied to zoom level settings) that would have to be applied anyway, so probably not a big deal.

      Your idea of potentially using TileMill as a map template authoring tool is also interesting. Given that ArcGIS 10.1 has native support for PostGIS (said with caveat as I haven’t used it yet) at least all the geographic data used in ArcGIS, TileMill and GeoServer could live in one spot. This would focus efforts on the export of the spatial data to a graphical Illustrator-ready format. I know we have had some issues with very large vector files (like the high-resolution international boundaries and shorelines file we are creating) not exporting correctly out of ArcGIS. We ultimately found a hack workaround, but it was painful. A clean way to build a template with basic data and basic styling that could easily export to an .ai layer, and seperately be finished in TileMill would be a good start. The efficiencies here are the key, which become even better if GeoServer can read the output CartoCSS or Mapnik styles as well.

      My only concern is the overhead cost in staff training to get them used to using new tools, which is why I thought that maintaining the ArcGIS to Illustrator route was good to keep in place, especially as I’ve watched the cartographic process and how often little tweaks are done in ArcGIS then re-exported. These tweaks usually involve a typical GIS function (attribute selection and export, clip, reproject, spatial function) which is not available in TileMill. The other factor we deal with is the challenge of accrediting new software for use on our network, no easy feat. If this SVG-export capability could be exposed through TileMill (which we plan to accredit at some point), it would make our lives significantly easier.

      At the end of the day, my goal is to maintain the HIU brand identity across multiple media, while at the same time keeping the cost to do so at a minimum. If the cartographic styling export from Illustrator to TileMill alone saved 15-20% of the time to convert to the web, and maintain the high-quality carto work, then it is a no-brainer.

      That said, if I’m not crazy, perhaps the optimal (hypothetical) process starts with:
      1) template-building in TileMill (or QGIS), using data stored in PostGIS
      2) this template is exported as SVG layers to Illustrator for finishing, and since the data is in PostGIS, ArcGIS could be used for additional geographic level processing and the results re-exported
      3) the cartographic styles from Illustrator are then exported back to CartoCSS where additional cartographic stylings are applied that take advantage of the web environment
      4) MBTiles are rendered from the final CartoCSS, which can also be fed into GeoServer for dynamic web services

      Wow, maybe too complex?

  2. Hi Josh,

    I’m in a similar position to you, my workflow is data manipulation and editing in ArcGIS or QGIS, import into Illustrator via MAPublisher, then style and create hardcopy map here for export to pdf and finally to printer for finishing. Converting this Illustrator artwork to TileMill is the problem, as I want to as closely as possible keep my final print design replicated in TileMill. Now of course the scale will be variable and the projection will be completely different in TileMill as was in the print map, so there is the first hurdle. Other issues to overcome are that text sizes need to be larger for screen than in print, as too line weights, so it will never be a straight conversion from print to digital.

    Like you, I want to be able to export my Illustrator graphic styles in some form of CSS that I can cut and paste into TileMill, so that I don’t have to reinvent the wheel every time I create a new map. Illustrator does allow you to export a file to CSS (through Save for Web and Devices), but not in a flavour suitable for TileMill.

    Saving a file as SVG and opening this in a text editor allows you to extract colour swatches as code, or alternatively you can download Adobe’s html 5 pack for CS5 that allows you to export individual object appearances (from the Appearance palette) as CSS. All of this is tedious and no substitute as being able to collectively export your Graphic Style library, Character Styles library, and Brushes library as CSS. Hopefully Adobe will address this in time. having the ability to export your symbols library as individual sag files would also be a big time-saver.

    I’m doing research at the moment as to how designs can be ported from one media to another, but it’s slow going. Will follow your blog to see how you progress, and am happy to share any of my findings when I’m finished.


  3. Hey Josh,

    Has anything changed since you asked these questions? I am also looking for a way to unify print and web production workflows at our company/newspaper.

    Looking forward to your answer,

Leave a Reply

Your email address will not be published. Required fields are marked *