Directory

plastic-map-marker-svg - Vaadin Add-on Directory

Use custom SVG Map Markers with google-map plastic-map-marker-svg - Vaadin Add-on Directory
# \ 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 = ` [[markerNum]] [[markerNum]] [[mtext]] `; document.head.appendChild($_documentContainer.content); ``` ### Polymer 2.0 ```HTML [[markerNum]] [[markerNum]] [[mtext]] ``` ### 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.
GitHub Homepage
Issue tracker
View on NPM
View on GitHub
Online Demo
Documentation

plastic-map-marker-svg version 0.0.1
### Dependencies * polymer#Polymer/polymer#^2.0.0 * iron-meta#PolymerElements/iron-meta#^2.0.2

plastic-map-marker-svg version 0.0.2
### Dependencies * polymer#Polymer/polymer#^2.0.0 * google-map#GoogleWebComponents/google-map#^2.0.1 * iron-meta#PolymerElements/iron-meta#^2.0.2

plastic-map-marker-svg version 0.0.0-preview
### Dependencies * @atomiko/google-apis-holdout#0.0.6 * @atomiko/google-map-holdout#0.0.6 * @polymer/iron-meta#^3.0.0-pre.18 * @polymer/polymer#^3.0.0

plastic-map-marker-svg version 0.0.3
### Dependencies * polymer#Polymer/polymer#^2.0.0 * google-map#GoogleWebComponents/google-map#^2.0.1 * iron-meta#PolymerElements/iron-meta#^2.0.2

plastic-map-marker-svg version 1.0.0
### Dependencies * @atomiko/google-apis-holdout#0.0.6 * @atomiko/google-map-holdout#0.0.6 * @polymer/iron-meta#^3.0.0-pre.18 * @polymer/polymer#^3.0.0

plastic-map-marker-svg version 1.0.1
### Dependencies * @atomiko/google-apis-holdout#0.0.6 * @atomiko/google-map-holdout#0.0.6 * @polymer/iron-meta#^3.0.0-pre.18 * @polymer/polymer#^3.0.0