Repair map

Implementation as an embed (iframe)

The easiest, but least configurable way to implement the Repair map component, is to use an embedded iframe. It's recommended to include iframe-resizer in your application to handle proper resizing of the component.

Note: the iframe itself should span the entire the viewport width; so try not to place it inside a container.

Create an iframe and pass the embed URL with optional query parameters:

<iframe id="repair-map" src="https://mapping.sharepair.org/embed?lang=en" frameborder="0" style="width: 1px; min-width: 100%; min-height: 100vh;"></iframe>
<script src="https://unpkg.com/[email protected]/js/iframeResizer.min.js"></script>
<script>
  iFrameResize({}, '#repair-map');
</script>

URL Parameters

| Parameter | Type | Example | Description | |---------------------|---------|--------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | type | string | type=ordp | Choose what map you want to use: ORDP data (ordp) or RepairConnects (repair_connects) | | locale | string | locale=nl | This decides the language of the map. | | mapbox_access_token | string | mapbox_access_token=XXX | Adds the ability to search using a mapbox address search. | | organisation_types | Array | organisation_types[]=professional_repairer&organisation_types[]=fablab | Parameter for pre filtering the organisation type filter. | | product_categories | Array | product_categories[]=1&product_categories[]=2 | Parameter for pre filtering the product categories filter. | | bbox | Array | bbox=51.15313203444604,4.400453567504884,51.22075494571333,4.470491409301759 | Choose the maps bbox. | | center | Array | center=50.87959,4.70093 | Choose where to focus the map on load. | | zoom | number | zoom=14 | Choose how much the map is zoomed in. | | use_geolocation | boolean | use_geolocation=true | Decides if the browsers geolocation should be used. | | items_per_page | number | items_per_page=10 | | | show_filter_buttons | boolean | show_filter_buttons=true | | | api_base_url | string | api_base_url=XXX | Adds the ability to change the underlying base url. |

Data for the filters d

It's also possible to pass some options to the iframe resizer.

Implementation as a Vue component

The recommended way to implement the Repair map component, allows the most flexibility and customizability.

Installation

yarn add @statikbe/repair-map

Integrate with Vue:

import Vue from 'vue';
import RepairMapPlugin from 'repair-map';
import { i18n } from 'repair-map';

Vue.use(RepairMapPlugin);

new Vue({ i18n });

Customization

Filter triggers

To implement your own filter triggers, disable the default buttons with :show-filter-buttons="false", then pass the filter prop:

<template>
  <button @click="setActiveFilter('TYPE')">Type</button>
  <button @click="setActiveFilter('CATEGORY')">Category</button>
  <button @click="setActiveFilter('LOCATION')">Location</button>
  <repair-map :show-filter-buttons="false" :filter="activeFilter" @filter-close="activeFilter = null" />
</template>

<script>
import RepairMap from 'repair-map';

export default {
  components: {
    RepairMap,
  },
  data: () => ({
    activeFilter: null,
  }),
  methods: {
    setActiveFilter(filter) {
      this.activeFilter = filter;
    },
  },
};
</script>

Location title

To customize the location title (and optionally, the URL), you can use the locationTitle slot, like so:

<template>
  <repair-map>
    <template #locationTitle="{ name, id, defaultClass }">
      <a :href="`https://my-custom-url.com/location/${id}`" :class="defaultClass">
        <span>{{ name }}</span>
        <r-icon name="mdiChevronRight" />
      </a>
    </template>
  </repair-map>
</template>

<script>
import { RIcon } from '@statikbe/repair-components';
import RepairMap from 'repair-map';

export default {
  components: {
    RepairMap,
    RIcon,
  },
};
</script>

This will be applied to the list items as well as the Leaflet popups.

Theme

To change the theme to match your own brand, simply change these CSS variables:

:root {
  --repair-primary: #71b8c5;
  --repair-primary-dark: #5a939d;
  --repair-primary-contrast: white;

  --repair-secondary: #9c7a97;
  --repair-secondary-dark: #7c6178;
  --repair-secondary-contrast: white;
}

Dark variants are used for hover states, contrast variants are used for button text etc.

Props

| Prop | Type | Default | Description | | ----------------- | ------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | filter | String | null | Filter that is currently active. To be used with custom filter buttons (see above) | | 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. | | defaultZoom | Number | 14 | The default zoom level of the map. | | locale | String | null | The preferred language of the interface. Currently only en, fr, de and nl are supported. | | itemsPerPage | Number | 10 | Number of initiative results per page. | | showFilterButtons | Boolean | true | Set to false to implement your own filter buttons. | | mapboxAccessToken | String | null | Providing a Mapbox access token will enable searching for locations to center your map to. |

For developers

You can fetch data from two API's. The ORDP API (default) and the Repair Connects API. You 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. ordp or repair_connects

In the components folder there are two folders, one for ORDP and one for the repair. When fetching data from ORDP, GraphQL and Apollo is used. See the graphql folder for the query.

Publishing to the iframe

You can publish by merging your changes into the correct iframe branch:

• For production: iframe/production
• For staging: iframe/staging

Both will automatically start a new build on digitalOcean

Publishing to NPM

First, run yarn build to build this package as a library.

To 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 guidelines when doing so!