<commit_before># Vue Map

![Animated GIF showing an example of map being updated and centered on a place in a list of Australian cities.](./vue-map.gif)

## Dependencies
- [Vue2Leaflet](https://www.npmjs.com/package/vue2-leaflet)
- [Leaflet](https://www.npmjs.com/package/leaflet)

## Components

### MapMain
This is a parent component for `MapArea` and `MapControls`. A JSON-formatted map dataset is defined here. This component listens to events emitted from `MapControls`, and uses the arguments passed along with events to set the props in `MapArea`.

#### Props
| Prop      | Description                                            | Type  | Required | Default |
| --------- | ------------------------------------------------------ | ----- | -------- | ------- |
| `mapData` | JSON-formatted lat/long data for ten Australian cities | Array | `true`   | none    |

#### Methods
| Method          | Description                                            | Parameters |
| --------------- | ------------------------------------------------------ | ---------- |
| `updateMapArea` | Get index of currently selected city name in `mapData` | `city`     |

### MapArea
A [Leaflet](http://leafletjs.com/) map using [OpenStreetMap](https://www.openstreetmap.org) data is rendered in this component. The [Vue2Leaflet](https://www.npmjs.com/package/vue2-leaflet) package provides `VMap`, `VTileLayer`, and `VMarker` components for creating the necessary map layers.

The map always centers on a place, which is currently selected in `MapControls`.

#### Props
| Prop    | Description                                         | Type   | Required | Default |
| ------- | --------------------------------------------------- | ------ | -------- | ------- |
| `place` | Place object containing city name and lat/long info | Object | `true`   | none    |

### MapControls
This is a custom component, which lists all places in the map dataset in a sidebar. The first item in the list is selected by default on page load. Users can change the selection any time after the initial load.

A search field in this component allows quick filtering of the dataset. Filtering reduces the number of options in the list and just like on page load, selects the first item in the reduced list. Users see an error message when their search term doesn’t match any place in the list.

#### Props
| Prop      | Description                                            | Type  | Required | Default |
| --------- | ------------------------------------------------------ | ----- | -------- | ------- |
| `mapData` | JSON-formatted lat/long data for ten Australian cities | Array | `true`   | none    |

#### Events
| Event name       | Description                                                                                                                                      |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `locationChange` | Triggered when user clicks one of the cities listed in `MapControls` sidebar or when the filtered list is updated and the first item is selected |

#### Methods
| Method        | Description                                                                  | Parameters |
| ------------- | ---------------------------------------------------------------------------- | ---------- |
| `handleClick` | Get city name with event object and trigger a custom, `locationChange` event | `event`    |

#### Computed Properties
| Computed         | Description                                                         | Parameters |
| ---------------- | ------------------------------------------------------------------- | ---------- |
| `filteredCities` | Get list of cities in `mapData` based on user input in search field | none       |

### MapHeader

The header shows the currently-selected city name along with the lat/long values. The header updates either on a search action (keyup) or a select action (click).
<commit_msg>Link to map JSON<commit_after># Vue Map

![Animated GIF showing an example of map being updated and centered on a place in a list of Australian cities.](./vue-map.gif)

## Dependencies
- [Vue2Leaflet](https://www.npmjs.com/package/vue2-leaflet)
- [Leaflet](https://www.npmjs.com/package/leaflet)

## Components

### MapMain
This is a parent component for `MapArea` and `MapControls`. A JSON-formatted map dataset is defined here. This component listens to events emitted from `MapControls`, and uses the arguments passed along with events to set the props in `MapArea`.

#### Props
| Prop      | Description                                            | Type  | Required | Default |
| --------- | ------------------------------------------------------ | ----- | -------- | ------- |
| `mapData` | JSON-formatted lat/long data for [ten Australian cities](https://github.com/wiinci/map-example/blob/master/static/data/aulatlong.json) | Array | `true`   | none    |

#### Methods
| Method          | Description                                            | Parameters |
| --------------- | ------------------------------------------------------ | ---------- |
| `updateMapArea` | Get index of currently selected city name in `mapData` | `city`     |

### MapArea
A [Leaflet](http://leafletjs.com/) map using [OpenStreetMap](https://www.openstreetmap.org) data is rendered in this component. The [Vue2Leaflet](https://www.npmjs.com/package/vue2-leaflet) package provides `VMap`, `VTileLayer`, and `VMarker` components for creating the necessary map layers.

The map always centers on a place, which is currently selected in `MapControls`.

#### Props
| Prop    | Description                                         | Type   | Required | Default |
| ------- | --------------------------------------------------- | ------ | -------- | ------- |
| `place` | Place object containing city name and lat/long info | Object | `true`   | none    |

### MapControls
This is a custom component, which lists all places in the map dataset in a sidebar. The first item in the list is selected by default on page load. Users can change the selection any time after the initial load.

A search field in this component allows quick filtering of the dataset. Filtering reduces the number of options in the list and just like on page load, selects the first item in the reduced list. Users see an error message when their search term doesn’t match any place in the list.

#### Props
| Prop      | Description                                            | Type  | Required | Default |
| --------- | ------------------------------------------------------ | ----- | -------- | ------- |
| `mapData` | JSON-formatted lat/long data for [ten Australian cities](https://github.com/wiinci/map-example/blob/master/static/data/aulatlong.json) | Array | `true`   | none    |

#### Events
| Event name       | Description                                                                                                                                      |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `locationChange` | Triggered when user clicks one of the cities listed in `MapControls` sidebar or when the filtered list is updated and the first item is selected |

#### Methods
| Method        | Description                                                                  | Parameters |
| ------------- | ---------------------------------------------------------------------------- | ---------- |
| `handleClick` | Get city name with event object and trigger a custom, `locationChange` event | `event`    |

#### Computed Properties
| Computed         | Description                                                         | Parameters |
| ---------------- | ------------------------------------------------------------------- | ---------- |
| `filteredCities` | Get list of cities in `mapData` based on user input in search field | none       |

### MapHeader

The header shows the currently-selected city name along with the lat/long values. The header updates either on a search action (keyup) or a select action (click).

{'fraction_non_alphanumeric': 0.2386652158142909, 'fraction_numerical': 0.0009672349171805102, 'mean_word_length': 1.3473325766174802, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 10, 'lorem ipsum': 0, 'www.': 8, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 36, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2666600', 'n_tokens_mistral': 1750, 'n_tokens_neox': 1689, 'n_words': 723}