The basemap is designed to complement, rather than compete with, GeoJSON data layers and leverages the speed and customization of our vector maps, along with the global, street-level details of OpenStreetMap.
The overall aesthetic is kept light to serve as an unobtrusive baselayer for GeoJSON data overlays at any scale.
Place names are shown with more contrast at low zooms and less contrast at higher zooms to bring street names into focus.
Github is one of our first partners using the new custom vector tiles, something we are going to be rolling out to the larger public soon. Vector tiles make it possible for anyone to make a totally custom branded map – of the entire world – with no sacrifices in speed or device compatibility. For the cartographer, this means design iterations apply to a full global vector tileset in a matter of seconds – with no lengthy downloads, imports, or complex database queries. Watch AJ design a map in the new TileMill 2, our new design studio specifically built for vector tiles, to see how fast this can be.
The new data visualization features added to GitHub repos have exciting implications for open data hosted on GitHub. Take, for example, SmartChicago’s zip codes dataset – previously displayed as raw GeoJSON on GitHub.
Chicago zip codes GeoJSON preview, before
Chicago Zip Codes GeoJSON preview, after
Your new visualization will even include interactivity. Feature properties are added to the feature’s popup window, enabling visitors to fully interact with and explore the dataset.
Sample showing complex polygon-rendering capabilities. DC Buildings database as a GeoJSON Preview on GitHub
Make Your Map
Maps on GitHub.com support rendering EPSG:4326 projected geometry types in the GeoJSON spec, including Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, and GeometryCollection. To test out the new feature on GitHub, it’s as simple as committing a GeoJSON file to a repository.
For point geometry types, GitHub leverages our static Markers API to offer additional customization options to users.
marker-size: one of small, medium or large
marker-color: a valid RGB hex color, like #ff4444
marker-symbol: an icon ID from the Maki project or a single alphanumeric character (a-z or 0-9)
Simply add any of these attributes to the GeoJSON feature’s properties to customize the way the point is displayed on the map.