Teselas vectoriales ilimitadas basadas en datos de OpenStreetMap, listas para integrar en MapLibre GL o Leaflet. Sin clave API, sin cuotas ni facturas sorpresa.
La mayoría de los proveedores de teselas te dan la bienvenida con créditos gratuitos. Pero cuando crece el tráfico, la facturación por uso convierte un pequeño experimento en una factura considerable: contadores poco claros, cargos por cada carga del mapa y tarifas que requieren una hoja de cálculo para entenderlas. Google Maps y Mapbox funcionan así. Lo que parecía gratis acaba siendo un gasto que tu proyecto quizá no pueda asumir.
LFMaps es diferente. Gratis significa gratis: sin sorpresas, sin límites, sin facturas.
Lo que necesitas para publicar un mapa. Sin nada que sobre.
Introduce la URL de las teselas y listo. Sin registro, sin token de acceso, sin panel de control.
Sin cuotas, sin límites de uso ni contadores de cargas de mapas. Usa lo que necesites.
Coste cero con cualquier nivel de tráfico: diez visitas al mapa o diez millones.
No rastreamos a tus visitantes ni instalamos cookies. Tu política de privacidad sigue siendo igual de breve.
Ideal con MapLibre GL, también compatible con Leaflet y React
<link href="https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.css" rel="stylesheet" />
<script type="importmap">
{ "imports": { "maplibre-gl": "https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.mjs" } }
</script>MapLibre GL v6 solo se distribuye como módulos ES, por lo que estos ejemplos lo cargan mediante un mapa de importaciones y un script de tipo módulo.
npm i maplibre-gl@^6Después impórtalo en tu JavaScript:
import * as maplibregl from 'maplibre-gl'
import 'maplibre-gl/dist/maplibre-gl.css'
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url'
maplibregl.setWorkerUrl(workerUrl)Al empaquetar el código, MapLibre no puede localizar su worker por sí solo. Este es el ejemplo para Vite; para webpack y otros empaquetadores, consulta la Guía de instalación de MapLibre.
<div id="map" style="width: 100%; height: 500px"></div>
<script type="module">
import * as maplibregl from 'maplibre-gl'
const map = new maplibregl.Map({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
})
</script>Mejorar las Core Web Vitals suele mejorar el posicionamiento en buscadores
Usa este cargador para aligerar la primera renderización:
// Ejemplo para Vite; consulta la guía de instalación para otros empaquetadores
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Carga MapLibre GL y su CSS bajo demanda cuando se necesitan
* @returns {Promise} El módulo de MapLibre GL
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* Carga el CSS de MapLibre GL de forma dinámica
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* Clase para cargar MapLibre GL bajo demanda
* Proporciona una API similar a maplibregl, pero con carga bajo demanda
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Crea una instancia de mapa y carga MapLibre GL bajo demanda si es necesario
* @param {Object} options - Opciones de configuración del mapa
* @returns {Promise} Una instancia de Map de MapLibre GL
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Obtiene la biblioteca MapLibre GL y la carga bajo demanda si es necesario
* @returns {Promise} La biblioteca MapLibre GL
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Ejemplo de uso:
import MapLibreLoader from './maplibre-loader.js';
// Crear el mapa solo cuando sea necesario (p. ej., al desplazarse o al interactuar)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Añadir controles, marcadores, etc.
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}Para conocer las funciones avanzadas y la API completa, consulta la Documentación de MapLibre GL JS
Leaflet no puede leer teselas vectoriales por sí solo; combínalo con el complemento maplibre-gl-leaflet:
<link href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" rel="stylesheet" />
<script type="importmap">
{ "imports": {
"leaflet": "https://unpkg.com/leaflet@1.9.4/dist/leaflet-src.esm.js",
"maplibre-gl": "https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.mjs"
} }
</script>
<script type="module">
import * as L from 'leaflet'
import { maplibreGL } from 'https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.1.4/dist/leaflet-maplibre-gl.mjs'
const map = L.map('map').setView([48.6937, 6.1844], 12)
maplibreGL({
style: 'https://data.lfmaps.fr/styles/bright',
}).addTo(map)
</script>El complemento es compatible con Leaflet 1.x: las mismas teselas gratuitas, sin facturas.
npm i react-map-gl maplibre-gl@^6import Map from 'react-map-gl/maplibre'
import { setWorkerUrl } from 'maplibre-gl'
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url'
import 'maplibre-gl/dist/maplibre-gl.css'
setWorkerUrl(workerUrl)
export default function MyMap() {
return (
<Map
initialViewState={{ longitude: 6.1844, latitude: 48.6937, zoom: 12 }}
style={{ width: '100%', height: 500 }}
mapStyle="https://data.lfmaps.fr/styles/bright"
/>
)
}Sin mapbox-gl ni token de acceso: react-map-gl se comunica directamente con MapLibre GL.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Teselas servidas desde una CDN para que los mapas aparezcan en un instante
99,9% de disponibilidad
Datos de OpenStreetMap que cubren todo el mundo
Unas líneas de MapLibre GL o Leaflet y tu mapa ya está en marcha
El mismo resultado: un mapa en tu página. Una factura muy distinta a final de mes.
La limitación, con transparencia: LFMaps ofrece teselas de mapas y nada más. La geocodificación, el cálculo de rutas y las indicaciones giro a giro no forman parte del servicio.
Sí. No hay plan de pago, ni tarjeta de crédito, ni facturas por uso, sea cual sea tu tráfico. LFMaps se financia como proyecto personal, al igual que las demás herramientas gratuitas de esta página.
No. No tienes que registrarte ni renovar ningún token. Usa una URL de LFMaps como estilo de tu mapa y listo.
No hay cuotas ni un límite fijo de peticiones. Solo te pedimos que no descargues masivamente todo el conjunto de teselas. El uso normal de un mapa en un sitio web o una aplicación está permitido.
Sí. MapLibre GL renderiza las teselas vectoriales de forma nativa y es nuestra recomendación, pero Leaflet también funciona con el complemento maplibre-gl-leaflet.
De OpenStreetMap, a través de OpenFreeMap. La comunidad crea estos datos, y precisamente por eso pueden seguir siendo gratuitos.
Sí, también en proyectos comerciales. Mantén visible en el mapa la atribución a OpenStreetMap: es el único requisito.
No. No recopilamos datos personales ni instalamos cookies en las solicitudes de teselas, así que añadir un mapa no añade nada a tu política de privacidad.
Estos servicios ofrecen un plan gratuito y luego cobran por cada carga del mapa cuando creces. LFMaps no tiene contador: el precio es cero tanto con diez visitas al mapa como con diez millones.
Crea paletas de colores armoniosas
Generador de contraseñas gratuito
Acortador de URL personalizadas, gratis
Códigos QR que puedes editar más adelante
Imágenes listas para publicar en redes sociales
Desminifica tu código
Genera archivos .gitignore fácilmente
Sistema de reservas para restaurantes
Programa de reservas para peluquerías
Generador de favicons gratuito
Cartel de alérgenos gratuito para restaurantes
Comparte Markdown con estilo
La carta de tu restaurante en línea, gratis