Puedes construir teselas para vuestro visor web con MapTiler, y estas teselas no se limitar solo a mapas similares a los de OSM, sino que puede ser cualquier tipo de imagen que queramos.
En este caso usaremos un mapa en papel sobre: Sandusky, Ohio en 1898
La información para ambos métodos la he sacado del siguiente post: Zoomable image with Leaflet
Para crear estas teselas se puede usar la aplicación que viene con gdal: gdal2tiles.py pero no puedo tocar algunas en este pc para hacerlo funcionar y he tirado a lo más sencillo.. En el post que comento anteriormente explican paso por paso este método, la forma sería similar a estos dos comandos:
gdal_translate -of JPEG -out size 16384 16384 eso1119a.jpg eso.jpg gdal2tiles.py -p raster -z 0-6 -w none eso.jpg
La ventaja de este método es que las imágenes no tendrán marca de agua.
Así que.. usaremos Maptiles y lo primero es descargar la aplicación. Nos será suficiente con la versión gratuita. La abrimos y nos aparecerá el siguiente menu:
Daremos a raster tiles para crear las teselas, seleccionando la imagen que queremos, la descargada arriba sobre la ciudad de Ohio:
Los niveles de zoom que crearemos serán de 0 a 6 ya que el mapa tiene bastante calidad. Cuanto más niveles seleccionemos más nos ocuparan las carpetas de teselas y más zoom podremos hacer sobre el mapa o imagen. Cuidado que a ciertos niveles de zoom, ampliar un nivel más o menos, puede aumentar considerablemente el espacio de disco requerido.
¡Y listo! Haciendo el post me he dado cuenta que ya te genera directamente una web con la cual poder abrir el visor Leaflet y ver las teselas que has creado. Si quieres editar la configuración de este visor, solo tienes que abrir el fichero leaflet.html y editar lo que se encuentra entre los encabezados de script y /script , tal y como hicimos en el anterior post: Ampliando nuestro visor web.
<!DOCTYPE html>
<html>
<head>
<title>teselas</title>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script>
function init() {
var mapMinZoom = 0;
var mapMaxZoom = 6;
var map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
crs: L.CRS.Simple
}).setView([0, 0], mapMaxZoom);
var mapBounds = new L.LatLngBounds(
map.unproject([0, 4864], mapMaxZoom),
map.unproject([10240, 0], mapMaxZoom));
map.fitBounds(mapBounds);
L.tileLayer('{z}/{x}/{y}.png', {
minZoom: mapMinZoom, maxZoom: mapMaxZoom,
bounds: mapBounds,
attribution: 'Rendered with <a href="http://www.maptiler.com/">MapTiler</a>',
noWrap: true,
tms: false
}).addTo(map);
}
</script>
<style>
html, body, #map { width:100%; height:100%; margin:0; padding:0; }
</style>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
Vemos como en L.tileLayer(), en vez de asignarle un servidor externo como hicimos usando uno de OpenStreetMap, ahora utiliza uno local, haciendo referencia a las teselas que hemos creado y que se encuentran en esa misma carpeta.
Quedando nuestro visor web:
Puedes descargarte el resultado de este proyecto para probarlo en tu ordenador.
¿Y si estos mapas en papel vinieran georeferenciados? ¿Se podría crear un mapa basado en un mapa en papel? Pues intentaremos verlo en otro post, se queda ahí pendiente.
másquesig 