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 τώρα ✨ Open Beta — δωρεάν, χωρίς όρια

Βασικά χαρακτηριστικά

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

Δωρεάν

Αποκτήστε εξαγωγές χαρτών 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?

Σχετικές μορφές

Συχνά εξάγονται μαζί