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

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

Dependencies

Check out more info about forked dependencies here

Adding Vector Tiles

Check out more info about vector tiles here

Adding Mapbox GL components

We are compiling information here about adding Mapbox GL JS components to phila-vue-mapping