HTML5 Map 🌐

Interactive HTML5 Map (Leaflet, standalone)

Open Beta
.html · text/html

Canvas-HTML is a self-contained interactive HTML5 file with a Leaflet.js map. All data for the chosen area is embedded into the file as GeoJSON right inside the JavaScript, so the page opens in any browser without a server and without unpacking — just double-click the .html. The map supports zoom and pan, a layer-visibility toggle, click popups showing a feature's attributes, and basic per-layer styling (roads gray, buildings orange, water blue, greenery green). The OpenStreetMap basemap and the Leaflet library itself load from a CDN, so the background tiles need internet; the embedded GeoJSON layers work offline.

Експортирайте HTML5 Map сега ✨ Отворена бета версия — безплатно, без ограничения

Основни характеристики

A single standalone .html — data embedded, no server required
Interactive Leaflet.js map with zoom, pan and a layer toggle
Click popups showing a feature's attributes (with value escaping)
Per-layer styling (roads, buildings, water, greenery, land use)
Automatic camera fit to the bounds of the chosen area
Example HTML5 Map export (central Moscow, 1x0.5 km)
Example: central Moscow, ~1×0.5 km, medium detail

За формата HTML5 Map

Canvas-HTML is a ready interactive map packed entirely into a single HTML file. Inside it are the Leaflet library and the data of the selected area as GeoJSON right in the page code, so the file opens with a double click in any browser: no server and no software installation required.

The format is chosen when the map has to be shown to someone rather than processed: sent to a client, attached to a report, put into an internal wiki, demonstrated to a colleague who has no GIS. The person on the other end simply opens the file and works with the map — pans, zooms, clicks on objects.

The map has zoom and panning, a layer switcher and pop-up tooltips with the attributes of an object on click; the layers are colored by type — roads, buildings, water, greenery, land use. The camera is aimed at the bounds of the selected area right away. Up to 50 000 objects are taken per layer so the page stays responsive.

One caveat about the internet: the data itself is embedded in the file and works offline, while the Leaflet library and the OpenStreetMap background are loaded from the network — without internet access only the vector layers on an empty background will remain.

Коя програма отваря файлове HTML5 Map

Следните програми и приложения могат да отварят, редактират и работят с файлове Interactive HTML5 Map (Leaflet, standalone) (.html), експортирани от OSM2CDR:

🌐Google Chrome 🌐Mozilla Firefox 💻Microsoft Edge 💻Safari 💻Leaflet.js

Format specifications

Кой използва карти в HTML5 Map

🏗
Quickly sending an interactive map to a colleague or client as a single file
Sending an interactive map as a single file — the recipient needs neither a GIS nor access to the service.
💻
Embedding a map into a report, presentation or internal wiki without a backend
An attachment to a report or a presentation: the map lives next to the document and opens in a browser.
📊
Demonstrating an exported area with clickable feature attributes
A demonstration of the export with attributes: a click shows exactly what is in the data.
🎨
Lightweight data viewing without installing GIS apps — in an ordinary browser
A quick look at the data, when installing QGIS for a single glance is not worth it.

Как да експортирате HTML5 Map

1
Изберете област
Начертайте правоъгълник или полигон на интерактивната карта на osm2cdr.ru
2
Изберете HTML5 Map
Изберете Interactive HTML5 Map (Leaflet, standalone) от списъка с 127 налични формата за експорт
3
Експорт
Щракнете върху „Експорт“ и получете файла си .html за 1-5 минути
4
Изтегляне
Изтеглете готовия файл HTML5 Map и го отворете в Google Chrome

Как да отворите след експорта

Популярни карти в HTML5 Map

Free

Получете експорти на карти в Interactive HTML5 Map (Leaflet, standalone)

Изтеглете професионални карти в HTML5 Map от OpenStreetMap. Незабавно генериране, всяка област.

Безплатно / експорт
Експортирайте HTML5 Map сега →

Често задавани въпроси

Do I need a server to open the file?
Does the map work without internet?
Is there a data-size limit?
Why does the map show only the selected area?
Can I embed such a map in my own website?
How do I change the layer colors or the background tiles?
Why did the file turn out so large?

Свързани формати

Често експортирани заедно