# MapEngine

# Settings

## Clustering

---

Clustering is used to group nearby markers together.

<table border="1" id="bkmrk-option-description-e" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><tbody><tr><td style="vertical-align: top;"><table border="1" style="border-collapse: collapse; width: 100.388%; height: 229.797px;"><colgroup><col style="width: 38.7868%;"></col><col style="width: 61.0838%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="background-color: rgb(236, 240, 241); height: 29.7969px;">**Option**</td><td style="background-color: rgb(236, 240, 241); height: 29.7969px;">**Description**</td></tr><tr style="height: 30.1094px;"><td style="height: 30.1094px;">`Enable Clustering`</td><td style="height: 30.1094px;">Toggles clustering on or off</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">`Min Zoom`</td><td style="height: 46.5938px;">Minimum zoom level at which clusters are generated</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">`Max Zoom`</td><td style="height: 46.5938px;">Maximum zoom level at which clusters are generated</td></tr><tr style="height: 30.1094px;"><td style="height: 30.1094px;">`Radius`</td><td style="height: 30.1094px;">Cluster radius (in pixels)</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">`Extent`</td><td style="height: 46.5938px;">Tile extent - radius is calculated relative to this value</td></tr></tbody></table>

</td><td>[![image.png](https://wiki.sumnersd.org/uploads/images/gallery/2023-11/scaled-1680-/B0VTUPtl71HDVT1E-image.png)](https://wiki.sumnersd.org/uploads/images/gallery/2023-11/B0VTUPtl71HDVT1E-image.png)

</td></tr></tbody></table>

## Project

---

<table border="1" id="bkmrk--1" style="border-collapse: collapse; width: 55.3086%;"><colgroup><col style="width: 100%;"></col></colgroup><tbody><tr><td>[![image.png](https://wiki.sumnersd.org/uploads/images/gallery/2023-11/scaled-1680-/7VncJ4lJ3UA6zf2n-image.png)](https://wiki.sumnersd.org/uploads/images/gallery/2023-11/7VncJ4lJ3UA6zf2n-image.png)

</td></tr></tbody></table>

### Exporting

Clicking the **Export** button will save your sources and layers to a file and download it to your device.

### Importing

Clicking the **Choose file** button will prompt you to upload a MapEngine export file. The application will remove any existing data and rebuild the sources and layers (*including their visibility, style, target filter, and relationships*) contained in the export file.

# Sources

### Records

---

<table border="1" id="bkmrk-record-source-files-" style="border-collapse: collapse; width: 100%; border-width: 0px;"><colgroup><col style="width: 31.2602%;"></col><col style="width: 68.7398%;"></col></colgroup><tbody><tr><td style="border-width: 0px;">[![image.png](https://wiki.sumnersd.org/uploads/images/gallery/2023-11/scaled-1680-/eWNvkfdjULVuRzmi-image.png)](https://wiki.sumnersd.org/uploads/images/gallery/2023-11/eWNvkfdjULVuRzmi-image.png)</td><td style="vertical-align: top; border-width: 0px;">Record source files are a JSON formatted array of objects with each object containing at minimum a `lat` and `lng` key. Each record is attached to a marker which is placed on the map according to the latitude (`lat`) and longitude (`lng`) keys. Any other arbitrary properties and values can be included in each record.

```json
[
  {
    "First Name":"John",
    "Last Name":"Smith",
	...
    "lat":"47.204935",
    "lng":"-122.237967"
  },
  {
    "First Name":"Jane",
	"Last Name":"Doe",
    ...
    "lat":"47.204157",
	"lng":"-122.231124"
  }
]
```

</td></tr></tbody></table>

Skyward typically exports data in CSV format, however there are many free online tools which can convert CSV files to JSON. The Technology Services department can perform bulk geocoding of addresses if needed.

<table border="1" id="bkmrk-csv-json-first-name%2C" style="border-collapse: collapse; width: 100%; height: 59.5938px;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="height: 29.7969px; background-color: rgb(236, 240, 241);">**CSV**</td><td style="height: 29.7969px; background-color: rgb(236, 240, 241);">**JSON**</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">```csv
First Name,Last Name,lat,lng
John,Smith,47.204935,-122.237967
Jane,Doe,47.204157,-122.231124
```

</td><td style="height: 29.7969px;">```JSON
[
  {
    "First Name":"John",
    "Last Name":"Smith",
    "lat":"47.204935",
    "lng":"-122.237967"
  },
  {
    "First Name":"Jane",
	"Last Name":"Doe",
    "lat":"47.204157",
	"lng":"-122.231124"
  }
]
```

</td></tr></tbody></table>

###   


### GeoJSON

---

<table border="1" id="bkmrk-a-geojson-source-is-" style="border-collapse: collapse; width: 100%; border-width: 0px;"><colgroup><col style="width: 32.6544%;"></col><col style="width: 67.4692%;"></col></colgroup><tbody><tr><td style="border-width: 0px;">[![image.png](https://wiki.sumnersd.org/uploads/images/gallery/2023-11/scaled-1680-/NUn8zOrtOSddPnlf-image.png)](https://wiki.sumnersd.org/uploads/images/gallery/2023-11/NUn8zOrtOSddPnlf-image.png)</td><td style="vertical-align: top; border-width: 0px;">A GeoJSON source is a file which defines geospatial features (*e.g school boundaries*) in the [GeoJSON format](https://en.wikipedia.org/wiki/GeoJSON). A repository of optimized SBLSD boundary files can be downloaded from [github.com/sblsd/gis](https://github.com/sblsd/gis).</td></tr></tbody></table>

# Layers

Layers provide a way to style and organize the markers associated with source records. Markers can be targeted using attributes and values defined in the records.

### Creating a Layer

---

To create a layer, click the **New Layer** button

[![image.png](https://wiki.sumnersd.org/uploads/images/gallery/2023-11/scaled-1680-/AQijNUQ1ZrLmE3rO-image.png)](https://wiki.sumnersd.org/uploads/images/gallery/2023-11/AQijNUQ1ZrLmE3rO-image.png)

### Editing a Layer

---

#### Title

The layer title can be any arbitrary string of text and is only used in the UI

#### Target

The layer target is a JavaScript expression which should evaluate to either `true` or `false`. Upon saving a layer, the target is evaluated against every source record in order to associate records with the layer.

The constant `record` is exposed to the target expression and can be used to filter records based on source data. For example, lets say this is what our source records look like (*represented as a table to save space*):

<table border="1" id="bkmrk-school-grade-id-the-" style="border-collapse: collapse; width: 100%; height: 148.984px;"><colgroup><col style="width: 33.3745%;"></col><col style="width: 33.3745%;"></col><col style="width: 33.3745%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="height: 29.7969px; background-color: rgb(236, 240, 241);">**School**</td><td style="height: 29.7969px; background-color: rgb(236, 240, 241);">**Grade**</td><td style="height: 29.7969px; background-color: rgb(236, 240, 241);">**Id**</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">THE</td><td style="height: 29.7969px;">1</td><td style="height: 29.7969px;">1</td></tr><tr><td>THE</td><td>1</td><td>2</td></tr><tr><td>DEE</td><td>2</td><td>3</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">DEE</td><td style="height: 29.7969px;">3</td><td style="height: 29.7969px;">4</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">THE</td><td style="height: 29.7969px;">3</td><td style="height: 29.7969px;">5</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">DEE</td><td style="height: 29.7969px;">5</td><td style="height: 29.7969px;">6</td></tr></tbody></table>

```javascript
// Matches records where Grade is equal to 1. (2 records)
record['Grade'] == '1'

// Matches records where School is equal to THE. (3 records)
record['School'] == 'THE'

// Matches records where Grade is equal to 1, 2, or 3. (5 records)
['1','2','3'].includes(record['Grade'])

// Matches records where School is equal to LRE. (0 records)
record['School'] == 'LRE'
```

#### Children

Layers can nested by dragging and dropping them in to the parent layer's children container.

<table border="1" id="bkmrk-child-layers%3A-inheri" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><tbody><tr><td>[![mapengine-layer-child.gif](https://wiki.sumnersd.org/uploads/images/gallery/2023-11/6Noaqo5BKdWb4Lsk-mapengine-layer-child.gif)](https://wiki.sumnersd.org/uploads/images/gallery/2023-11/6Noaqo5BKdWb4Lsk-mapengine-layer-child.gif)</td><td style="vertical-align: top;">Child layers:

- Inherit their parent's style settings
- Inherit their parent's visibility
- Evaluate their target filter **only** against records that are also matched by their parent
- Are deleted when their parent is deleted

</td></tr></tbody></table>