@joblocal/vue-mapfit

A SSR compatible vue component which provides a Maps View with Mapfit
765 12
Install
npm install @joblocal/vue-mapfit
Latest Version:1.0.9
Vue:2
License:MIT
Last Updated:Nov 9, 2018
Links: GitHub  ·  npm
Maintainer: raphaeldidjurgeit

Sunsetting of Mapfit APIs

Unfortunately Mapfit decided to sunset their mapping platform until October 29, 2018. You will have to use another mapping vendor.

Vue Mapfit

This Project provides a SSR compatible vue component which shows a simple Map Vue generated by Mapfit.

Requirements

  • Yarn or npm
  • Vue 2.X.X

Installation

Using yarn:

$ yarn add @joblocal/vue-mapfit

Using npm:

$ npm install @joblocal/vue-mapfit

Usage

After installing the package you can use it as followed.

<template>
  <VueMapfit
    :apikey="your-api-key"
    :center="[65.43, -34.56]"
  />
</template>

<script>
  import VueMapfit from '@joblocal/vue-mapfit';

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

If you want more control over the mapfit, you can bind to @vueMapfit which exposes the Marker and MapView instances and allows you to use all mapfit methods. Also, please note that you can use all available Mapfit methods through window.mapfit. We expose the used Marker and MapView instances that are used by the component for more control.

<template>
  <VueMapfit
    :apikey="your-api-key"
    :center="[65.43, -34.56]"
    @vueMapfit="getInstances($event)"
  />
</template>
<script>
  import VueMapfit from '@joblocal/vue-mapfit';

  export default {
    components: {
      VueMapfit,
    },
    methods: {
      getInstances(data) {
        data.map.setZoom(8);
        console.log(data.map.getScrollWheelEnabled());
      },
    },
  };
</script>

Properties

Property Required Type Description
apikey false String Apikey is not required. Anyways it could be useful to generate one. You can generate them here.
center true Object / Array Provide an Center Point to your map
theme false String Provide a yaml file with the expected settings. Defaults to day theme. You can pass, "day," "night," "grayscale," or the location of the yaml file to use custom theme or different language. Default: "day"
mapSettings false Object Pass an object with any setMethod in the MapOptions methods. ex: :mapSettings="{ setZoom: 16, setScrollWheelEnabled: true }

Development

Installing dependencies

Run this command.

$ yarn install
Test

To make sure that the installation went fine. Run this command.

$ yarn test
Dev Server

To start the development server use

$ yarn start:development

Built with

Also see

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and feature requests.

Authors

  • Joblocal GmbH - Initial work - Joblocal

See also the list of contributors who participated in this project.

Related Packages

vue-server-renderer

server renderer for Vue 2.0

13,054,069 212,644
vite-plugin-ssr

Like Next.js/Nuxt but as do-one-thing-do-it-well Vite plugin.

550,634 18
vue-bind-once

A tiny, SSR-safe directive for binding random data to an element.

152,016 169
@akryum/vue-cli-plugin-ssr

Turn your app into an isomorphic SSR app!

21,314 440
@shimyshack/uid

An SSR-friendly Vue directive that generates a unique ID for elements.

19,260 25

Version History

Version Released Vue License
1.0.9 ^2.5.17 MIT
1.0.8 ^2.5.17 MIT
1.0.7 ^2.5.17 MIT
1.0.6 ^2.5.17 MIT
1.0.5 ^2.5.17 MIT