All Projects → joblocal → vue-mapfit

joblocal / vue-mapfit

Licence: other
A SSR compatible vue component which provides a Maps View with Mapfit

Programming Languages

javascript
184084 projects - #8 most used programming language
Vue
7211 projects

Projects that are alternatives of or similar to vue-mapfit

Feliz.ViewEngine
Feliz DSL and engine for HTML generation and server side rendering (SSR)
Stars: ✭ 53 (+341.67%)
Mutual labels:  ssr
react-redux-immutable-webpack-ssr-starter
React + React-Router 4 + Redux + ImmutableJS + Bootstrap + webpack 3 with with Server side rendering, Hot Reload and redux-devtools STARTER
Stars: ✭ 21 (+75%)
Mutual labels:  ssr
ImageOnMap
Repo for ImageOnMap, a bukkit plugin created to display any image using a map
Stars: ✭ 162 (+1250%)
Mutual labels:  maps
ng-universal
Angular Universal & SEO Utilities/Helpers - Brought to you by Trilon
Stars: ✭ 39 (+225%)
Mutual labels:  ssr
core
🚀Fast, 💎Lightweight Angular alternative with the same modern API thats compile directly to WebComponents
Stars: ✭ 49 (+308.33%)
Mutual labels:  ssr
locationestimatr.github.io
This is a game where you are put anywhere on earth, and you have to figure out where you are
Stars: ✭ 46 (+283.33%)
Mutual labels:  maps
elm-mapbox
MapboxGL bindings for Elm
Stars: ✭ 55 (+358.33%)
Mutual labels:  maps
zero
Zero is a web server to simplify web development.
Stars: ✭ 5,835 (+48525%)
Mutual labels:  ssr
angular-universal-firebase
angular-universal-firebase.firebaseapp.com/
Stars: ✭ 30 (+150%)
Mutual labels:  ssr
async-react-router
Client side react router with async. It like next.js!
Stars: ✭ 21 (+75%)
Mutual labels:  ssr
Xamarin.Android.Skobbler
C# bindings for the Skobbler Android SDK
Stars: ✭ 16 (+33.33%)
Mutual labels:  maps
personal-website
Personal website – made with Next.js, Preact, MDX, RMWC, & Vercel
Stars: ✭ 16 (+33.33%)
Mutual labels:  ssr
react-auth-kit
universal react app with flux, altjs, passportjs and server side rendering
Stars: ✭ 21 (+75%)
Mutual labels:  ssr
react-google-map
React component to render a map with markers from Google Maps API
Stars: ✭ 25 (+108.33%)
Mutual labels:  maps
routes
Google Maps Api test using marker rotation and routes.
Stars: ✭ 38 (+216.67%)
Mutual labels:  maps
mapgen
map generator stuff
Stars: ✭ 26 (+116.67%)
Mutual labels:  maps
r6maps
Rainbow Six Siege map quick references
Stars: ✭ 74 (+516.67%)
Mutual labels:  maps
angular-ssr
Angular 14 Example SSR (Server side rendering)
Stars: ✭ 92 (+666.67%)
Mutual labels:  ssr
Samples-ASP.NET-MVC-CSharp
ASP.NET MVC C# samples for Stimulsoft Reports.Web reporting tool.
Stars: ✭ 31 (+158.33%)
Mutual labels:  maps
ultimate-backend-dashboard
ultimate react ssr starter kit is a boilerplate strapped with Apollo graphql support and alot of goodies based on FusionJS
Stars: ✭ 19 (+58.33%)
Mutual labels:  ssr

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].