No description, website, or topics provided.
JavaScript HTML CSS

README.md

web-map-maker

 _     _  _______  _______    __   __  _______  _______    __   __  _______  ___   _  _______  ______   
| | _ | ||       ||  _    |  |  |_|  ||   _   ||       |  |  |_|  ||   _   ||   | | ||       ||    _ |  
| || || ||    ___|| |_|   |  |       ||  |_|  ||    _  |  |       ||  |_|  ||   |_| ||    ___||   | ||  
|       ||   |___ |       |  |       ||       ||   |_| |  |       ||       ||      _||   |___ |   |_||_ 
|       ||    ___||  _   |   |       ||       ||    ___|  |       ||       ||     |_ |    ___||    __  |
|   _   ||   |___ | |_|   |  | ||_|| ||   _   ||   |      | ||_|| ||   _   ||    _  ||   |___ |   |  | |
|__| |__||_______||_______|  |_|   |_||__| |__||___|      |_|   |_||__| |__||___| |_||_______||___|  |_|

mapmaker-screenshot

We make a lot of maps at the Los Angeles Times. So we made this tool to help us make them faster. It uses Mapzen's Tangram mapping engine to render OpenStreetMap data as vector tiles. It then bakes out your map into an static image.

This tool is still very much a work in progress — please report any bugs you find using GitHub issues!

Try it out on the demonstration page.

Getting started

You don't need much to get up and running. Download this repo and make a config.js file (we provided a template here)

It should look like this:

var configOptions = {
    'bingAPI': 'Your API here',
    'attribution': 'Author name, '
}

You should also get a Mapzen key and update it int he map-styles.yaml file.

Then you're ready to run the mapmaker. The easiest way is to fire up a simple python server (obviously you'll need python) with this command:

python -m SimpleHTTPSever 8000

The app will be hosted at localhost:8000 by default.

What you need to know

Because we've developed this as an internal tool for use at the Los Angeles Times, it's really geared toward our use as far as styles and workflow. But it should be customizable and we're open to suggestions that would help make it better for others to use, too.

Chrome is the only supported browser right now.

Also check the issues tab.

Web vs. Print

We make maps for the internet and the print edition. We've currently darkened the colors for our print styles a bit. And some of the roads get larger too. We also handle all print labels in Adobe Illustrator (for now) so the "print" style creates and unlabeled map.

"PX" stands in for "pixel" and "col" stands in for "column" of which the Los Angeles Times prints six per page.

Make this better

Have any ideas? File an issue, fork this repo or contact jon@latimes.com with thoughts, concerns or questions.