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) را از فهرست ۱۲۷ قالب خروجی موجود انتخاب کنید
3
خروجی
روی خروجی کلیک کنید و فایل .html خود را در ۱ تا ۵ دقیقه دریافت کنید
4
دانلود
فایل آمادهٔ HTML5 Map را دانلود کنید و آن را در Google Chrome باز کنید

نحوه باز کردن پس از خروجی

نقشه‌های محبوب در HTML5 Map

رایگان

خروجی نقشهٔ 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?

قالب‌های مرتبط

قالب‌هایی که اغلب همراه با هم خروجی گرفته می‌شوند