maptastik/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Access to the wonderful Acetate tileset was lost when ESRI shut down GeoIQ. There are a few ways one might deal with this

Host your own version of Acetate using the stylesheets, data, and instructions in the Acetate repo on GitHub (link)
Try to recreate it using something like Mapbox Studio.
Run another tileset through a tile filter like TileLayer.Grayscale.js

This map demonstrates the third option. In this map, MapQuest's tiles are run through TileLayer.Grayscale.js to create a grayscale version of their tiles. A variety of tilesets can be found on Leaflet-providers preview.

  
## index.html
<html>
	<head>
		<title>Acetate Alternative?</title>
		<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
		<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
		<style>
			body {
				margin:0;
				padding:0;
			}
  			#map {
  				position:absolute;
  				top:0;
  				bottom:0;
  				width:100%;
  			}
		</style>
	</head>
	<body>
		<div id="map"></div>
		<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
		<script src="https://cdn.rawgit.com/Zverik/leaflet-grayscale/master/TileLayer.Grayscale.js"></script>
		<script>
			var map = L.map('map').setView([38.046391, -84.497062], 13);
			L.tileLayer.grayscale('http://otile{s}.mqcdn.com/tiles/1.0.0/{type}/{z}/{x}/{y}.{ext}', {
				type: 'map',
				ext: 'jpg',
				attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
				subdomains: '1234'
			}).addTo(map);
		</script>
	</body>
</html>
	<html>
	<head>
	<title>Acetate Alternative?</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
	<style>
	body {
	margin:0;
	padding:0;
	}
	#map {
	position:absolute;
	top:0;
	bottom:0;
	width:100%;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
	<script src="https://cdn.rawgit.com/Zverik/leaflet-grayscale/master/TileLayer.Grayscale.js"></script>
	<script>
	var map = L.map('map').setView([38.046391, -84.497062], 13);
	L.tileLayer.grayscale('http://otile{s}.mqcdn.com/tiles/1.0.0/{type}/{z}/{x}/{y}.{ext}', {
	type: 'map',
	ext: 'jpg',
	attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
	subdomains: '1234'
	}).addTo(map);
	</script>
	</body>
	</html>