hal/hal-core/resources/web/map.tmpl

<style>
    .view-mode {
        display: block;
    }
    .edit-mode {
        display: none;
    }
    #map{
        border-style: solid;
        border-width: 3px;
        border-color: #fff;
    }
</style>

<div class="col-sm-9 col-sm-offset-1 col-md-10 col-md-offset-1">
    <svg id="map" width="100%" height="700" viewBox="0, 0, 1000, 700"></svg>
</div>

<div class="col-sm-1 col-md-1">
    <a id="button-edit" class="view-mode" href="#">
        <span class="view-mode glyphicon glyphicon-wrench" aria-hidden="true"></span>
    </a>
    <div class="edit-mode btn-toolbar">
        <div class="btn-group-vertical">
            <button id="button-bg-edit" type="button" class="btn btn-sm btn-default" title="Change Background Image">
                <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
            </button>
            <br />
            <button id="button-save" type="button" class="btn btn-sm btn-success" title="Save">
                <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
            </button>
            <button id="button-cancel" type="button" class="btn btn-sm btn-danger" title="Cancel">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12 text-center">
        Icons downloaded from <a href="http://icons8.com">icons8.com</a>
    </div>
</div>

<link href="css/lib/jquery.filer.css" rel="stylesheet">
<link href="css/lib/svg.select.min.css" rel="stylesheet">

<script src="js/lib/jquery.filer.min.js"></script>
<script src="js/lib/svg.min.js"></script>
<script src="js/lib/svg.select.min.js"></script>
<script src="js/lib/svg.resize.min.js"></script>
<script src="js/lib/svg.draggable.min.js"></script>
<script src="js/hal_map.js"></script>


<!------------------ MODALS ---------------------->

<div class="modal fade" id="bgUploadModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Upload Background Image</h4>
            </div>
            <div class="modal-body">
                <center>
                    <div class="input-group">
                        <input type="file" name="bg-file" id="bg-file-input">
                    </div>
                    <div class="progress">
                        <div id="bg-file-progress" class="progress-bar progress-bar-striped active" style="width: 1%"></div>
                    </div>
                </center>
            </div>
            <div class="modal-footer">
                <button type="reset" class="btn btn-danger" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>