@symbwell/vue2-leaflet-height-graph v0.3.5
vue2-leaflet-height-graph
This is a Vue2Leaflet plugin to provide the Leaflet.Heightgraph control on Leaflet maps in Vue applications.
Installation
npm install --save vue2-leaflet-height-graph
Import
You could either import the component locally where you need it or register it globally.
Local
In a .vue
file:
<script>
import Vue2LeafletHeightGraph from '@symbwell/vue2-leaflet-height-graph';
import 'leaflet.heightgraph/dist/L.Control.Heightgraph.min.css'
// ...
export default {
// ...
components: { 'l-height-graph': Vue2LeafletHeightGraph }
// ...
}
</script>
// ...
Global
In your main.js
:
import Vue from 'vue';
import Vue2LeafletHeightGraph from '@symbwell/vue2-leaflet-height-graph';
import 'leaflet.heightgraph/dist/L.Control.Heightgraph.min.css'
// ...
Vue.component('l-height-graph', Vue2LeafletHeightGraph);
// ...
Usage
With the LHeightGraph
component loaded into Vue, add the
l-height-graph
element inside an l-map
.
<l-map>
<l-height-graph :data="heightGraphData"/>
<!-- other map components -->
</l-map>
Properties
The following properties can be passed to the LHeightGraph
component:
data
Takes an array of GeoJSON FeatureCollections as described in the Leaflet.Heigthgraph Readme by default.
The component will assume the data is in geoJson
format unless you specify another supported parser via options (see options below)
Currently supported formats for parser values:
ors
: The response of the openrouteservice directions endpoint in geojson format. Don't forget to setelevation=true
.geojson
: data in ageoJson
format.noParser
: the data does not need to be parsed see expected data structure
Other relevant formats can be made available by contributing a parser.
examples: see data folder
default: []
width via grid/view breakpoint
This component supports specifying a dynamic width based current screen resolution and as a portion of the parent width, similar to what is used in the vuetify. So if can be defined the element width for mutiples scenarios, like: md8, lg10, xl6.
options
Use the options
property to specify any of the
Leaflet.Heightgraph options
to be set when the control is created.
If no options are specified the default options from Leaflet.Heightgraph are used. the wrapper has it own defaults only for:
- width: use the grid system as default. If width is specified it will override the grid system value and not be responsive.
- parser: =
geoJson
- position:
bottomright
example:
{ width: 1000, position: 'bottomleft', parser: 'ors' }
position
String to set the position on the map. Values can be 'bottomleft'
, 'bottomright'
, 'topleft'
, 'topright'
.
Fast setting for options.position
(overwriting).
expand
Boolean for expanding the heightgraph window on creation. Values are true
and false
.
Fast setting for options.expand
(overwriting).
container
Allow to choose container outside map. Set some container ID like :container="'map-wrapper'"
Events
This component emits a closed
event when the up-right corner graph close button is hit and it is closed. It can be used to synchronize the visibility of the graph with other elements when it is displayed conditionally.