Skip to content

Instantly share code, notes, and snippets.

@unxed

unxed/index.html

Created October 27, 2011 16:31
Show Gist options
  • Save unxed/1320060 to your computer and use it in GitHub Desktop.
Save unxed/1320060 to your computer and use it in GitHub Desktop.
Download ZIP
sample code to show how to use tilelayer to draw tiles cached in local filesystem
Raw
index.html
<!doctype html>
<html>
<head>
<title>Сanvas-based OpenStreetMap</title>
<link rel="stylesheet" href="leaflet/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="leaflet/leaflet.ie.css" /><![endif]-->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="leaflet/leaflet.js"></script>
<script src="kothic.js"></script>
<script src="kothic-leaflet.js"></script>
<!-- Kothic style -->
<script src="osmosnimki.js"></script>
<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection">
<!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
#debug {
position: absolute;
top: 0;
right: 0;
background: rgba(255,255,255,0.7);
border: 1px solid #ddd;
padding: 15px 10px 10px;
z-index: 10000;
width: 160px;
}
#about {
font-size: 14px;
line-height: 1.3;
}
#tileperf {
font-size: 11px;
line-height: 1.3;
}
#mapnik {
margin-bottom: 15px;
}
#debug p {
margin-bottom: 10px;
}
table {
margin: 3px 0 0 0;
border-collapse: collapse;
}
table td {
padding: 0 10px 0 0;
}
tbody tr:nth-child(even) td, tbody tr.even td {
background: none;
}
#debug label {
font-weight: normal;
}
#debug hr {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="map"></div>
<!--
<div id="debug">
<p id="about">OpenStreetMap data rendered <em>on the browser</em> using <strong><a href="http://github.com/kothic/kothic-js">Kothic JS</a></strong><br /></p>
<button id="mapnik" onclick="toggleMapnik()">Compare with Mapnik</button>
<hr />
<p>
<input type="checkbox" onclick="toggleNonames()" id="nonames" /><label for="nonames"> Highlight no-names</label><br />
<input type="checkbox" onclick="toggleAddressing()" id="addressing" /><label for="addressing"> Highlight addressing</label>
</p>
<hr />
<div id="tileperf">Rendering...</div>
</div>
-->
<script>
//var mapnik = new L.TileLayer('http://tile.osmosnimki.ru/kosmo/{z}/{x}/{y}.png', {
// attribution: "Map data &copy; 2011 OpenStreetMap contributors, Imagery by <a href='http://osmosnimki.ru'>osmosnimki.ru</a>",
// maxZoom: 22
//});
var kothic = new L.TileLayer.Kothic({minZoom: 8});
kothic.setAdditionalStyle(function(style, tags, zoom, type, sel) {
//...
});
// <by_unxed>
var url_parts = window.location.toString().split('#');
var lat, lon, z;
lat = '59.9417717'; // Default: Saint-Petersburg
lon = '30.3521347';
z = 12;
if (url_parts[1] != null)
{
var url_params = url_parts[1].split('&');
for (item in url_params)
{
var pair = url_params[item].split('=');
if (pair[0] == 'lat')
{
lat = pair[1];
}
if (pair[0] == 'lon')
{
lon = pair[1];
}
if (pair[0] == 'zoom')
{
z = pair[1];
}
}
}
lat = parseFloat(lat);
lon = parseFloat(lon);
z = parseFloat(z);
var map = new L.Map('map', {
center: new L.LatLng(lat, lon),
zoom: z
});
var MyIcon = L.Icon.extend({
iconUrl: '../img/ccross.gif',
shadowUrl: '../img/ccross.gif',
iconSize: new L.Point(13, 13),
shadowSize: new L.Point(0, 0),
iconAnchor: new L.Point(7, 7),
popupAnchor: new L.Point(7, 0)
});
var icon = new MyIcon();
var marker = new L.Marker(map.getCenter(), {icon: icon});
map.addLayer(marker);
map.on('move', function(e) {
var url_parts = window.location.toString().split('#');
var params = '#lat=' + map.getCenter().lat + '&lon=' + map.getCenter().lng +
'&zoom=' + map.getZoom();
window.location = url_parts[0] + params;
if (marker != null)
{
marker.setLatLng(map.getCenter());
}
});
// </by_unxed>
kothic.on('load', function() {
var messages = kothic.getDebugMessages(),
len = messages.length,
message = messages.slice(Math.max(len - 4, 0), len).join('<br />');
// document.getElementById('tileperf').innerHTML = message;
});
MapCSS.onImagesLoad = function() {
map.addLayer(kothic);
var opts = {
tileSize: 256 * 4,
zoomOffset: 2,
minZoom: 2,
maxZoom: 22,
updateWhenIdle: true,
unloadInvisibleTiles: true,
async: true,
buffered: true
}
var cachedUrl = 'filesystem:http://2g0.ru/temporary/{x}_{y}_{z}.png',
cachedLayer = new L.TileLayer(cachedUrl, opts);
map.addLayer(cachedLayer);
};
MapCSS.loadImages("osmosnimki-maps", "osmosnimki.png");
/*
var mapnikVisible = false,
button = document.getElementById('mapnik');
function toggleMapnik() {
if (mapnikVisible) {
map.removeLayer(mapnik);
button.innerHTML = 'Compare with Mapnik';
} else {
map.addLayer(mapnik);
button.innerHTML = 'Hide Mapnik';
}
mapnikVisible = !mapnikVisible;
}
*/
function toggleNonames() {
if (document.getElementById('nonames').checked) {
kothic.setAdditionalStyle(function(style, tags, zoom, type, sel) {
var names = ['primary', 'secondary', 'tertiary', 'residential'];
if (names.indexOf(tags['highway']) != -1 && !tags['ref'] && !tags['name']) {
style['default']['color'] = 'red';
}
});
} else {
kothic.setAdditionalStyle(null);
}
}
function toggleAddressing() {
if (document.getElementById('addressing').checked) {
kothic.setAdditionalStyle(function(style, tags, zoom, type, sel) {
var s = style['default'];
if (tags.building == 'yes') {
if (tags.name || tags['addr:housename']) {
s['fill-color'] = 'blue';
} else if (tags['addr:housenumber']) {
s['fill-color'] = 'green';
} else {
s['fill-color'] = 'red';
}
}
});
} else {
kothic.setAdditionalStyle(null);
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment