Skip to content

Instantly share code, notes, and snippets.

@skorasaurus

skorasaurus/gist:08422c8350727428ae76 Secret

Created July 19, 2013 23:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save skorasaurus/08422c8350727428ae76 to your computer and use it in GitHub Desktop.
Save skorasaurus/08422c8350727428ae76 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>HOT style legend</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css" />
<link rel="stylesheet" href="http://yohanboniface.github.io/Leaflet.EditInOSM/Leaflet.EditInOSM.css" />
<link rel="stylesheet" href="./Leaflet.TileLegend/Leaflet.TileLegend.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.js"></script>
<script src="http://mlevans.github.io/leaflet-hash/javascripts/leaflet-hash.js"></script>
<script src="http://yohanboniface.github.io/Leaflet.EditInOSM/Leaflet.EditInOSM.js"></script>
<script src="./Leaflet.TileLegend/Leaflet.TileLegend.js"></script>
<script src="./legend.js"></script>
<style type='text/css'>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; right: 0; left: 0; width:100%; }
.roads .tilelegend-map {
width: 100%;
}
.landuse .tilelegend-map {
width: 100%;
height: 60px;
}
.poi li > p, .poi li > div {
display: inline-block;
vertical-align: top;
}
.poi li {
white-space: nowrap;
overflow: hidden;
}
.poi li p {
padding: 10px;
}
</style>
</head>
<body>
<div id='map'></div>
<div id="leaflet-control-tilelegend-container"></div>
<script type="text/javascript">
var startPoint = [19.6718, -72.1304];
var map = L.map('map', {attributionControl: false}).setView(startPoint, 13),
tilelayer = L.tileLayer('http://{s}.layers.openstreetmap.fr/hot/{z}/{x}/{y}.png', {maxZoom: 20, legend: LEGEND, openLegendOnLoad: true, attribution: 'Data \u00a9 <a href="http://www.openstreetmap.org/copyright"> OpenStreetMap Contributors </a> Tiles \u00a9 HOT'}).addTo(map),
hash = new L.Hash(map);
legend = (new L.Control.TileLegend()).addTo(map);
// legend = new L.TileLegend(map, tilelayer, L.DomUtil.get('leaflet-control-tilelegend-container'), LEGEND);
// legend.open();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment