Skip to content

Commit a80bbb1

Browse files
docs: add point.icon.symbol doc in kdk style.
1 parent 90bf827 commit a80bbb1

1 file changed

Lines changed: 24 additions & 2 deletions

File tree

docs/api/map/map-mixins.md

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -165,8 +165,9 @@ style: {
165165
dashOffset: 0 // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset
166166
},
167167
icon: {
168-
classes: undefined // must be specified, e.g 'las la-home'
169-
url: '' // url to the image to be displayed. Alternative to the classes property
168+
classes: undefined // CSS class to use when icon comes from an icon font, e.g 'las la-home' (one of classes/url/symbol must be specified)
169+
url: '' // url to the image to be displayed. Alternative to the classes/symbol properties.
170+
symbol: '' // url to the svg sprite file + id of icon (eg. /assets/icons.svg#aircraft). Alternative to the classes/url properties.
170171
color: 'black', // any HTML color or [Quasar color](https://quasar.dev/style/color-palette/)
171172
opacity: 1.0, // range from 0.0 (transparent) to 1.0 (opaque)
172173
size: '14px', // any HTML size
@@ -188,6 +189,27 @@ style: {
188189

189190
**KDK** comes with a set of predefined marker shapes: `circle`, `rect`, `rounded-rect`, `diamond`, `triangle`, `triangle-down`, `triangle-left`, `triangle-right`, `star`, `marker-pin`, `square-pin`. But it allows you to register you own shape. See the [Shapes](../core/components.md#shapes) section to understaned how to register a new shape.
190191

192+
When using the `point.icon.symbol` property, you must have an svg sprite file somewhere in which you define all your icons. An example of such a sprite file can be the following:
193+
194+
```xml
195+
<?xml version="1.0" encoding="utf-8"?>
196+
<svg xmlns="http://www.w3.org/2000/svg">
197+
<defs>
198+
<!-- icon1 -->
199+
<symbol id="icon1" viewBox="0 0 24 24">
200+
<path d="M19.88 ... "/>
201+
<path d="M1.8 ... "/>
202+
</symbol>
203+
<!-- icon2 -->
204+
<symbol id="icon2" viewBox="0 0 24 24">
205+
<path d="M88 ... "/>
206+
</symbol>
207+
</defs>
208+
</svg>
209+
```
210+
211+
And in the `point.icon.symbol` you can then reference your icons using `/path/where/to/fetch/file.svg#icon1`.
212+
191213
In addition and for backward compatibility, **KDK** supports an enhanced [simple style spec options](https://github.com/mapbox/simplestyle-spec) with the following mapping:
192214

193215
| SimpleStyleSpec | KDK Style |

0 commit comments

Comments
 (0)