plastic-map-marker-svg - Vaadin Add-on Directory
Use custom SVG Map Markers with google-map
# \
Custom SVG map marker icons for google-map
See the [live demo site](https://mlisook.github.io/plastic-map-marker-svg) for samples and code.
## What is it?
The elements in this package allow you to create a collection of SVG icons that can be used with `google-map-marker`, or with the Google Maps Javascript API, in the same way you would use `iron-iconset-svg` to create a collection of icons for `iron-icon`.
The marker icon sets you create can be used in two ways, depending on your need:
* Retrieve the icon in code and asssign it to properties as needed.
* Use `plastic-map-marker-svg` instead of `google-map-marker`
## Versions
There is a version for Polymer 3.0 projects and a version for Polymer 2.x projects.
### Install for Polymer 3.0
```
npm i --save plastic-map-marker-svg
```
### Install for Polymer 2.0
```
bower install --save plastic-map-marker-svg#^0.0.3
```
## Creating a Marker Icon Set
To create a marker icon set you create a custom element with `plastic-map-marker-set` and include your SVG icon designs in that element (just like `iron-iconset-svg`):
### Polymer 3.0
```
// file: sample-markers.js
import 'plastic-map-marker-set/plastic-map-marker-set.js';
const $_documentContainer = document.createElement('template');
$_documentContainer.setAttribute('style', 'display: none;');
$_documentContainer.innerHTML = `
`;
document.head.appendChild($_documentContainer.content);
```
### Polymer 2.0
```HTML
```
### Design Considerations
It is important that each definition have:
* an `id` which is unique, and that no other `g` elements have an `id`
* a `viewBox` attribute - it defines the basis of the points in the SVG markup and allows the browser to scale the image as requested.
### Not Really Data Binding, but ...
While it's not actual data binding, marker definitions can have substitution points (see example markers above), marked with [[some.data.path]] that will be substituted in when you request the marker.
## Using Your Icons
### In Code
You can get a `google.map.icon` object for your marker icon by calling the static method `getMarkerSetIcon` of the `PlasticMapMarkerSet` which returns a `Promise` for a `google.map.icon` object:
```HTML
```
```JS
PlasticMapMarkerSet.getMarkerSetIcon('sample-markers', 'tdpin', 64, 96, myDataObject)
.then((icon) => {
this.icon = icon;
this.points = [{
lat: 37.779,
lng: -122.3892
}];
});
```
### With plastic-map-marker-svg
`plastic-map-marker-svg` extends `google-map-marker` (i.e. `class PlasticMapMarkerSvg extends customElements.get('google-map-marker')`) adding just the icon functions.
This is particularly useful if you are assigning different icons to different markers.
You use it in place of `google-map-marker`:
```HTML
```
Note that the `icon-name' property is in the form set:icon e.g. "sample-set:flag".
## License
MIT
## Issues
Please submit issues or questions through the github repository.
## Contributions
Contributions via pull request are certainly welcome and appreciated.
Yo
Yo! Some infowindow stuff!