Skip to content

Commit

Permalink
Merge pull request #188 from PNKBizz/v10
Browse files Browse the repository at this point in the history 
V10
  • Loading branch information
@PNKBizz
PNKBizz authored Dec 2, 2019
2 parents 07e6328 + 88c7b24 commit cea51fd
Show file tree
Hide file tree
Showing 10 changed files with 487 additions and 257 deletions.
72 changes: 61 additions & 11 deletions docs/en/guide/Map.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,83 @@ You can assign a class to parent element of map via attribute `ymap-class`. If t

All markers are added to the map via `GeoObjectCollection` by default, but if there is a huge count of markers, the map rendering will take a lof of time even when markers grouping to clusters. In this case, it is recommended to use `ObjectManager` and assign the attribute of map `useObjectManager`, but then you lose the opportunity to specify to each markers `callback`.<br>

The attributes `coords`, `placemarks` и `zoom` are observable. The map is react if these attributes are changing.
The attributes `coords`, `bounds` and `zoom` are observable. The map is react if these attributes are changing.

## Events

| Event name | Payload |
| ----- | ----- |
| 'click' | [map event](https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/events-docpage/) |
| 'map-was-initialized' | Link to [map instance](https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Map-docpage/) |
| 'markers-was-change' | Array of changed markers ids |
| 'markers-was-delete' | Array of deleted markers ids |
<table>
<thead>
<tr>
<th>Event name</th>
<th>Payload</th>
</tr>
</thead>
<tbody>
<tr>
<td>map-was-initialized</td>
<td>Link to <a href="https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Map-docpage/">map instance</a></td>
</tr>
<tr>
<td><a href="https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/Map-docpage/#Map__events-summary">actionend</a></td>
<td rowspan="12" style="text-align: center;">
<a href="https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/events-docpage/">map event</a>
</td>
</tr>
<tr>
<td><a href="https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/Map-docpage/#Map__events-summary">balloonclose</a></td>
</tr>
<tr>
<td><a href="https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/Map-docpage/#Map__events-summary">balloonopen</a></td>
</tr>
<tr>
<td><a href="https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/Map-docpage/#Map__events-summary">boundschange</a></td>
</tr>
<tr>
<td><a href="https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/Map-docpage/#Map__events-summary">click</a></td>
</tr>
<tr>
<td><a href="https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/Map-docpage/#Map__events-summary">contextmenu</a></td>
</tr>
<tr>
<td><a href="https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/Map-docpage/#Map__events-summary">dblclick</a></td>
</tr>
<tr>
<td><a href="https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/Map-docpage/#Map__events-summary">destroy</a></td>
</tr>
<tr>
<td><a href="https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/Map-docpage/#Map__events-summary">hintclose</a></td>
</tr>
<tr>
<td><a href="https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/Map-docpage/#Map__events-summary">hintopen</a></td>
</tr>
<tr>
<td><a href="https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/Map-docpage/#Map__events-summary">optionschange</a></td>
</tr>
<tr>
<td><a href="https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/Map-docpage/#Map__events-summary">sizechange</a></td>
</tr>
<tr>
<td><a href="https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/Map-docpage/#Map__events-summary">typechange</a></td>
</tr>
</tbody>
</table>

## Attributes

