jars / polysnapper

Google Maps V3 Polygon Snapping

PolySnapper

Google Maps V3 Polygon Snapping

Check out the jsfiddle

Vanilla JS: No Deps.

bower install polysnapper

---

###properties

• map: a google.maps.Map object.
• threshold: an integer minimum number of meters that will cause a snap to occur.
• marker: a google.maps.Marker that will appear when the users' mouse is within threshold distance from any point in polygons
• keyRequired: a boolean. If true, requires key to be held for snapping
• key: either 'shift' or 'ctrl' for now. requires keyRequired to be true
• polygons: an array of google.maps.Polygon objects that are snappable. These polygons MUST have a snapable:true property set on them. This allows you to use already existing polygon collections and only snap to the polygons you desire.
• polystyle: an object literal describing StrokeWeight, fillColor, etc that will be used on the polygon the user begins drawing when enable() is called
• hidePOI: when drawing polygons, often Points of Interest get in the way of click events. You can automagically hide them on enable() and show them on disable().
• onEnabled: a callback once enabled() has been called.
• onDisabled: a callback once disabled() has been called.
• onChange: a callback when a point is added, removed, or moved.

---

###methods

• enable(): invoke the custom drawing manager to begin drawing your polygon.
• disable(): cancel the custom drawing manager and remove the polygon from the map.
• enabled(): a boolean. whether we are in the enabled state, or not.
• polygon(): returns the currently editing polygon. You should call this immediately before calling disable() to get a copy of your polygon.

---

a brief example might look like:

    var PS = PolySnapper({
          map: map,
          threshold: 20,
          key: 'shift',
          keyRequired: true,
          polygons: polygons,
          polystyle: polystyle,
          hidePOI: true,
          onEnabled: function(){
    		console.log("enabled");
          },
          onDisabled: function(){
    		console.log("disabled");
          },
          onChange: function(){
            console.log("a point was added, removed, or moved.");
          }
    });
    
    //first enable the manager (enter drawing mode)
    PS.enable();
    
    //user draws the polygon, point by point, snapping when necessary.
    //now, retrieve the polygon from the manager.
    the_poly = PS.polygon();
    
    //and disable the manager (exit drawing mode and clean up poly).
    //you should now use the_poly as a polygon reference
    PS.disable();

polysnapper's Issues

Using PolySnapper In angular js

Hey man Thank you for this library! I want to use it with angularjs but it does not seem to be working. Any advice?

doing, but not done

😎

Edit existing polygon

Thanks for your work. I have been able to use this to draw new polygons, but could not figure how to edit an existing one with Snapping enabled.

Setting

snapable: true, editable: true

Enables the editing, but it does not snap.

PS.polygon()

Hey,
great plugin, still works 👍 :)

But how do I get the coordinates that I'd have to save with the help of PS.polygon() ?

Thanks!

Testing ZenHub!

Test!

Pin when mouse is near isn't shown when in fullscreen mode

When user is using the map in fullscreen the pin shown when mouse is near to a another point doesn't work.

done, but still maintaining

polygon lib is busted

Ticket #1: polygon lib is busted

Testing

Testing!

Fix that broken thing lickity split

It's broken every time I touch it, but I forget what specifically the issue was.

test issue

so cold

Close Polygon when dblClick

Is there any way to implement a function that closes the polygon when we double-click the mouse?

Best regards!
Alexandre