{"id":23550057,"url":"https://github.com/edwardsharp/ecotopia-today","last_synced_at":"2026-02-13T12:02:09.867Z","repository":{"id":139692399,"uuid":"143567448","full_name":"edwardsharp/ecotopia-today","owner":"edwardsharp","description":"ecotopia.today openlayers component prototype","archived":false,"fork":false,"pushed_at":"2018-10-28T17:22:04.000Z","size":93497,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-17T11:45:34.496Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://edwardsharp.github.io/ecotopia-today/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/edwardsharp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-04T22:36:18.000Z","updated_at":"2018-09-18T00:08:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"5ccc687c-6b20-4208-8f8c-04870deeeefe","html_url":"https://github.com/edwardsharp/ecotopia-today","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edwardsharp%2Fecotopia-today","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edwardsharp%2Fecotopia-today/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edwardsharp%2Fecotopia-today/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edwardsharp%2Fecotopia-today/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/edwardsharp","download_url":"https://codeload.github.com/edwardsharp/ecotopia-today/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254359016,"owners_count":22058033,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-26T10:12:56.624Z","updated_at":"2026-02-13T12:02:09.800Z","avatar_url":"https://github.com/edwardsharp.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ecotopia-today \n\nA Vue.js app based on a prototype by Brian Holmes (@Brian393). \n\n🗣 [OpenLayers](https://openlayers.org/)  \n🗣 [vue-image-lightbox](https://www.npmjs.com/package/vue-image-lightbox)  \n\nhttps://edwardsharp.github.io/ecotopia-today/\n\nhttp://ecotopia.today/\n\n## Project setup\n\n```sh\nnpm install\n```\n\n#### Compiles and hot-reloads for development\n\n```sh\nnpm start\n```\n\n#### Compiles and minifies for production\n\n```sh\nnpm run build\n```\n\n#### Lints and fixes files\n\n```sh\nnpm run lint\n```\n\n#### Build \u0026 Deploy\n\nnote: change the `baseUrl` option in the `vue.config.js` file accordingly.\n\n```sh\nnpm run build\n```\n\nEverything inside the dist/ folder can be copied to your webserver. \n\n#### Deploy to GitHub Pages\n\n```sh\nnpm run deploy\n```\n\n## Components\n\n### `\u003cAccordion/\u003e`\n\nImport the `Accordion.vue` component (note: relative path for import) \u0026 declare this in the `components` object, like so:\n\n```\n\u003cscript\u003e\nimport Accordion from '../../components/Accordion.vue'\nexport default {\n  name: 'ExampleComponent',\n  components: {\n    Accordion\n  }\n}\n\u003c/script\u003e\n```\n\nThen in your `\u003ctemplate\u003e` use like so:\n\n```\n\u003cAccordion :open=\"true\"\u003e\n  \u003ch2 slot=\"header\"\u003eTitle Link Text\u003c/h2\u003e\n  Content to hide/show goes here.\n\u003c/Accordion\u003e\n```\n\n### `\u003cAppLightBox/\u003e`\n\nImport the `AppLightBox.vue` component (note: relative path for import), declare AppLightBox in the `components` object, \u0026 setup an array property with images, like so:\n\n```\n\u003cscript\u003e\nimport AppLightBox from '../../components/AppLightBox.vue'\nexport default {\n  name: 'ExampleComponent',\n  components: {\n    AppLightBox\n  },\n  data: function () {\n    return {\n      damImages: [\n        {\n          thumb: 'images/Dams/ArrowLakesDam.jpg',\n          src: 'images/Dams/ArrowLakesDam.jpg',\n          caption: '\u003cb\u003eArrow Lakes Dam\u003c/b\u003e'\n        },\n        {\n          thumb: 'images/Dams/BonnevilleDam.jpg',\n          src: 'images/Dams/BonnevilleDam.jpg',\n          caption: 'Bonneville Dam'\n        }\n      ]\n    }\n  }\n}\n\u003c/script\u003e\n```\n\nThen in your `\u003ctemplate\u003e` use like so:\n\n```\n\u003cAppLightBox :images=\"damImages\"\u003eA Dam Light Box\u003c/AppLightBox\u003e \n```\n\nFurther customization of `\u003cLightBox/\u003e`. 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: \n\nAdd the `showThumbs` property to `AppLightBox.vue`:\n\n```\n\u003cLightBox v-if=\"isOpen\" :images=\"images\" :showCaption=\"true\" @onOpened=\"onOpenChange\" :showThumbs=\"false\"\u003e\u003c/LightBox\u003e\n```\n\nThis will make every instance of `\u003cAppLightBox/\u003e` not show thumbnails. If we want to extend \u0026 proxy these properties via `\u003cAppLightBox/\u003e` then we just need to setup this property in `AppLightBox.vue` like so:\n\nadd a new key \u0026 type value in the `props` object:\n\n```js\nprops: {\n  images: Array,\n  showThumbs: Boolean\n}\n```\n\nset the `\u003cLightBox/\u003e` element to use this property: \n\n```\n\u003cLightBox :showThumbs=\"showThumbs\"\u003e\u003c/LightBox\u003e\n```\n\nthen you can customize this per `\u003cAppLightBox/\u003e` instance like so:\n\n```\n\u003cAppLightBox :showThumbs=\"true\"\u003eA Dam Light Box\u003c/AppLightBox\u003e \n```\n\n### `\u003cMap/\u003e`\n\nThe 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 `\u003crouter-link\u003e` 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. \n\nThere's also some functionality to:  \n* handle resizing the map when the aside conent is hidden/shown (via [Vuex](https://vuex.vuejs.org/) see: `store.js`)  \n* close any open popups when navigating to another view\n\nAt 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 \u0026 MapMegaregion.vue). \n\n\n## misc.\n\n### links to re-position map\n\n```js\nimport {eventBus} from '../../main'\n```\n\ndeclare an emit method like so:\n\n```js\nmethods: {\n    emit: function (method, args) {\n      eventBus.$emit(method, args)\n    }\n  } \n```\n\nUse in `\u003ctemplate\u003e`s like so:\n\n```html\n\u003cspan class=\"link\" @click=\"emit('set-map-view', {center: [-121.2, 51.0], resolution: 4500, minResolution: 1, maxResolution: 16000})\"\u003eset-map-view\u003c/span\u003e\n```\n\n_note_ minResolution \u0026 maxResolution are optional. \n\n### util/sort_dam_json.js\n\na simple utility to re-sort the .geojson files used for layers via `watershedDamsTransformationLayers` in chronological order. to use: \n\n```sh\ncd util/\n./sort_dam_json.js\n```\n\n\u003chr\u003e\n\u003cp align=\"center\"\u003e \nmade with 🖤 in NYC\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedwardsharp%2Fecotopia-today","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedwardsharp%2Fecotopia-today","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedwardsharp%2Fecotopia-today/lists"}