google-maps-markup

Drawing and measurement tools for a Google Map

Preview Demo

Compatibility

• Ember.js v3.16 or above
• Ember CLI v2.13 or above
• Node.js v10 or above

Usage

ember install google-maps-markup

<GoogleMapsMarkup @map={{this.map}} />

Available Attributes

• map - REQUIRED; Google Map instance, defaults to undefined. Bring your own map!
• editable - (experimental) Allow shapes to be edited. Defaults to false.
• panForOffscreen - On hover pan to shape if not in view (reset to last bounds after). Defaults to true.
• autoResetToPan - After drawing a shape the tool changes to "Pan" instead of staying on the current tool. Defaults to false.

Actions

• afterAddFeature - Fires after finishing some markup on the map. Passes the result as the first argument, i.e. afterAddFeature(result) {}.
• afterClearResults - Fires after clicking "Clear" for a mode. Passes the mode as the first argument, i.e afterClearResults(mode) {}.

Service

The service is called markupData and allows access to the result data that gets created when you create markup on the map. It also has some helper functions.

import Component from '@glimmer/component';

export default class MyComponent extends Component {
  @service('markup-data')
  markupDataService;
}

Properties

• layers - Array of Google Maps Data layers, one for draw and one for measure.
• results - Markup data for each markup you create, based on mode. See markupResults for all results.
• markupResults - The object of all the results, no matter the mode.
• mode - The drawing mode, either 'draw' or 'measure'.

Methods

• activate - Add all layers to the map. activate(map).
• changeModeByResults - Changes the mode to the first layer with results.
• featureToResult - Converts a Google Maps Data Feature to a markup result, for loading data without actually drawing on the map (ie, load via url). featureToResult(feature, layer).

Installation

• git clone this repository
• yarn

Linting

• npm run lint:js
• npm run lint:js -- --fix

Running tests

• ember test – Runs the test suite on the current Ember version
• ember test --server – Runs the test suite in "watch mode"
• ember try:each – Runs the test suite against multiple Ember versions

Running the dummy application

• ember serve
• Visit the dummy application at http://localhost:4200.

For developing locally with your app, you can use DEVELOPING=true npm start for your app, and npm link path/to/this/addon and your app will automatically rebuild as you make changes to your local version of this addon.

For more information on using ember-cli, visit http://www.ember-cli.com/.

Github Pages/Demo

Build by checking out the relevant branch, since the test dummy app is actually the demo app.

Run the following command:

ember github-pages:commit --message <message describing demo release>

For more information on using ember-cli, visit https://ember-cli.com/.

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.