Collision

Open in new window

<html>
<head>
    <script src="//scribblemaps.com/api/js/">
    </script>

    <script>
        var sm = new ScribbleMap('ScribbleMap', {
            searchControl: false,
            lineSettingsControl: false,
            fillColorControl: false,
            lineColorControl: false,
            tools: ["edit", "drag"],
            defaultTool: "edit",
            startCenter: [43.00, -82.36116582031251],
            startZoom: 7,
            undoControl: false,
            startMapType: "road"
        });

        sm.view.setCenter([43.00, -82.36116582031251]);
            sm.addListener("ready", function () {
                // Create Points for collision
                var points = [];
                var dx, dy, s = 3, p;
                for (var i = 0; i < 150; i++) {

                    dx = -s + Math.random() * s * 2;
                    dy = -s + Math.random() * s * 2;

                    p = sm.draw.point([42.30729368312444 + dx, -82.96805852527628 + dy], 5,
                                      {
                                          "lineColor": "#000000",
                                          "weight": 3,
                                          "fillColor": "#00FF00"
                                      }).disableEdit();

                    points.push(p);
                }

                //create instruction label
                sm.draw.label([44.00, -82.36116582031251],
                "Edit the polygon to see collisions", null, true).disableEdit();

                /* Check collision on overlay add. When overlays are being edited they
                are removed from the primary stack and then it is added again when editing
                is finished */
                sm.map.addListener(scribblemaps.MapEvent.OVERLAY_ADDED, function (event) {
                    var overlay = event.data;
                    for (var i = 0; i < points.length; i++) {
                        if (overlay.collidesWith(points[i])) {
                            points[i].setStyle({
                                "lineColor": "#FF0000",
                                "fillColor": "#FF0000"
                            });
                        } else {
                            points[i].setStyle({
                                "lineColor": "#000000",
                                "fillColor": "#00FF00"
                            });
                        }
                    }
                });

                //Draw polygon
                sm.draw.poly([
                            [43.805028791852244, -82.36116582031251],
                            [42.04340820023151, -85.14070683593751],
                            [41.36261706008662, -80.95491582031251]
                ], {
                    "fillOpacity": 0.1,
                    "fillColor": "#FFFFFF",
                    "lineColor": "#000000"
                });
            });
    </script>
</head>

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