unxed/index.html

## 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>
	<!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 © 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>