JSPM

  • Created
  • Published
  • Downloads 3217
  • Score
    100M100P100Q117347F
  • License MIT

Mapbox Framework for Vue.js written in TypeScript

Package Exports

  • vue-mapbox-ts

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-mapbox-ts) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue Mapbox TS

Inspired by vue-mapbox-gl but since the program seems to be abanoned this project has been created to bring a modern vue component library utilizing TypeScript and the new Composition API.

The goal is that it is easy to use and to have the look and feel of a vue component.

Current State

This is still in early beta and I will do my best to update this Readme as soon as possible. But for now this example will have to do. Keep in mind that

  • Mapbox-Map
  • Mapbox-Marker
  • Mapbox-Popup are the only components available for now.

In this example we want to create a map that has a marker on it and a popup that is attached to the marker. This would look like this

 mapbox-map(
  :access-token="accessKey"
)
  mapbox-marker(
    :lngLat="[15,10]"
    color="blue"
    :draggable="true"
  )
    mapbox-popup(
      :closeOnMove="true"
      :closeOnClick="true"
      className="juergen"
      :closeButton="true"
    )
      template
        v-img(:src="getUri(Property.TitleImage, 'preview', 'properties')")

Compatibility

As the rollup typescript plugin currently has some issues with vue3 this library is written in vue2 with the composition api. unfortunately I haven't figured out how to use the composition api in an external library as well as in the live project. So for now this library is not compatible with Vue2 Applications that utilize @vue/composition-api

I will also port this to vue3 as soon as the rollup typescript plugin has resolved some issues.