-
Notifications
You must be signed in to change notification settings - Fork 21
/
Copy pathpx-map-marker-symbol.html
129 lines (105 loc) · 5.32 KB
/
px-map-marker-symbol.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!--
Copyright (c) 2018, General Electric
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!--
Relative paths assume component is being run from inside an app or another component, where dependencies are flat
siblings. When this component is run from its own repo (e.g. tests, examples), we assume the server is started with
'gulp serve' (or similar server setup) to enable correct finding of bower dependencies for local runs.
-->
<link rel="import" href="../polymer/polymer.html"/>
<!-- Load required PxMapBehaviors -->
<link rel="import" href="px-map-behavior-marker.html">
<!--
This subcomponent places a marker on the map with an icon configurable by the user.
The marker can be used to show a point-of-interest or represent a physical asset.
It can be configured to show an asset's state (through color) and updated
when the asset's state changes. It can also be configured to show icons from
px-icon-set or other svg icons (e.g. Google's iron-icon).
Place a popup inside the `px-map-marker-symbol` to show data about the point
to the user when they tap, hover over, or interact with the marker.
Interactions with the marker will trigger events (documented on the component's
API page). Attach a listener to the marker or its parent component(s) to trigger
view changes that show additional data about the point elsewhere in your app.
### Usage
Use this component inside of a `px-map` element, or inside of a `px-map-layer-group`
element to group it with other geospatial visualizations.
Enable the `fit-to-markers` attribute on the `px-map` element to automatically
fit this marker and any other markers drawn within the visual boundaries of the
map when it is first loaded.
For example, the following map will show a single marker within a layer group
and automatically fit the marker in the view when the map is loaded:
<px-map fit-to-markers>
<px-map-layer-group name="Landmarks">
<px-map-marker-symbol lat="35.6654861" lng="139.7706668" icon="px-utl:camera"></px-map-marker-symbol>
</px-map-layer-group>
</px-map>
You can place multiple markers on a px-map or within a px-map-layer-group:
<px-map fit-to-markers>
<px-map-marker-symbol lat="37.7654861" lng="-122.8706668" icon="px-obj:airplane"></px-map-marker-symbol>
<px-map-marker-symbol lat="37.6654861" lng="-122.7706668" icon="px-obj:truck"></px-map-marker-symbol>
<px-map-marker-symbol lat="37.9654861" lng="-122.9706668" icon="px-obj:boiler"></px-map-marker-symbol>
</px-map>
Use the `icon` attribute to add a custom icon to the marker. If nothing is
specified for `icon`, the icon will default to a star (px-nav:favorite).
<px-map-marker-symbol lat="37.7654861" lng="-122.8706668" icon="px-obj:plant"></px-map-marker-symbol>
Px-icons will work out of the box, but if you would like to style them or use an
icon from an icon set other than px-icon-set, you can use the style variables
listed in the Styling section below to set the icon's stroke color, stroke width,
and fill color.
<style is="custom-style">
.custom-icon{
--px-map-marker-symbol-stroke:none;
--px-map-marker-symbol-fill:white;
}
</style>
<px-map fit-to-markers>
<px-map-marker-symbol lat="38" lng="-121" icon="maps:directions-bike" class="custom-icon">
</px-map>
### Styling
The following custom properties are available for styling:
Custom property | Description
:----------------|:-------------
`--px-map-icon-border-color` | Border color for map markers
`--px-map-icon-unknown-color` | Marker color for 'unknown' type markers
`--px-map-icon-info-color` | Marker color for 'info' type markers
`--px-map-icon-warning-color` | Marker color for 'warning' type markers
`--px-map-icon-important-color` | Marker color for 'important' type markers
`--px-map-color-custom-0` | These are the colors used to represent 'custom-n' type markers. Custom colors MUST start at 0 and cannot contain gaps between numbers. You may define custom type markers up to `custom-100`.
`--px-map-color-custom-1` |
`--px-map-color-custom-2` |
`--px-map-color-custom-n` |
`--px-map-marker-symbol-stroke` | Stroke color for icons in symbol markers
`--px-map-marker-symbol-stroke-width` | Stroke width for icons in symbol markers
`--px-map-marker-symbol-fill` | Fill color for icons in symbol markers
@element px-map-marker-symbol
@blurb Creates a symbol marker that can be attached to the map.
@homepage index.html
@demo index.html
-->
<dom-module id="px-map-marker-symbol">
<template>
<style>
:host {
--iron-icon-stroke-color: var(--px-map-marker-symbol-stroke, white);
--iron-icon-stroke-width: var(--px-map-marker-symbol-stroke-width, 2px);
--iron-icon-fill-color: var(--px-map-marker-symbol-fill, none);
}
</style>
<slot></slot>
</template>
</dom-module>
<script>
Polymer({
is: 'px-map-marker-symbol',
behaviors: [PxMapBehavior.SymbolMarker]
});
</script>