Hello World

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Scribble Maps : Interactivity Demo</title>
    <script src="//scribblemaps.com/api/js"></script>

    <script>
        window.onload = function () {
            var sm = new ScribbleMapViewer(document.getElementById('ScribbleMap'));
                sm.ui.setTool("drag");

                    sm.draw.circle([42.30729368312444, -82.96805852527628], "45km")
                        .mouseover(function () {
                            console.log("mouseover");
                        this.setStyle({ "fillColor": "#0000FF" })
                    })
                    .mouseout(function () {
                        console.log("mouseout");
                        this.setStyle({ "fillColor": "#00FF00" })
                    })
                    .mousedown(function () {
                        console.log("mousedown");
                        this.setStyle({ "fillColor": "#FF00FF" })
                    })
                    .mouseup(function () {
                        console.log("mouseup");
                        this.setStyle({ "fillColor": "#FF0000" })
                    })
                  
        }
    </script>
</head>

<body>
    <div id="ScribbleMap" style="width: 730px; height: 500px"></div>
</body>
</html>
Open in new window