hal/resource/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%" width="500" viewBox="0 0 1000 500"></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 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>


<script src="js/svg.min.js"></script>
<script src="js/svg.draggable.min.js"></script>
<script>
    var svg;
    var editModeEnabled = false;

    $(function(){
        if (!SVG.supported) {
            alert("SVG not supported");
            return;
        }

        svg = SVG("map");
        drawMap();

        // set events
        $("#button-edit").click(function() {
            editMode(true);
        });
        $("#button-save").click(function() {
            //saveMap();
            editMode(false);
            drawMap();
        });
        $("#button-cancel").click(function() {
            editMode(false);
            drawMap();
        });
    });


    function editMode(enable){
        if (editModeEnabled == enable)
            return;
        editModeEnabled = enable;
        if (editModeEnabled){
            $(".edit-mode").show();
            $(".view-mode").hide();
            $("#map").css("border-color", "#6eb16e");
            svg.select(".draggable").draggable(true);
        }
        else {
            $(".edit-mode").hide();
            $(".view-mode").show();
            $("#map").css("border-color", "");
            svg.select(".draggable").draggable(false);
        }
    }

    function drawMap(){
        ////////////////  Init
        // Get map data

        // reset map
        svg.clear();

        ////////////////  Draw
        // Background
        svg.image("?floorplan", "100%", "100%").x(0).y(0).addClass("floorplan");

        // Sensors
        svg.image("/img/temperature.png").x(150).y(150).addClass("draggable").addClass("sensor");
        // Events
        svg.image("/img/lightbulb.svg").x(100).y(100).addClass("draggable").addClass("event");
    }
</script>