How to add an OpenStreetMap (Leaflet) map to a Turbosite website

OpenStreetMap (OSM) is a free mapping database, an open alternative to Google Maps and Yandex Maps. Leaflet is the most popular JavaScript library for displaying OSM on a website. It is completely free, requires no API keys, and has no limits. It is ideal for projects where avoiding paid services is important. Installation takes 5–10 minutes.

What you will need

The coordinates of the location you want to show (latitude/longitude) — you can find them on openstreetmap.org (right-click on a point → “Show address”)
A published website on Turbosite
5–10 minutes

Step 1. Get the coordinates of your location

Open openstreetmap.org.
Search for the required address or organization.
Right-click on the desired point → “Show address”.
Coordinates in the format 52.5200,13.4050 (latitude, longitude) will appear in the address bar. Write them down.

Step 2. Prepare the HTML code

Unlike Google Maps and 2GIS, OSM does not have a ready-made iframe builder — the map is integrated via the Leaflet library. Here is the ready-to-use code:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<div id="map" style="height: 400px; width: 100%;"></div>

<script>
  var map = L.map('map').setView([52.5200, 13.4050], 15);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  L.marker([52.5200, 13.4050]).addTo(map)
    .bindPopup('We are located here')
    .openPopup();
</script>

What to customize:

52.5200, 13.4050 — replace both instances with your coordinates (latitude, longitude).
15 — map zoom level (13–17 for a city; the higher the number, the closer the view).
We are located here — the text in the popup window above the marker.
height: 400px — the height of the map.

Step 3. Insert the code into Turbosite

The map appears at a specific location on the page.

Open your website in Turbosite.
Add an “HTML code” block to the desired location on the page (usually the “Contacts” block).
Paste the prepared Leaflet code.
Save the changes.
Publish the website.

📷 [Turbosite screenshot — to be added: HTML code block in the page body with Leaflet code].

Step 4. Verify that the map works

Open your published website.
Scroll to the map block — the OpenStreetMap map with a marker should load.
Click on the marker — a popup with your text will appear.
Check the zooming (mouse wheel or pinch on mobile).

FAQ

Why use OSM instead of Google Maps? Key reasons: it is completely free with no limits or API keys, requires no registration, and there is no risk of service disconnection. The downside is that data may be less up-to-date in smaller regions.

Can I add multiple markers? Yes, repeat L.marker([latitude, longitude]).addTo(map).bindPopup('Text'); for each marker.

The map is slowing down the site. Leaflet and OSM tiles are loaded on demand. If there is only one map on the page, there will be no issues.

Can I style the map with brand colors? Yes, but not through standard OSM tiles. Use third-party tile providers (Mapbox, Stadia Maps, Thunderforest) — some are free for low traffic, others are paid.

Do I need to include OpenStreetMap attribution? Yes, it is mandatory — this is a license requirement. In the code provided above, it is already included in the attribution line.