Collision

Open in new window

<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,
                startMapType: "road"
            });

            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>