Home

Welcome to the phila-vue-mapping (pvm) wiki!

What is phila-vue-mapping (@phila/vue-mapping in npmjs.com)?

phila-vue-mapping (pvm) is a library of vue components which can be used in any vue project. Many of these components wrap specific objects from Leaflet and Esri-Leaflet so that they can be used with vue.

pvm does not run code to initiate a Vue instance or Vuex store. It is basically just a bunch of unrelated .vue files. It also includes:

• main.js – imports and exports all of the .vue files
• store.js – creates and exports an object called ‘store’ which has some functions for using and storing data for the components
• A util folder with 2 files specific to tasks:
  • svg-icon.js
  • triangle-icon.js
  • unique-id.js

In a project that USES pvm, you would:

• In package.json add the dependency "@phila/vue-mapping": "2.0.5", or in index.html add:

    <script src=“//unpkg.com/@phila/vue-mapping@2.0.5/dist/phila-vue-mapping.js></script>
  

• Initiate the Vue instance and Vuex store, import the @phila/vue-mapping package, and use individual .vue components from it

Components

Mapbox:

• GlMap
• CanvasLayer
• GeojsonLayer
• ImageLayer
• RasterLayer
• VectorLayer
• VideoLayer
• CircleMarker
• Marker
• Popup

Leaflet:

• Map_
• CircleMarker
• ControlCorner
• Geojson
• PopUp

Esri-Leaflet:

• EsriDynamicMapLayer
• EsriTiledMapLayer
• EsriWebMap

Components:

• MapAddressInput
• MapAddressCandidateList
• OpacitySlider
• BasemapToggleControl
• BasemapSelectControl
• LegendControl
• LocationControl
• MeasureControl
• FullScreenMapToggleTab
• PngMarker
• VectorMarker

Cyclomedia:

• Button
• Widget
• RecordingCircle
• SvgViewConeMarker

Pictometry:

• Button
• Widget
• Layer
• PngMarker
• ViewCone

The Store

Instructions for using the pvm Store are here

Future Work

Replacing Forked Dependencies

Check out more info about forked dependencies here