https://github.com/mybuilder/bermuda

Simple and fast Javascript library for drawing draggable polygons in Google Maps
https://github.com/mybuilder/bermuda

drawing-draggable-polygons javascript

Last synced: about 1 month ago
JSON representation

Simple and fast Javascript library for drawing draggable polygons in Google Maps

• Host: GitHub
• URL: https://github.com/mybuilder/bermuda
• Owner: mybuilder
• License: mit
• Created: 2014-05-27T15:14:29.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2024-05-15T07:00:52.000Z (7 months ago)
• Last Synced: 2024-05-15T22:27:42.883Z (7 months ago)
• Topics: drawing-draggable-polygons, javascript
• Language: JavaScript
• Homepage:
• Size: 38.1 KB
• Stars: 10
• Watchers: 13
• Forks: 1
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Bermuda

Simple and fast Javascript library for drawing draggable polygons in [Google Maps](https://developers.google.com/maps/documentation/javascript/)!

![Map Dragging](http://i.imgur.com/jWw09jx.gif)

## Usage

Include required libraries

```html

```

Paint fancy polygons!

```javascript

var map = new Bermuda(document.getElementById("map-canvas"));

map.draw([[25.774, -80.190], [18.466, -66.118], [32.321, -64.757]]);

```

### Available Operations

Once you build your map, you could do some amazing stuff with it, the available operations are listed below

method      | arguments | return  | description

------------|-----------|---------|------------

draw        | `Array`   | *none*  | Draw markers and polygon on the map

zoomIn      | *none*    | *none*  | Zoom in

zoomOut     | *none*    | *none*  | Zoom out

disable     | *none*    | *none*  | Freeze the map, disable interaction

enable      | *none*    | *none*  | Re-enable interaction

getCoords   | *none*    | `Array` | Get the current marker coordinates

clear       | *none*    | *none*  | Remove all markers and polygon from the map

## Configuration Options

property     | type       | description

-------------|------------|------------

map          | `Object`   | Options for [google.maps.Map](https://developers.google.com/maps/documentation/javascript/reference#Map)

polygon      | `Object`   | Options for [google.maps.Polygon](https://developers.google.com/maps/documentation/javascript/reference#Polygon)

icon         | `Object`   | Configuration for marker icons 

autoCentered | `Boolean`  | Map automatic centering

onChange     | `Function` | This function will be called everytime a pin is dragged

disabled     | `Boolean`  | Interaction disabled

### Example

```javascript

var map = new Bermuda(document.getElementById("map-canvas"), {

    polygon: {

      strokeColor: "#008525",

      fillColor: "#008525"

    },

    icon: {

      image: "images/[email protected]",

      width: 15,

      height: 21

    },

    autoCentered: true,

    onChange: function(coords) {

        console.log(coords);

    }

});

```

Enjoy!