Geodjango object creation form



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Historical maps</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script>
    <script src="/gstatic/leaflet/dist/leaflet.js"></script>
    <link rel="stylesheet" href="/gstatic/leaflet/dist/leaflet.css">
    <link rel="stylesheet" href="/gstatic/bootstrap/dist/css/bootstrap.min.css">

    <link href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.css" type="text/css" media="all" rel="stylesheet" />
<link href="/gstatic/gis/css/ol3.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.js"></script>
<script type="text/javascript" src="/gstatic/gis/js/OLMapWidget.js"></script>


    <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>


</head>
<body>

    <div class="col-md-offset-3 col-md-8">
        <form method="post">
            <input type='hidden' name='csrfmiddlewaretoken' value='T70MsCPHF3rxxvPwjfBdaPKdUtdbloJgNxV1S0aRPJHAfgqi0BCbyxZPRVPfwlAI' />
            <div class="row">

                    <div class="form-group">
                        <label for="id_name">Name:</label>
                        <input type="text" name="name" id="id_name" class="form-control" maxlength="50" required />
                    </div>

                    <div class="form-group">
                        <label for="id_startyear">Startyear:</label>
                        <input type="text" name="startyear" value="1000-01-01" id="id_startyear" class="form-control" required />
                    </div>

                    <div class="form-group">
                        <label for="id_endyear">Endyear:</label>
                        <input type="text" name="endyear" id="id_endyear" class="form-control" required />
                    </div>

                    <div class="form-group">
                        <label for="id_mpoly">Draw country border on map:</label>
                        <style type="text/css">
    #id_mpoly_map { width: 800px; height: 500px; }
    #id_mpoly_map .aligned label { float: inherit; }
    #id_mpoly_div_map { position: relative; vertical-align: top; float: left; }
    #id_mpoly { display: none; }

</style>

<div id="id_mpoly_div_map">
    <div id="id_mpoly_map"></div>
    <span class="clear_features"><a href="javascript:geodjango_mpoly.clearFeatures()">Delete all Features</a></span>

    <textarea id="id_mpoly" class="vSerializedField required" cols="150" rows="10" name="mpoly"></textarea>
    <script type="text/javascript">
        var map_options = {};

var base_layer = new ol.layer.Tile({source: new ol.source.OSM()});

        var options = {
            base_layer: base_layer,
            geom_name: 'MultiPolygon',
            id: 'id_mpoly',
            map_id: 'id_mpoly_map',
            map_options: map_options,
            map_srid: 3857,
            name: 'mpoly'
        };

options['default_lon'] = 5;
options['default_lat'] = 47;

        var geodjango_mpoly = new MapWidget(options);
    </script>
</div>
                    </div>

            </div>
            <div class="row">
                <div class="form-group">
                    <button class="btn btn-primary" type="submit">Save</button>
                </div>
            </div>
        </form>
    </div>

<!--<script src="/gstatic/bootstrap/dist/js/bootstrap.min.js"></script>-->
</body>
</html>