@statikbe/repair-map v3.0.8

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/iframe-resizer@4.3.2/js/iframeResizer.min.js"></script>
<script>
  iFrameResize({}, '#repair-map');
</script>

URL Parameters

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

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!