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>