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" allow="geolocation" 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!