Απεριόριστα διανυσματικά πλακίδια χάρτη από δεδομένα OpenStreetMap, έτοιμα για MapLibre GL ή Leaflet. Χωρίς κλειδί API, όρια χρήσης ή απρόσμενους λογαριασμούς.
Οι περισσότεροι πάροχοι πλακιδίων χάρτη σάς καλωσορίζουν με δωρεάν πιστώσεις. Έπειτα η επισκεψιμότητα αυξάνεται και η χρέωση βάσει χρήσης μετατρέπει ένα μικρό πείραμα σε πραγματικό λογαριασμό: αδιαφανείς μετρήσεις, χρεώσεις για κάθε φόρτωση χάρτη και τιμοκατάλογοι που χρειάζονται υπολογιστικό φύλλο για να τους καταλάβετε. Έτσι λειτουργούν τόσο το Google Maps όσο και το Mapbox. Αυτό που φαινόταν δωρεάν γίνεται ένα κόστος που ίσως δεν θέλετε για το έργο σας.
Το LFMaps είναι διαφορετικό. Δωρεάν σημαίνει δωρεάν: χωρίς εκπλήξεις, περιορισμούς ή λογαριασμούς.
Όσα χρειάζεστε για να δημοσιεύσετε έναν χάρτη. Χωρίς περιττά.
Προσθέστε τη διεύθυνση URL των πλακιδίων και ξεκινήστε. Χωρίς εγγραφή, διακριτικό πρόσβασης ή πίνακα ελέγχου.
Χωρίς ποσοστώσεις, έμμεσα όρια ή χρέωση ανά φόρτωση χάρτη. Χρησιμοποιήστε όσα χρειάζεστε.
Μηδενικό κόστος σε κάθε επίπεδο επισκεψιμότητας, από δέκα προβολές χάρτη έως δέκα εκατομμύρια.
Δεν παρακολουθούμε τους επισκέπτες σας και δεν αποθηκεύουμε cookies. Η πολιτική απορρήτου σας παραμένει εξίσου σύντομη.
Ιδανικό για MapLibre GL, συμβατό και με Leaflet ή 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 διατίθεται μόνο ως ES modules, γι’ αυτό τα παραδείγματα το φορτώνουν μέσω import map και σεναρίου τύπου module.
npm i maplibre-gl@^6Έπειτα εισαγάγετέ το στη 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)Μέσα σε ένα πακέτο, το MapLibre δεν μπορεί να εντοπίσει μόνο του τον worker του. Αυτή είναι η σύνταξη για το Vite· για webpack και άλλα εργαλεία, δείτε τον οδηγό εγκατάστασης του 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>Τα καλύτερα Core Web Vitals συχνά σημαίνουν καλύτερη κατάταξη στις αναζητήσεις
Χρησιμοποιήστε αυτόν τον μηχανισμό για πιο ελαφριά αρχική εμφάνιση:
// Σύνταξη για Vite· δείτε τον οδηγό εγκατάστασης για άλλα εργαλεία δημιουργίας πακέτων
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Φορτώνει το MapLibre GL και το CSS του μόνο όταν χρειάζονται
* @returns {Promise} Το module του MapLibre GL
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* Φορτώνει δυναμικά το CSS του MapLibre GL
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* Κλάση φόρτωσης του MapLibre GL κατ’ απαίτηση
* Παρέχει API παρόμοιο με το maplibregl, με φόρτωση μόνο όταν χρειάζεται
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Δημιουργεί νέο αντικείμενο χάρτη, φορτώνοντας το MapLibre GL αν χρειάζεται
* @param {Object} options - Επιλογές ρύθμισης χάρτη
* @returns {Promise} Ένα αντικείμενο Map του MapLibre GL
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Επιστρέφει τη βιβλιοθήκη MapLibre GL, φορτώνοντάς την αν χρειάζεται
* @returns {Promise} Η βιβλιοθήκη MapLibre GL
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Παράδειγμα χρήσης:
import MapLibreLoader from './maplibre-loader.js';
// Δημιουργία χάρτη μόνο όταν χρειάζεται (π.χ. κατά την κύλιση ή την αλληλεπίδραση του χρήστη)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Προσθήκη στοιχείων ελέγχου, δεικτών κ.λπ.
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}Για προηγμένες δυνατότητες και το πλήρες API, δείτε την τεκμηρίωση του MapLibre GL JS
Το Leaflet δεν διαβάζει μόνο του διανυσματικά πλακίδια, οπότε συνδυάστε το με το πρόσθετο 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>Το πρόσθετο υποστηρίζει το Leaflet 1.x: τα ίδια δωρεάν πλακίδια, χωρίς καμία χρέωση.
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"
/>
)
}Χωρίς mapbox-gl ή διακριτικό πρόσβασης: το react-map-gl επικοινωνεί απευθείας με το MapLibre GL.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Τα πλακίδια παρέχονται μέσω CDN, ώστε οι χάρτες να εμφανίζονται στη στιγμή
Διαθεσιμότητα 99.9%
Δεδομένα OpenStreetMap για ολόκληρο τον κόσμο
Λίγες γραμμές MapLibre GL ή Leaflet και ο χάρτης σας είναι έτοιμος
Ίδιο αποτέλεσμα: ένας χάρτης στη σελίδα σας. Πολύ διαφορετικός λογαριασμός στο τέλος του μήνα.
Ο περιορισμός, με ειλικρίνεια: το LFMaps παρέχει μόνο πλακίδια χάρτη. Η γεωκωδικοποίηση, ο υπολογισμός διαδρομών και οι οδηγίες πλοήγησης δεν περιλαμβάνονται στην υπηρεσία.
Ναι. Δεν υπάρχουν πακέτα επί πληρωμή, πιστωτικές κάρτες ή χρεώσεις χρήσης, ανεξάρτητα από την επισκεψιμότητα. Το LFMaps χρηματοδοτείται ως προσωπικό παράλληλο έργο, όπως και τα άλλα δωρεάν εργαλεία αυτής της σελίδας.
Όχι. Δεν απαιτείται εγγραφή ούτε ανανέωση διακριτικών πρόσβασης. Ορίστε ως στυλ του χάρτη σας μια διεύθυνση URL του LFMaps και λειτουργεί.
Δεν υπάρχουν ποσοστώσεις ή αυστηρά όρια ρυθμού αιτημάτων. Ζητάμε μόνο να μην κατεβάζετε μαζικά ολόκληρο το σύνολο πλακιδίων. Η κανονική χρήση χάρτη σε ιστότοπο ή εφαρμογή είναι απολύτως εντάξει.
Ναι. Το MapLibre GL αποδίδει εγγενώς τα διανυσματικά πλακίδια και είναι η επιλογή που προτείνουμε, αλλά και το Leaflet λειτουργεί με το πρόσθετο maplibre-gl-leaflet.
Από το OpenStreetMap, μέσω του OpenFreeMap. Τα δεδομένα δημιουργούνται από την κοινότητα, γι’ αυτό ακριβώς μπορούν να παραμείνουν δωρεάν.
Ναι, και σε εμπορικά έργα. Διατηρήστε ορατή την αναφορά προέλευσης OpenStreetMap στον χάρτη. Αυτή είναι η μόνη απαίτηση.
Όχι. Δεν συλλέγουμε προσωπικά δεδομένα ούτε αποθηκεύουμε cookies στα αιτήματα πλακιδίων. Έτσι, η προσθήκη χάρτη δεν επιβαρύνει την πολιτική απορρήτου σας.
Εκείνα προσφέρουν ένα δωρεάν αρχικό πακέτο και έπειτα χρεώνουν ανά φόρτωση χάρτη όσο αυξάνεται η χρήση. Το LFMaps δεν έχει καν μετρητή: η τιμή είναι μηδέν τόσο στις δέκα προβολές όσο και στα δέκα εκατομμύρια.
Δημιουργήστε αρμονικές παλέτες χρωμάτων
Δωρεάν γεννήτρια κωδικών πρόσβασης
Δωρεάν συντόμευση URL με προσαρμοσμένους συνδέσμους
Κωδικοί QR που μπορείτε να επεξεργαστείτε αργότερα
Εικόνες έτοιμες για αναρτήσεις στα κοινωνικά δίκτυα
Κάντε τον συμπιεσμένο κώδικά σας ευανάγνωστο
Δημιουργήστε εύκολα αρχεία .gitignore
Σύστημα κρατήσεων για εστιατόρια
Λογισμικό κρατήσεων για κομμωτήρια
Δωρεάν γεννήτρια favicon
Δωρεάν αφίσα αλλεργιογόνων για εστιατόρια
Μοιραστείτε Markdown με όμορφη εμφάνιση
Το μενού του εστιατορίου σας στο διαδίκτυο, δωρεάν