This guide provides step-by-step instructions for integrating OpenFreeMap into your website or mobile application.
To get started, choose a style from the default styles provided below. Later, there'll be options to use custom styles as well.
(You can navigate the map, it's interactive!)
Use the following style in a MapLibre map:
https://tiles.openfreemap.org/styles/libertyInclude MapLibre GL JS in the <head>. If you are using npm, you can install the maplibre-gl package. Make sure to import the CSS as well.
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
Initialize it to a div like this:
<div id="map" style="width: 100%; height: 500px"></div>
<script>
const map = new maplibregl.Map({
style: 'https://tiles.openfreemap.org/styles/liberty',
center: [13.388, 52.517],
zoom: 9.5,
container: 'map',
})
</script>
If you are currently using Mapbox, please change your libraries to MapLibre GL JS. MapLibre is based on the last open-source version of Mapbox GL JS before it went closed-source. Migrating should be as simple as changing the libraries, as long as you are not using any features specific to the 2.x or later releases.
MapLibre GL Leaflet provides a binding for Leaflet that allows you to add vector tile sources to the Leaflet map.
Include the following links and scripts in your page:
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<!-- Maplibre GL -->
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<!-- Maplibre GL Leaflet -->
<script src="https://unpkg.com/@maplibre/maplibre-gl-leaflet/leaflet-maplibre-gl.js"></script>
Initialize it to a div like this:
<div id="map" style="width: 100%; height: 500px"></div>
<script>
const map = L.map('map').setView([52.517, 13.388], 9.5)
L.maplibreGL({
style: 'https://tiles.openfreemap.org/styles/liberty',
}).addTo(map)
</script>
For mobile apps, you can use the same styles with MapLibre Native.
You can customize the styles using the Maputnik editor. For example, you can remove labels, POIs, or change colors.
When you use a customized style, you need to host the style JSON yourself and use its URL in MapLibre.
You can also download our processed full planet Btrfs images if you want to self-host yourself. Details can be found on GitHub.
If this project helps you save on your map hosting costs, please consider sponsoring me on GitHub Sponsors.
If possible, please choose a monthly donation, even if it’s a smaller amount. The nature of this project needs recurring donations to cover the server costs.
Sponsor me