Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/knownasilya/google-maps-markup
Ember markup component for Google Maps - Draw and Measure
https://github.com/knownasilya/google-maps-markup
demo draw ember-addon google-maps google-maps-markup map markup web-component
Last synced: about 2 months ago
JSON representation
Ember markup component for Google Maps - Draw and Measure
- Host: GitHub
- URL: https://github.com/knownasilya/google-maps-markup
- Owner: knownasilya
- License: mit
- Created: 2015-07-22T16:14:28.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-01-09T17:30:12.000Z (12 months ago)
- Last Synced: 2024-10-25T13:08:54.261Z (about 2 months ago)
- Topics: demo, draw, ember-addon, google-maps, google-maps-markup, map, markup, web-component
- Language: JavaScript
- Homepage: https://google-maps-markup.netlify.app
- Size: 4.53 MB
- Stars: 12
- Watchers: 3
- Forks: 8
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# google-maps-markup
Drawing and measurement tools for a Google Map
[](http://badge.fury.io/js/google-maps-markup)
[](https://travis-ci.org/knownasilya/google-maps-markup)
[](https://coveralls.io/github/knownasilya/google-maps-markup?branch=master)
[](http://emberobserver.com/addons/google-maps-markup)
[Preview Demo]
## Compatibility
* Ember.js v3.16 or above
* Ember CLI v2.13 or above
* Node.js v10 or above
## Usage
```bash
ember install google-maps-markup
```
```hbs
```
### 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.
```js
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](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/](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:
```no-highlight
ember github-pages:commit --message
```
For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).
## Contributing
See the [Contributing](CONTRIBUTING.md) guide for details.
## License
This project is licensed under the [MIT License](LICENSE.md).
[preview demo]: http://knownasilya.github.io/google-maps-markup