api.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Template project to create MapStore extensions</title>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway" type='text/css'>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
        <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
        <script src="https://maps.google.com/maps/api/js?v=3"></script>
        <!--script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
        <style>
        #container {
            position: absolute;
            top: 100px;
            left: 100px;
            right: 100px;
            bottom: 100px;
        }
        #mapstore2-embedded, #map, .fill {
            width: 100%;
            height: 100%;
        }
        </style>
    </head>
    <body onload="init()">
        <div id="container" class="ms2"></div>
        <script id="ms2-api" src="dist/MapStoreExtension-api.js"></script>
        <script type="text/javascript">
        function init() {
            MapStore2.create('container', {
                originalUrl: "./#viewer/leaflet/0"
            });
        }
        </script>
    </body>
</html>