Skip to content

Somewhat comprehensive list of cartography / map / web design resources

Notifications You must be signed in to change notification settings

rgdonohue/resources

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 

Repository files navigation

Web cartography, GIS, and mapping design resources

Over the years, I have been collecting a list of my go-to resources for cartography and web design, including everything from selecting colors to finding data to helpful tutorials (though this list is by no means comprehensive). Feel free to submit a pull request or email me at [email protected] if you have suggestions of resources to add to this list or notice that something is outdated.

Table of Contents


General mapping

Web mapping

  • CartoDB: Create web maps easily. Especially useful for large datasets.
  • D3.js: A JavaScript library to create powerful online visualizations. Often used for web mapping.
  • Leaflet: JavaScript library for making mobile-friendly, interactive web maps.
  • TurfJS: GIS for web maps
  • DropChop: In-browser application to perform basic GIS operations
  • awesome-spatial: Links to various (awesome) GitHub repos that have some sort of spatial/geo/web mapping use
  • Leaflet providers: Previews free map tiles that you can use on your Leaflet map, with instructions on how to include it in your code.

Basemaps and Vector Tiles

Mapping frameworks and templates

  • Storymap.js: a javascript library for storytelling with web maps, maintained by Cartography and Geovisualization Group at Oregon State University.
  • Storytelling: template designed by Mapbox to accelerate building out a "scrollytelling" map story using Mapbox styles and GL JS.

Routing

Color

  • chroma.js
  • Chroma.js Color Palette Helper
  • ColorBrewer: Cartographer's go-to resource for selecting colors for thematic maps, especially choropleth maps. Can filter based on whether color scheme is optimized for printing, colorblindness, etc.
  • 0to255: One of my favorite color resources. Pick a color, and 0to255 will show you every shade of that color.
  • Adobe Color: Create your own color scheme, up to 5 colors. Explore others' color schemes.
  • Paletton: Create your own color scheme.
  • HEX to RGB Converter: Convert between HEX and RGB color values. Super simple interface.
  • Selecting equidistant perceived colors: Great blog post and tool(s) to select colors that are evenly spaced, especially good for choropleth maps
  • i want hue: Generate palettes of optimally distinct colors. This is great for making sure colors will look different enough on a map to distinguish colors.
  • D3 Curvy: Design your own color scheme for choropleth maps based on ColorBrewer.
  • ColorHexa: Enter in a color value and get pretty much any information you would ever want about the color, including shades, tints, and tones of that color, as well as suggested color schemes that include that color. Also includes a color gradient generator, where you can type in the values of two colors and it will generate a gradient between those colors.
  • PaletteFX: Create a color scheme from an image that you upload.
  • Color Ramp Creator: Create color schemes of 4, 8, or 16 colors. Fun to play with.
  • Color Calculator: Choose an initial color, select the type of color scheme you're looking for, and get some ideas.
  • ColorClaim: A color picking site by Tobias van Schneider to help with picking color schemes. "All I do is collect my favorite color combinations on one big page. Usually these combinations are very subtle, one main and one accent color.";
  • simple colors: an elegant and minimalistic color palette. It provides a set of colors optimized to be used in UI projects.
  • color supply
  • A Bivariate Choropleth Palette Generator

Typography

  • Fontelico
  • DaFont: Free, downloadable fonts.
  • FontSquirrel: Free, downloadable fonts.
  • Google Fonts: Free fonts that can be used for webpages.
  • TypeKit: Download fonts specifically for using with Adobe's software suite
  • TypeBrewer: Looks at different attributes of selecting typography for maps.
  • 8 typography tips: General typography tips from Adobe
  • Flipping Typical: Allows you to see and test out all of the fonts installed on your computer by typing in a specific phrase and showing you what it looks like in the various fonts
  • Top 30 free open-source web fonts: Great collection of free fonts for download/web use

Software

  • QGIS: Open-source desktop GIS software. Can do most of what ArcMap can do, for free. Often it does it much, much faster.
  • Mapbox: Use Mapbox online to design basemaps; Mapbox Studio is desktop software for designing map tiles that can be uploaded and hosted on Mapbox. Check out their Getting Started Guides or Help section for more information.
  • Indiemapper: Make thematic maps online. Bring in your own or use provided data.
  • Map Stack by Stamen: Create quick map snapshots of anywhere, with the ability to customize colors and which labels/lines to include.
  • HUGEpic: Create a slippy map from an image. This can be used when you want to be able to pan and zoom on a static map.
  • Kosmtik: Open-source MBTiles software.
  • Pyramid Shader: An application for visualizing terrain data

Databases

Data Sources

Data wrangling, transformation, and manipulation

  • Jeezy: a JavaScript library for manipulating data. It provides lots of useful functions and has no dependencies, so it won't add a lot of code to your project.
  • AddFIPS : AddFIPS is a tool for adding state or county FIPS codes to files that contain just the names of those geographies.

Data scraping

  • All the Places: A project to extract GeoJSON from the web focusing on websites that have 'store locator' pages.

Textures / Patterns

Images

  • Placeholder: API for querying images of various sizes with custom text and colors. Good for mockups of layout

Icons

Geocoding

Projections

Tutorials / Guides / Forums

Blogs

  • Mapping blogs, woo! Publicly editable list of blogs about "maps, cartographic design, mapping technology, and a few related subjects that may include maps."; Initially created by Andy Woodruff.

Conversion tools

  • Geojson.io: Convert to/from GeoJSON. Prep your data for making web maps. I've found it particularly useful for converting to/from CSVs.
  • ToGeoJSON: Convert from KML to GeoJSON.
  • csv2geojson: Convert from CSV to GeoJSON.
  • leaflet-omnivore: Parses different file format to add to Leaflet map.
  • ai2html: Converts from Adobe Illustrator document to HTML
  • prj2epsg: Converts a .prj projection file to EPSG number
  • The Distillery: Convert files to TopoJSON.
  • Ogre: Convert to/from GeoJSON/shapefile.
  • ogr2ogr: Great blog post on using ogr2ogr to convert to GeoJSON.

Site generators

  • Gatsby: static site generator (works well with React)

Hosting

WYSIWYG mapping

  • MapHub: simple interface for making and embedding web maps.

SQL

Git

Raster

  • GeoTiff.js: Library to parse TIFF files for visualization or analysis, usable in both the browser and node.js applications.

UI/UX

Miscellaneous

Tutorials

About

Somewhat comprehensive list of cartography / map / web design resources

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published