Skip to main content

MapML Quick Start Guide

Learn how to quickly create your first map.

View the HTML code shown in the video
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting Started</title>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@maps4html/mapml/dist/mapml-viewer.js"></script>
</head>
<body>
    <mapml-viewer width="800" height="400" projection="OSMTILE" zoom="1" lat="60.0" lon="-100.0" controls>
        <layer- label="OpenStreetMap" src="https://maps4html.org/web-map-doc/demo/data/osm.mapml" checked></layer-> 
    </mapml-viewer>
</body>
</html>

Continue with the next tutorial (MapML Introduction) for a more detailed look.