roblabs/xyz-raster-sources

A collection of `xyz` raster sources for use in MapKit, QGIS, Mapbox/MapLibre Styles and various web mapping tools.

XYZ Raster Tiles Sources

A collection of xyz raster tiles for use in maps built for mobile devices, QGIS and MapLibre Styles. This repo gives sample URLs to various raster xyz sources.

Created by RobLabs.com in Summer 2020 for use in production of our #mapsForNonProfits.

---

Sample Tile	XYZ
	https://tile.openstreetmap.org/{z}/{x}/{y}.png Style: https://roblabs.com/xyz-raster-sources/styles/openstreetmap.json Usage & License: OpenStreetMap
	https://naturalearthtiles.roblabs.com/tiles/natural_earth_cross_blended_hypso_shaded_relief.raster/{z}/{x}/{y}.png Style: https://roblabs.com/xyz-raster-sources/styles/naturalearthtiles.json Usage & License: Natural Earth Tiles
	https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg Style: https://roblabs.com/xyz-raster-sources/styles/stamen-multi-rasters.json Usage & License: Stamen watercolor
	https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg Style: https://roblabs.com/xyz-raster-sources/styles/stamen-multi-rasters.json Usage & License: Stamen terrain
	https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png Style: https://roblabs.com/xyz-raster-sources/styles/stamen-multi-rasters.json Usage & License: Stamen toner
	https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x} Style: https://roblabs.com/xyz-raster-sources/styles/arcgis-world-imagery.json Usage & License: ArcGIS World Imagery
	https://gis.apfo.usda.gov/arcgis/rest/services/NAIP/USDA_CONUS_PRIME/ImageServer/tile/{z}/{y}/{x} Style: https://roblabs.com/xyz-raster-sources/styles/usda-naip.json Usage & License: USDA NAIP

---

Mapbox or MapLibre Style

Tiles for use in Mapbox or MapLibre for mobile or web applications, can easily be configured. See the styles directory for sample style JSON. These styles follow the TileJSON v3.0.0 specification.

You can also find several styles hosted by MapLibre.org. See https://github.com/maplibre/demotiles.

See the Mapbox documentation or MapLibre documentation on details for how to add raster tiles to your style.

---

TileJSON.io

https://www.azavea.com/blog/2019/03/04/introducing-tilejson-io

---

CodePen

See examples of several style.json in CodePen.io.

---

GeoJSON.io

geojson.io is a quick, simple tool for creating, viewing, and sharing maps.

You can use geojson.io to add in xyz raster tiles:

• Hover over Meta > Add map layer
  • You will prompted for a Layer URL, you can add in one of the xyz layers from above
  • Add in a Layer name
  • You can toggle layers via the checkboxes in the lower right hand corner

---

QGIS

These tiles can easily be pulled into QGIS. From the QGIS documentation site:

You can add other services that use the XYZ Tile protocol by choosing New Connection in the XYZ Tiles context menu (right-click to open).

---

TileServer GL

You can inspect “Vector and raster maps with GL styles” before they are installed onto production or mobile by using TileServer GL.

# Create a short alias for TileServer GL
alias tsgl="docker run --rm -it -v $(pwd):/data -p 8080:8080 maptiler/tileserver-gl"
tsgl -v
tsgl -h

---

MapKit with TileOverlay

Swift

See the details for iOS & tvOS at https://developer.apple.com/documentation/mapkit/mktileoverlay.

// coordinate the loading and management of the tiles
// https://developer.apple.com/documentation/mapkit/mktileoverlay
let urlTemplate = "https://tile.openstreetmap.org/{z}/{x}/{y}.png"
let overlay = MKTileOverlay(urlTemplate: urlTemplate)
overlay.canReplaceMapContent = true
overlay.minimumZ = 8
overlay.maximumZ = 19
overlay.tileSize = CGSize(width: 256, height: 256)
// handle the actual drawing of the tiles on the map
// https://developer.apple.com/documentation/mapkit/mktileoverlayrenderer
func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
if overlay is MKTileOverlay {
let renderer = MKTileOverlayRenderer(overlay:overlay)
return renderer
}
return MKTileOverlayRenderer(tileOverlay: overlay as! MKTileOverlay)
}

JavaScript

See the details for MapKit JS: https://developer.apple.com/documentation/mapkitjs/tileoverlay

See a live demo of MapKit JS with an OpenStreetMap tile overlay: https://roblabs.com/projects/mapkitjs/Tile-Overlay.

var map = new mapkit.Map("map");
// https://developer.apple.com/documentation/mapkitjs/mapkit/tileoverlay/2974035-mapkit_tileoverlay
const openstreetmap = "https://tile.openstreetmap.org/{z}/{x}/{y}.png"
var customOverlay = new mapkit.TileOverlay(openstreetmap);
// https://developer.apple.com/documentation/mapkitjs/tileoverlayconstructoroptions
customOverlay.minimumZ = 2;
customOverlay.maximumZ = 16;
customOverlay.opacity = 1.0;
customOverlay.data = {
lang: mapkit.language
};
map.addTileOverlay(customOverlay);

---

Example of XYZ rasters in iOS

xyz-raster-sources's Issues

How to Add a layer (GIF animation)

---

Add Mapbox Styles for XYZ rasters

Commit 2bcc871 adds Mapbox styles for some of the XYZ rasters.

See the full list at roblabs/xyz-raster-sources/styles, or you can use these hosted styles in your application.

• https://raw.githubusercontent.com/roblabs/xyz-raster-sources/master/styles/naturalearthtiles.json
• https://raw.githubusercontent.com/roblabs/xyz-raster-sources/master/styles/tileservice-charts-noaa-gov.json
• https://raw.githubusercontent.com/roblabs/xyz-raster-sources/master/styles/arcgis-world-imagery.json
• https://raw.githubusercontent.com/roblabs/xyz-raster-sources/master/styles/mapbox-satellite.json
• https://raw.githubusercontent.com/roblabs/xyz-raster-sources/master/styles/stamen-multi-rasters.json

---

Reflect that Stamen maps tiles are now hosted by Stadia Maps

See http://maps.stamen.com/stadia-partnership/.

Basically you'd just need to change most of the URL prefixes I'm not sure how you want to communicate this exactly, but I'm happy to provide assistance if desired.

One thing to note is that you should probably not directly link to the tiles, since they require either domain-level or API key auth. I'd suggest just committing a single tile of each to the repo as an example, or maybe linking to the OSM wiki thumbnails (not sure of their link policy though so check on that!): https://wiki.openstreetmap.org/wiki/List_of_OSM-based_services

Default style json not found

Hi Roblabs, Loving your work,
I noticed that on your codepen here https://codepen.io/roblabs/pen/JjXXMLz
the default style.json file is not loading. It's 404 not found at the URL specified

https://raw.githubusercontent.com/roblabs/xyz-raster-sources/master/style.json