https://github.com/donkeyclip/motorcortex-ol
https://github.com/donkeyclip/motorcortex-ol
map motorcortex motorcortex-plugin open-layers
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/donkeyclip/motorcortex-ol
- Owner: donkeyclip
- License: mit
- Created: 2019-01-11T07:28:43.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2026-03-01T02:00:29.000Z (3 months ago)
- Last Synced: 2026-03-01T05:51:44.496Z (3 months ago)
- Topics: map, motorcortex, motorcortex-plugin, open-layers
- Language: JavaScript
- Homepage:
- Size: 61.5 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# MotorCortex-Openlayers
**Table of Contents**
- [MotorCortex-Openlayers](#motorcortex-openlayers)
- [Demo](#demo)
- [Intro / Features](#intro--features)
- [Getting Started](#getting-started)
- [Installation](#installation)
- [Importing and Loading](#importing-and-loading)
- [Creating Incidents](#creating-incidents)
- [Map Clip](#map-clip)
- [GoTo](#goto)
- [Adding Incidents in your clip](#adding-incidents-in-your-clip)
- [Contributing](#contributing)
- [License](#license)
- [Sponsored by](#sponsored-by)
## Demo
[Check it out here](https://donkeyclip.github.io/motorcortex-ol/demo/)
# Intro / Features
MotorCortex Openlayers takes the capabilities of [Openlayers](https://openlayers.org/) library of creating a dynamic map in any web page.
The library exposes a Map Clip with the name Clip which will initialize an Openlayer Map instance where you can add animation with the "GoTo" Incident.
This Plugin exposes two Incident:
- Map Clip
- GoTo
# Getting Started
## Installation
```bash
$ npm install @donkeyclip/motorcortex-ol
# OR
$ yarn add @donkeyclip/motorcortex-ol
```
## Importing and loading
```javascript
import { loadPlugin } from "@donkeyclip/motorcortex";
import MapsDef from "@donkeyclip/motorcortex-ol";
const Maps = loadPlugin(MapsDef);
```
# Creating Incidents
## Map Clip
```javascript
const london = MapsDef.utils.fromLonLat([-0.12755, 51.507222]);
const bern = MapsDef.utils.fromLonLat([7.4458, 46.95]);
const clip = new Maps.Clip(
{
parameters: {
view: { center: london, zoom: 8 }
}
},
{
host: document.getElementById("clip"),
containerParams: { width: "1280px", height: "720px" }
}
);
```
### Map Clip Attrs
Map Clip take as a parameter a `view` object. This object contains the starting point (`center`) and the `zoom` number.
The `center` value has the following structure:
```javascript
center: MapsDef.utils.fromLonLat([-0.12755, 51.507222])
```
## GoTo
```javascript
const gotoBern = new Maps.GoTo(
{
animatedAttrs: {
goto: {
zoom: 3,
center: bern
}
}
},
{ duration: 4000, selector: "!#olmap" }
);
```
### GoTo Attrs
Goto Incident take as an attribute a `goto` object.This object contains the ending point (`center`) and the `zoom` number.
#### IMPORTANT
Along with the attributes, all `GoTo incidents` must take on their props the `selector` key with the value: `!#olmap`
# Adding Incidents in your clip
```javascript
mapsClipName.addIncident(incidentGoToName,startTime);
```
# Contributing
In general, we follow the "fork-and-pull" Git workflow, so if you want to submit patches and additions you should follow the next steps:
1. **Fork** the repo on GitHub
2. **Clone** the project to your own machine
3. **Commit** changes to your own branch
4. **Push** your work back up to your fork
5. Submit a **Pull request** so that we can review your changes
# License
[MIT License](https://opensource.org/licenses/MIT)
# Sponsored by
[
](https://donkeyclip.com)