{"id":21890945,"url":"https://github.com/statikbe/repair-map","last_synced_at":"2026-05-17T02:43:22.561Z","repository":{"id":42001720,"uuid":"363157176","full_name":"statikbe/repair-map","owner":"statikbe","description":"This package contains a Vue map component, styled with TailwindCSS.","archived":false,"fork":false,"pushed_at":"2024-04-02T08:48:36.000Z","size":62737,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-02T22:30:08.723Z","etag":null,"topics":["leafletjs","tailwindcss","vuejs"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/statikbe.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"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":"2021-04-30T13:56:51.000Z","updated_at":"2023-01-05T11:48:37.000Z","dependencies_parsed_at":"2024-04-02T09:54:23.163Z","dependency_job_id":null,"html_url":"https://github.com/statikbe/repair-map","commit_stats":null,"previous_names":[],"tags_count":54,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/statikbe%2Frepair-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/statikbe%2Frepair-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/statikbe%2Frepair-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/statikbe%2Frepair-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/statikbe","download_url":"https://codeload.github.com/statikbe/repair-map/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244898458,"owners_count":20528341,"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":["leafletjs","tailwindcss","vuejs"],"created_at":"2024-11-28T12:18:23.197Z","updated_at":"2025-10-25T06:08:24.695Z","avatar_url":"https://github.com/statikbe.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Repair map\n\n## Implementation as an embed (iframe)\n\nThe easiest, but least configurable way to implement the Repair map component, is to use an embedded iframe. It's recommended to include [iframe-resizer](https://github.com/davidjbradshaw/iframe-resizer) in your application to handle proper resizing of the component.\n\nNote: the `iframe` itself should span the entire the viewport width; so try not to place it inside a container.\n\nCreate an `iframe` and pass the embed URL with optional query parameters:\n\n```\n\u003ciframe id=\"repair-map\" src=\"https://mapping.sharepair.org/embed?lang=en\" allow=\"geolocation\" frameborder=\"0\" style=\"width: 1px; min-width: 100%; min-height: 100vh;\"\u003e\u003c/iframe\u003e\n\u003cscript src=\"https://unpkg.com/iframe-resizer@4.3.2/js/iframeResizer.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  iFrameResize({}, '#repair-map');\n\u003c/script\u003e\n```\n\n\n### URL Parameters\n\n| Parameter           | Type    | Example                                                                        | Description                                                                                                                                                               |\n|---------------------|---------|--------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| type                | string  | `type=ordp`                                                                    | Choose what map you want to use: [ORDP data](https://ordp-api.vito.be/) (`ordp`) or [RepairConnects](https://repairconnects.org/api/v1/documentation) (`repair_connects`) |\n| locale              | string  | `locale=nl`                                                                    | This decides the language of the map.                                                                                                                                     |\n| mapbox_access_token | string  | `mapbox_access_token=XXX`                                                      | Adds the ability to search using a mapbox address search.                                                                                                                 |\n| organisation_types  | Array   | `organisation_types[]=professional_repairer\u0026organisation_types[]=fablab`       | Parameter for pre filtering the organisation type filter.                                                                                                                 |\n| product_categories  | Array   | `product_categories[]=1\u0026product_categories[]=2`                                | Parameter for pre filtering the product categories filter.                                                                                                                |\n| bbox                | Array   | `bbox=51.15313203444604,4.400453567504884,51.22075494571333,4.470491409301759` | Choose the maps bbox.                                                                                                                                                     |\n| center              | Array   | `center=50.87959,4.70093`                                                      | Choose where to focus the map on load.                                                                                                                                    |\n| zoom                | number  | `zoom=14`                                                                      | Choose how much the map is zoomed in.                                                                                                                                     |\n| use_geolocation     | boolean | `use_geolocation=true`                                                         | Decides if the browsers geolocation should be used.                                                                                                                       |\n| items_per_page      | number  | `items_per_page=10`                                                            |                                                                                                                                                                           |\n| show_filter_buttons | boolean | `show_filter_buttons=true`                                                     |                                                                                                                                                                           |\n| api_base_url        | string  | `api_base_url=XXX`                                                             | Adds the ability to change the underlying base url.                                                                                                                       |\n\n\nData for the filters d \n\nIt's also possible to pass [some options](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/parent_page/options.md) to the iframe resizer.\n\n## Implementation as a Vue component\n\nThe recommended way to implement the Repair map component, allows the most flexibility and customizability.\n\n### Installation\n\n```\nyarn add @statikbe/repair-map\n```\n\nIntegrate with Vue:\n\n```javascript\nimport Vue from 'vue';\nimport RepairMapPlugin from 'repair-map';\nimport { i18n } from 'repair-map';\n\nVue.use(RepairMapPlugin);\n\nnew Vue({ i18n });\n```\n\n### Customization\n\n#### Filter triggers\n\nTo implement your own filter triggers, disable the default buttons with `:show-filter-buttons=\"false\"`, then pass the `filter` prop:\n\n```vue\n\u003ctemplate\u003e\n  \u003cbutton @click=\"setActiveFilter('TYPE')\"\u003eType\u003c/button\u003e\n  \u003cbutton @click=\"setActiveFilter('CATEGORY')\"\u003eCategory\u003c/button\u003e\n  \u003cbutton @click=\"setActiveFilter('LOCATION')\"\u003eLocation\u003c/button\u003e\n  \u003crepair-map :show-filter-buttons=\"false\" :filter=\"activeFilter\" @filter-close=\"activeFilter = null\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport RepairMap from 'repair-map';\n\nexport default {\n  components: {\n    RepairMap,\n  },\n  data: () =\u003e ({\n    activeFilter: null,\n  }),\n  methods: {\n    setActiveFilter(filter) {\n      this.activeFilter = filter;\n    },\n  },\n};\n\u003c/script\u003e\n```\n\n#### Location title\n\nTo customize the location title (and optionally, the URL), you can use the `locationTitle` slot, like so:\n\n```vue\n\u003ctemplate\u003e\n  \u003crepair-map\u003e\n    \u003ctemplate #locationTitle=\"{ name, id, defaultClass }\"\u003e\n      \u003ca :href=\"`https://my-custom-url.com/location/${id}`\" :class=\"defaultClass\"\u003e\n        \u003cspan\u003e{{ name }}\u003c/span\u003e\n        \u003cr-icon name=\"mdiChevronRight\" /\u003e\n      \u003c/a\u003e\n    \u003c/template\u003e\n  \u003c/repair-map\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { RIcon } from '@statikbe/repair-components';\nimport RepairMap from 'repair-map';\n\nexport default {\n  components: {\n    RepairMap,\n    RIcon,\n  },\n};\n\u003c/script\u003e\n```\n\nThis will be applied to the list items as well as the Leaflet popups.\n\n#### Theme\n\nTo change the theme to match your own brand, simply change these CSS variables:\n\n```css\n:root {\n  --repair-primary: #71b8c5;\n  --repair-primary-dark: #5a939d;\n  --repair-primary-contrast: white;\n\n  --repair-secondary: #9c7a97;\n  --repair-secondary-dark: #7c6178;\n  --repair-secondary-contrast: white;\n}\n```\n\nDark variants are used for hover states, contrast variants are used for button text etc.\n\n### Props\n\n| Prop              | Type    | Default               | Description                                                                                                                                               |\n| ----------------- | ------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| filter            | String  | `null`                | Filter that is currently active. To be used with custom filter buttons (see above)                                                                        |\n| defaultCenter     | Array   | `[50.87959, 4.70093]` | The default coordinates that the map will center to on load. Defaults to Leuven. If this prop is provided, the user location will not be asked.           |\n| defaultZoom       | Number  | `14`                  | The default zoom level of the map.                                                                                                                        |\n| locale            | String  | `null`                | The preferred language of the interface. Currently only `en`, `fr`, `de` and `nl` are supported.                                                          |\n| itemsPerPage      | Number  | `10`                  | Number of initiative results per page.                                                                                                                    |\n| showFilterButtons | Boolean | `true`                | Set to false to implement your own filter buttons.                                                                                                        |\n| mapboxAccessToken | String  | `null`                | Providing a [Mapbox access token](https://docs.mapbox.com/help/getting-started/access-tokens/) will enable searching for locations to center your map to. |\n\n## For developers\n\nYou can fetch data from two API's.\nThe [ORDP API](https://ordp.datascienceinstitute.ie/) (**default**) and the [Repair Connects API](https://www.repairconnects.org/api/v1/documentation).\nYou can switch easily by changing the `type` prop on the `repair-map` component. Or by adding a type query parameter when implementing the iframe version.\n`ordp` or `repair_connects`\n\nIn the `components` folder there are two folders, one for ORDP and one for the repair.\nWhen fetching data from ORDP, GraphQL and Apollo is used. See the `graphql` folder for the query.\n\n### Publishing to the iframe\nYou can publish by merging your changes into the correct iframe branch:\n\n- For production: `iframe/production`\n- For staging: `iframe/staging`\n\nBoth will automatically start a new build on digitalOcean\n\n### Publishing to NPM\n\nFirst, run `yarn build` to build this package as a library.\n\nTo publish this package to the NPM registry, make sure you are logged in with statikbe credentials (see 1pw) using `npm login`, then run `npx np --no-2fa`. Respect the [semantic versioning](https://semver.org/) guidelines when doing so!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstatikbe%2Frepair-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstatikbe%2Frepair-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstatikbe%2Frepair-map/lists"}