Skip to content

Instantly share code, notes, and snippets.

@maptastik
Created December 31, 2015 06:16
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save maptastik/4378c5dad39b5c5cc241 to your computer and use it in GitHub Desktop.
Acetate Alternative?

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

  1. Host your own version of Acetate using the stylesheets, data, and instructions in the Acetate repo on GitHub (link)
  2. Try to recreate it using something like Mapbox Studio.
  3. 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.

<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment