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 src="js/jquery.filer.min.js"></script>
<link href="css/jquery.filer.css" rel="stylesheet">
<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();
        });

        // BG Upload
        $("#button-bg").click(function() {
            // Reset modal
            //$('#bg-file-input').parent().show();
            //$('#bg-file-progress').parent().hide();
        });
        $('#bg-file-input').filer({
            limit: 1,
            extensions: ['jpg','png','svg','gif'],
            maxSize: 3, // in MB
            uploadFile: {
                url: "",
                type: 'POST',
                enctype: 'multipart/form-data',
                beforeSend: function(){
                    $('#bg-file-input').parent().hide();
                    $('#bg-file-progress').parent().show();
                },
                success: function(data, el){

                },
                error: function(el){
                    $("bg-upload-progress").addClass("progress-bar-danger");
                },
                onProgress: function(t){
                    $("bg-upload-progress").css("width", t+"%");
                },
            }
        });
    });


    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(){
        // Get map data
        $.getJSON("?json&action=getdata", function(json){
            // reset map
            svg.clear();

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

            // Sensors
            $.each(json.sensors, function(i, sensor) {
                var device = svg.image("/img/temperature.png").addClass("draggable").addClass("sensor");
                device.x(sensor.x);
                device.y(sensor.y);
                device.attr("device-id", sensor.id);
            });
            // Events
            $.each(json.events, function(i, event) {
                var device = svg.image("/img/lightbulb.svg").addClass("draggable").addClass("event");
                device.x(event.x);
                device.y(event.y);
                device.attr("device-id", event.id);
            });
        });
    }

    function saveMap(){
        svg.select(".sensor").each(function(){
            saveDevice(this, "sensor");
        });
        svg.select(".event").each(function(){
            saveDevice(this, "event");
        });
    }
    function saveDevice(element, type){
        $.ajax({
            async: false,
            dataType: "json",
            url: "?json",
            data: {
                action: "save",
                id: element.attr("device-id"),
                type: type,
                x: element.x(),
                y: element.y()
            },
        });
    }
</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="files[]" multiple="multiple" id="bg-file-input">
                    </div>
                    <div class="progress">
                        <div id="bg-file-progress" class="progress-bar progress-bar-striped active" style="width: 45%"></div>
                    </div>
                </center>
            </div>
            <div class="modal-footer">
                <button type="reset" class="btn btn-danger" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>