| Attribute | Type | Description |
| ----- | ----- | ----- |
| settings | Object | Settings of map. API Key, language and version. |
| coords | Array | Map center coordinates. [ lat, lng ]. *Required* |
| zoom | Number | Zoom map value (from 0 to 19). *Default: 18*. |
| coords | Array | Map center coordinates. [ lat, lng ]. May use with `.sync`. *Required* |
| zoom | Number | Zoom map value (from 0 to 19). May use with `.sync`. *Default: 18*. |
| bounds | Array | Coordinates of the left bottom and right top corners of the map. If defined, `coords` and `center` are ignored. May use with `.sync`. |
| [cluster-options](https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/ClusterPlacemark-docpage/#param-options) | Object | An object where the keys are the names of the clusters, and the values are the objects of options these clusters. In options you can point field `clusterIconContentLayout` (type `String`) for HTML template of cluster icon, field `layout` (type `String`) and HTML template for `balloonItemContentLayout`. There is also `createCluster` field for overriding default creating cluster function (field `use-object-manager` have to be turned off).|
| cluster-callbacks | Object | An object where the keys are the names of the clusters, and the values are the objects of events these clusters, e.g. `{ clusterName: { click: function() {...}, contextmenu: anotherFunction } }` |
| [behaviors](https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/map.behavior.Manager-docpage/#param-behaviors) | Array | Array of connected map behaviors. All other values are considered off.|
| [controls](https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/control.Manager-docpage/#add-param-control) | Array | Array of connected map controls. All other values are considered offth.|
| detailed-controls | Object | An object where the keys are the elements of map control, and the values are the objects of element settings. Designed for fine setting of control elements. |
| map-type | String | Map type. Valid values: `map, satellite, hybrid`. *Default: map*. |
| scroll-zoom | Boolean | Set `false` to disable map zoom on the page when you are scrolling. *Default: true* |
| zoom-control | Object | **Deprecated**. Use `detailed-controls` |
| placemarks | Array of Objects | Array of map labels. There are markers only type of `placemark`. Objects with fields: coordinates ([lat, lng]), properties, options. [More](https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Placemark-docpage/) |
| placemarks | Array of Objects | **Deprecated**. Use marker component |
| use-object-manager | Boolean | Set `true` for use Object Manager. Used if there is huge count of markers on the map. *Default: false* |
| object-manager-clusterize | Boolean | Clustering with Object Manager. *Default: true* |
| ymap-class | String | Defines class for element, where rendering the map instance. If the attribute is not defined, the element uses style: `width: 100%; height: 100%;` |
Expand Down
59 changes: 56 additions & 3 deletions docs/en/guide/Marker.md
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,72 @@
# Marker

You can define map markers by using component `<ymap-marker>` or using these markers like map attribute `placemarks`. In second time you can use only `Placemark` type markers. [Interface description](https://tech.yandex.ru/maps/doc/jsapi/2.0/ref/reference/GeoObject-docpage/). You can use both these methods in parallel.
You can define map markers by using component `<ymap-marker>`.

::: danger Attention!
Since version `0.10` you can define markers through `ymap-marker` only. Map attribute `placemarks` not supported
:::

::: tip Take a look,
For each marker you need to add property `markerId`
:::

If you define markers through component `<ymap-marker>` - you can indicate its type by using attribute `marker-type`. Allowable values:
You can indicate marker type by using attribute `marker-type`. Allowable values:
* Placemark
* Polyline
* Rectangle
* Polygon
* Circle

## Events

<table>
<thead>
<tr>
<th>Event name</th>
<th>Payload</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/GeoObject-docpage/#GeoObject__events-summary">balloonclose</a></td>
<td rowspan="10" style="text-align: center;">
<a href="https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/events-docpage/">marker event</a>
</td>
</tr>
<tr>
<td><a href="https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/GeoObject-docpage/#GeoObject__events-summary">balloonopen</a></td>
</tr>
<tr>
<td><a href="https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/GeoObject-docpage/#GeoObject__events-summary">click</a></td>
</tr>
<tr>
<td><a href="https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/GeoObject-docpage/#GeoObject__events-summary">contextmenu</a></td>
</tr>
<tr>
<td><a href="https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/GeoObject-docpage/#GeoObject__events-summary">dblclick</a></td>
</tr>
<tr>
<td><a href="https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/GeoObject-docpage/#GeoObject__events-summary">drag</a></td>
</tr>
<tr>
<td><a href="https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/GeoObject-docpage/#GeoObject__events-summary">dragend</a></td>
</tr>
<tr>
<td><a href="https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/GeoObject-docpage/#GeoObject__events-summary">dragstart</a></td>
</tr>
<tr>
<td><a href="https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/GeoObject-docpage/#GeoObject__events-summary">hintclose</a></td>
</tr>
<tr>
<td><a href="https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/GeoObject-docpage/#GeoObject__events-summary">hintopen</a></td>
</tr>
</tbody>
</table>

::: danger Важно!
Since version `0.10` attribute `callbacks` not supported. You can listen component events.
:::

## Attributes

| Attribute | Type | Description | Marker-types |
Expand All @@ -31,7 +85,6 @@ If you define markers through component `<ymap-marker>` - you can indicate its t
| cluster-name | String | Cluster name to grouping of markers | All |
| properties | Object | [Marker settings](https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject-docpage/#param-feature.properties) | All |
| options | Object | [Marker options](https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject-docpage/#param-options) | All |
| callbacks | Object | Object where the key is name of event, and the value is callback-function, e.g. { click: function() {...}, contextmenu: anotherFunction }. [List of events](https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject-docpage/#events-summary) | All |
| [balloonTemplate](/examples/#кастомный-темпnейт-баnуна) | String | HTML Template for balloon | All |

# Icons
Expand Down
Loading

0 comments on commit cea51fd

Please sign in to comment.