Table of Contents
- MotorCortex-Openlayers
- Intro / Features
- Getting Started
- Creating Incidents
- Adding Incidents in your clip
- Contributing
- License
- Sponsored by
MotorCortex Openlayers takes the capabilities of Openlayers 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
$ npm install @donkeyclip/motorcortex-ol
# OR
$ yarn add @donkeyclip/motorcortex-olimport { loadPlugin } from "@donkeyclip/motorcortex";
import MapsDef from "@donkeyclip/motorcortex-ol";
const Maps = loadPlugin(MapsDef);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 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:
center: MapsDef.utils.fromLonLat([-0.12755, 51.507222])const gotoBern = new Maps.GoTo(
{
animatedAttrs: {
goto: {
zoom: 3,
center: bern
}
}
},
{ duration: 4000, selector: "!#olmap" }
);Goto Incident take as an attribute a goto object.This object contains the ending point (center) and the zoom number.
Along with the attributes, all GoTo incidents must take on their props the selector key with the value: !#olmap
mapsClipName.addIncident(incidentGoToName,startTime);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:
- Fork the repo on GitHub
- Clone the project to your own machine
- Commit changes to your own branch
- Push your work back up to your fork
- Submit a Pull request so that we can review your changes
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent