https://github.com/edwardsharp/ecotopia-today
ecotopia.today openlayers component prototype
https://github.com/edwardsharp/ecotopia-today
Last synced: 4 months ago
JSON representation
ecotopia.today openlayers component prototype
- Host: GitHub
- URL: https://github.com/edwardsharp/ecotopia-today
- Owner: edwardsharp
- License: gpl-3.0
- Created: 2018-08-04T22:36:18.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-10-28T17:22:04.000Z (over 7 years ago)
- Last Synced: 2025-02-17T11:45:34.496Z (over 1 year ago)
- Language: Vue
- Homepage: https://edwardsharp.github.io/ecotopia-today/
- Size: 89.2 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ecotopia-today
A Vue.js app based on a prototype by Brian Holmes (@Brian393).
🗣 [OpenLayers](https://openlayers.org/)
🗣 [vue-image-lightbox](https://www.npmjs.com/package/vue-image-lightbox)
https://edwardsharp.github.io/ecotopia-today/
http://ecotopia.today/
## Project setup
```sh
npm install
```
#### Compiles and hot-reloads for development
```sh
npm start
```
#### Compiles and minifies for production
```sh
npm run build
```
#### Lints and fixes files
```sh
npm run lint
```
#### Build & Deploy
note: change the `baseUrl` option in the `vue.config.js` file accordingly.
```sh
npm run build
```
Everything inside the dist/ folder can be copied to your webserver.
#### Deploy to GitHub Pages
```sh
npm run deploy
```
## Components
### ``
Import the `Accordion.vue` component (note: relative path for import) & declare this in the `components` object, like so:
```
import Accordion from '../../components/Accordion.vue'
export default {
name: 'ExampleComponent',
components: {
Accordion
}
}
```
Then in your `` use like so:
```
Title Link Text
Content to hide/show goes here.
```
### ``
Import the `AppLightBox.vue` component (note: relative path for import), declare AppLightBox in the `components` object, & setup an array property with images, like so:
```
import AppLightBox from '../../components/AppLightBox.vue'
export default {
name: 'ExampleComponent',
components: {
AppLightBox
},
data: function () {
return {
damImages: [
{
thumb: 'images/Dams/ArrowLakesDam.jpg',
src: 'images/Dams/ArrowLakesDam.jpg',
caption: '<b>Arrow Lakes Dam</b>'
},
{
thumb: 'images/Dams/BonnevilleDam.jpg',
src: 'images/Dams/BonnevilleDam.jpg',
caption: 'Bonneville Dam'
}
]
}
}
}
```
Then in your `` use like so:
```
A Dam Light Box
```
Further customization of ``. See: https://www.npmjs.com/package/vue-image-lightbox#properties for all configuration options provided by this module. To extend more options (for example the `showThumbs` property) from this module do something like:
Add the `showThumbs` property to `AppLightBox.vue`:
```
```
This will make every instance of `` not show thumbnails. If we want to extend & proxy these properties via `` then we just need to setup this property in `AppLightBox.vue` like so:
add a new key & type value in the `props` object:
```js
props: {
images: Array,
showThumbs: Boolean
}
```
set the `` element to use this property:
```
```
then you can customize this per `` instance like so:
```
A Dam Light Box
```
### ``
The map component is a wrapper for working with the openlayers library. Different map views are managed via the [Vue Router](https://router.vuejs.org/) (see: `router.js`) so `` elements can be used to navigate to different map views. Each different map view has a corresponding method to setup (init) the OpenLayers map details. Generally there's some set of layers that will be used on every map view so those are stored in a common method that returns those layers (see: `watershedBaseLayers()`). Then each particular view can `.concat()` any additional layers needed.
There's also some functionality to:
* handle resizing the map when the aside conent is hidden/shown (via [Vuex](https://vuex.vuejs.org/) see: `store.js`)
* close any open popups when navigating to another view
At the moment only the Watershed map views are built. In the future `Map.vue` will move to `MapWatershed.vue` and the other two main map categories will have corresponding component files (e.g. MapBioregion.vue & MapMegaregion.vue).
## misc.
### links to re-position map
```js
import {eventBus} from '../../main'
```
declare an emit method like so:
```js
methods: {
emit: function (method, args) {
eventBus.$emit(method, args)
}
}
```
Use in ``s like so:
```html
set-map-view
```
_note_ minResolution & maxResolution are optional.
### util/sort_dam_json.js
a simple utility to re-sort the .geojson files used for layers via `watershedDamsTransformationLayers` in chronological order. to use:
```sh
cd util/
./sort_dam_json.js
```
made with 🖤 in NYC