Creando un mapa no geográfico con LeafletJS

Podemos crear un mapa que no sea de la tierra usando Leaflet, puede ser de un edificio, de un mapa de un video juego, o de cualquier cosa que necesitemos.

Para crearlo solo tenemos que usar la función L.CRS.Simple de Leaflet, la cual funciona así:

Despues de crear el DIV contener del mapa en nuestro archivo HTMl, pasamos a crearlo, lo primero que necesitamos es inicializarlo de esta forma:

var map = L.map('mapid', {
 crs: L.CRS.Simple,
 minZoom: -2,
 maxZoom: 1
});

Donde se indica que se usara L.CRS.Simple y se indican los limites permitidos para que el usuario se acerque y aleje del mapa. Después indicamos los limites del mapa, el cual es el tamaño en pixeles de la imagen que usemos, para que no se distorsione:

var bounds = [[0, 0],[4030, 4194]];

Paso siguiente indicamos la imagen que se usara para el mapa:

var image = L.imageOverlay('img/aden2.jpg', bounds).addTo(map);

Y para finalizar indicamos donde debe iniciar el mapa, en que posición y con que nivel de zoom:

map.setView([349, 1829], 0);

Si queremos hacer que el mapa regrese al inicio si el usuario lo mueve fuera de los limites podemos crear una función como esta:

var getBounds = function () {
return new L.LatLngBounds([-250, -250],[4250, 4450]);
};

var onViewReset = function (e) {
map.setMaxBounds(getBounds());
map.off('viewreset', onViewReset);
};

map.on('viewreset', onViewReset);

map.fitBounds(getBounds(), {
reset: true
});

Algo muy util que podemos hacer es crear una función para que muestre en la consola la posición donde hagamos click, para sacar las coordenadas personalizadas de la posición, para crear por ejemplo marcadores:

var popup = L.popup();
function onMapClick(e) {
 console.log(`${e.latlng.lat}, ${e.latlng.lng}`);
}
map.on('click', onMapClick);

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s