Besplatne kartografske pločice za vaše web-stranice i aplikacije Brzo. Besplatno. Zauvijek.

Neograničene vektorske pločice temeljene na podacima OpenStreetMapa, spremne za MapLibre GL ili Leaflet. Bez API ključa, kvota i neočekivanih računa.

Pokreće OpenFreeMap 🚀

Isprobajte kartu Pročitajte dokumentaciju

Zašto kartografske pločice postaju skupe (a LFMaps ne)

Većina pružatelja kartografskih pločica privuče vas besplatnim kreditima. Zatim promet poraste, a naplata prema potrošnji pretvori mali pokus u pravi račun — uz nejasne obračune, troškove koji rastu sa svakim učitavanjem karte i cjenike za koje vam treba proračunska tablica. Tako rade i Google Maps i Mapbox. Ono što je djelovalo besplatno postaje trošak koji vašem projektu možda ne treba.

LFMaps je drukčiji. Besplatno znači besplatno — bez iznenađenja, ograničenja i računa.

Zašto odabrati LFMaps za besplatne kartografske pločice?

Sve što trebate za objavu karte. Bez suvišnih dodataka.

API ključ nije potreban

Unesite URL pločica i krenite. Bez registracije, pristupnog tokena i nadzorne ploče.

Neograničen broj zahtjeva za pločice

Bez kvota, skrivenih ograničenja i naplate po učitavanju karte. Koristite koliko trebate.

Zauvijek besplatno

Bez troškova, bez obzira na promet — deset prikaza karte ili deset milijuna.

Bez praćenja i prikupljanja podataka

Ne pratimo vaše posjetitelje i ne postavljamo kolačiće. Vaša pravila privatnosti ostaju jednako kratka.

Vektorske pločice uživo — tri stila karte

Kako dodati besplatne kartografske pločice na svoju stranicu

Najbolje radi s MapLibre GL-om, a podržava i Leaflet i React

1. korak: Dodajte MapLibre GL u svoj HTML

<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 dostupan je isključivo kao ES moduli, pa ga ovi primjeri učitavaju pomoću mape uvoza i skripte tipa module.

Ili instalirajte pomoću npm-a

npm i maplibre-gl@^6

Zatim ga uvezite u svoj 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)

Unutar paketa MapLibre ne može sam pronaći svoju radnu nit. Ovo je primjer za Vite; za webpack i ostale alate pogledajte vodič za instalaciju MapLibrea.

2. korak: Izradite svoju kartu

<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>

Savjet: odgodite učitavanje MapLibrea za bolje rezultate Core Web Vitals

Preporučeno

Zašto pomaže:

Poboljšava Largest Contentful Paint (LCP)

Smanjuje First Input Delay (FID)

Drži Cumulative Layout Shift (CLS) pod kontrolom

Štedi oko 750 KB pri prvom učitavanju

Bolji rezultati Core Web Vitals često znače bolji položaj u rezultatima pretraživanja

Upotrijebite ovaj alat za učitavanje da biste rasteretili prvi prikaz:

// Primjer za Vite; za ostale alate za pakiranje pogledajte vodič za instalaciju
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';

let maplibrePromise = null;
let cssLoaded = false;

/**
 * Odgođeno učitava MapLibre GL i njegov CSS kad zatrebaju
 * @returns {Promise} Modul MapLibre GL
 */
async function loadMapLibre() {
    if (!maplibrePromise) {
        maplibrePromise = Promise.all([
            import('maplibre-gl'),
            loadMapLibreCSS()
        ]).then(([module]) => {
            module.setWorkerUrl(workerUrl);
            return module;
        });
    }
    return maplibrePromise;
}

/**
 * Dinamički učitava CSS za MapLibre GL
 */
async function loadMapLibreCSS() {
    if (!cssLoaded) {
        await import('maplibre-gl/dist/maplibre-gl.css');
        cssLoaded = true;
    }
}

/**
 * Klasa za odgođeno učitavanje MapLibre GL-a
 * Pruža API sličan maplibregl-u, ali s odgođenim učitavanjem
 */
export class MapLibreLoader {
    constructor() {
        this.maplibregl = null;
    }

    /**
     * Stvara novu instancu karte i po potrebi odgođeno učitava MapLibre GL
     * @param {Object} options - Mogućnosti konfiguracije karte
     * @returns {Promise} Instanca klase Map iz MapLibre GL-a
     */
    async createMap(options) {
        this.maplibregl = await loadMapLibre();
        return new this.maplibregl.Map(options);
    }

    /**
     * Dohvaća biblioteku MapLibre GL i po potrebi je odgođeno učitava
     * @returns {Promise} Biblioteka MapLibre GL
     */
    async getLibrary() {
        this.maplibregl = await loadMapLibre();
        return this.maplibregl;
    }
}

export default new MapLibreLoader();

Primjer upotrebe:

import MapLibreLoader from './maplibre-loader.js';

