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>
        var loadmap = 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>
    <script src="//scribblemaps.com/api/js/?callback=loadmap" async></script>
</head>

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