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/iframe-resizer@4.3.2/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!

statikbe / repair-map