// Izradite kartu tek kad je potrebna (npr. pri pomicanju stranice ili radnji korisnika)
async function initMap() {
    const map = await MapLibreLoader.createMap({
        style: 'https://data.lfmaps.fr/styles/bright',
        center: [6.1844, 48.6937],
        zoom: 12,
        container: 'map',
    });
    
    // Dodajte kontrole, oznake i ostalo.
    const maplibregl = await MapLibreLoader.getLibrary();
    map.addControl(new maplibregl.NavigationControl());
}

Za napredne značajke i potpuni API pogledajte dokumentaciju za MapLibre GL JS

Koristite Leaflet? Dodajte besplatne pločice uz jedan dodatak

Leaflet ne može sam čitati vektorske pločice, pa ga povežite s dodatkom 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>

Dodatak podržava Leaflet 1.x — iste besplatne pločice, bez ikakve naplate.

Besplatne kartografske pločice u Reactu

npm i react-map-gl maplibre-gl@^6

import 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"
    />
  )
}

Bez mapbox-gl-a i pristupnog tokena — react-map-gl izravno komunicira s MapLibre GL-om.

Besplatni stilovi karte: bright, positron i liberty

https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty

Stvoreno za brzinu: brza isporuka kartografskih pločica diljem svijeta

Munjevito brzo

Pločice se isporučuju putem CDN-a pa se karte prikazuju u tren oka

Pouzdano

Dostupnost od 99,9%

Globalna pokrivenost

Podaci OpenStreetMapa pokrivaju cijeli svijet

Jednostavna integracija

Nekoliko redaka koda za MapLibre GL ili Leaflet i karta je spremna

Besplatna alternativa za Google Maps i Mapbox

Isti zadatak — karta na vašoj stranici. Sasvim drukčiji račun na kraju mjeseca.

Plaćeni pružatelji kartografskih pločica

Besplatni paket, a nakon prekoračenja naplata po učitavanju karte
API ključ koji morate izraditi, zaštititi i redovito mijenjati
Nadzorne ploče potrošnje, kvote i upozorenja o naplati koje morate pratiti
Prikupljanje analitičkih podataka o korisnicima vaše karte

LFMaps

Besplatno pri svakom opsegu prometa — nema praga koji možete prekoračiti
Bez API ključa jer nema korisničkog računa
Ništa ne morate pratiti: zalijepite URL stila i nastavite s radom
Bez praćenja vas i vaših posjetitelja

Iskreno o ograničenjima: LFMaps pruža samo kartografske pločice. Geokodiranje, planiranje ruta i navigacijske upute korak po korak nisu dio usluge.

Besplatne kartografske pločice: česta pitanja

Je li LFMaps doista besplatan?

Da. Nema plaćenog paketa, kreditne kartice ni računa za potrošnju — bez obzira na promet. LFMaps se financira kao sporedni projekt, baš kao i ostali besplatni alati na ovoj stranici.

Trebam li API ključ ili korisnički račun?

Ne. Nema registracije ni tokena koje morate redovito mijenjati. Za stil karte postavite LFMaps URL i sve radi.

Postoje li ograničenja broja zahtjeva ili kvote za kartografske pločice?

Nema kvota ni strogog ograničenja broja zahtjeva. Molimo samo da ne preuzimate masovno cijeli skup pločica — uobičajeno korištenje karte na web-stranici ili u aplikaciji sasvim je u redu.

Radi li LFMaps s Leafletom kao i s MapLibre GL-om?

Da. MapLibre GL izvorno prikazuje vektorske pločice i njega preporučujemo, ali radi i Leaflet uz dodatak maplibre-gl-leaflet.

Odakle dolaze podaci za karte?

Iz OpenStreetMapa, putem OpenFreeMapa. Podatke stvara zajednica i upravo zato mogu ostati besplatni.

Mogu li koristiti LFMaps na komercijalnoj web-stranici?

Da, uključeni su i komercijalni projekti. Navođenje izvora OpenStreetMap mora ostati vidljivo na karti — to je jedini uvjet.

Pratite li moje posjetitelje?

Ne. Ne prikupljamo osobne podatke i ne postavljamo kolačiće pri zahtjevima za pločice, pa zbog dodavanja karte ne morate proširivati svoja pravila privatnosti.

Po čemu se ovo razlikuje od Google Mapsa ili Mapboxa?

Oni nude besplatni paket, a kad promet naraste, naplaćuju svako učitavanje karte. LFMaps uopće ne obračunava potrošnju: cijena je nula za deset prikaza karte kao i za deset milijuna.

Naši ostali besplatni alati za razvojne programere

LFColors

Izradite skladne palete boja

LFMDP

Besplatni generator lozinki

LFNY

Besplatno skraćivanje URL-ova po mjeri

LFQR

QR kodovi koje možete naknadno uređivati

LFSocial

Slike spremne za objave na društvenim mrežama

LFUnminify

Vratite čitljivost svom kodu

LFGitignore

Jednostavno generirajte datoteke .gitignore

ViteUneTable

Sustav rezervacija za restorane

ViteUneCoupe

Softver za naručivanje u frizerskim salonima

LFFavicon

Besplatni generator favikona

LFAllergenes

Besplatni plakat s alergenima za restorane

LFMarkdown

Podijelite Markdown u lijepom izdanju

LFMenu

Jelovnik vašeg restorana na internetu, besplatno