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 year 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 (about 12 years ago)
- Default Branch: master
- Last Pushed: 2024-07-04T08:54:29.000Z (almost 2 years ago)
- Last Synced: 2025-03-28T19:53:44.044Z (about 1 year ago)
- Topics: drawing-draggable-polygons, javascript
- Language: JavaScript
- Homepage:
- Size: 39.1 KB
- Stars: 11
- Watchers: 12
- Forks: 1
- Open Issues: 16
-
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/)!
## 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/map-pin@2x.png",
width: 15,
height: 21
},
autoCentered: true,
onChange: function(coords) {
console.log(coords);
}
});
```
Enjoy!