svg-mapper
Version:
Tool to slice big, annotated SVG into WebMercator tiles
55 lines (53 loc) • 2.19 kB
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title></title>
<link rel="stylesheet" type="text/css" href="http://service.ihned.cz/js/tooltip/v1.1.2.css" />
<link rel="stylesheet" href="http://service.ihned.cz/js/leaflet/v0.6.4.css" />
<script src='http://service.ihned.cz/js/jquery.min.js'></script>
<script src='http://service.ihned.cz/js/leaflet/v0.6.4.js'></script>
<script src='http://service.ihned.cz/js/leaflet/utfgrid.min.js'></script>
<script src="http://service.ihned.cz/js/tooltip/v1.1.2.min.js"></script>
<style>
#map {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
width: 100%;
}
</style>
</head>
<body>
<div id="map">
</div>
<script>
var tooltip = new Tooltip();
var map = L.map('map', {
minZoom: 6,
maxZoom: 6,
zoom: 6,
center: [49.7, 15.5]
});
var svgMapper = L.tileLayer('./output/{z}/{x}/{y}.png').addTo(map);
var utfGrid = new L.UtfGrid('./output/{z}/{x}/{y}.json', {
useJsonP: false
});
map.addLayer(utfGrid);
var osmImagery = L.tileLayer("http://ihned-mapy.s3.amazonaws.com/desaturized/{z}/{x}/{y}.png", {opacity: 0.3, attribution: 'map data © OpenStreetMap contributors, imagery <a target="_blank" href="http://ihned.cz">IHNED.cz</a>'}).addTo(map);
L.control.layers(null, {
"SVG Mapper output": svgMapper,
"OSM Imagery": osmImagery
}).addTo(map);
utfGrid.on('mouseover', function (e) {
var str = e.data;
tooltip.display(str);
});
utfGrid.on('mouseout', function (e) {
tooltip.hide();
});
</script>
</body>
</html>