This is a Vue2Leaflet plugin to provide the Leaflet.Heightgraph control on Leaflet maps in Vue applications.
npm install --save vue2-leaflet-height-graph
You could either import the component locally where you need it or register it globally.
In a .vue
file:
<script>
import LControlHeightGraph from 'vue2-leaflet-height-graph'
// ...
export default {
// ...
components: { 'l-height-graph': LControlHeightGraph }
// ...
}
</script>
<style>
@import "~vue2-leaflet-height-graph/dist/Vue2LeafletHeightGraph.css";
</style>
// ...
In your main.js
:
import Vue from 'vue';
import Vue2LeafletHeightGraph from 'vue2-leaflet-height-graph';
import 'vue2-leaflet-heightgraph/dist/Vue2LeafletHeightGraph.css'
// ...
Vue.component('l-height-graph', Vue2LeafletHeightGraph);
// ...
With the LControlHeightGraph
component loaded into Vue, add the
l-height-graph
element inside an l-map
.
<l-map>
<l-height-graph
:data="heightGraphData"
:options="{ width: 1000, position: 'bottomleft'}"/>
<!-- other map components -->
</l-map>
The following properties can be passed to the LControlHeightGraph
component:
Takes an array of GeoJSON FeatureCollections as described in the Leaflet.Heigthgraph Readme by default.
Specify the parser
property to use other Array or Object input formats.
Currently supported formats for parser values:
'ors'
: The response of the openrouteservice directions endpoint in geojson fromat. Don't forget to setelevation=true
.
Other relevant formats can be made available by contributing a parser.
examples: see data folder
default: []
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.
example:
{ width: 1000, position: 'bottomleft'}
String to set the position on the map. Values can be 'bottomleft'
, 'bottomright'
, 'topleft'
, 'topright'
.
Fast setting for options.position
(overwriting).
Boolean for expanding the heightgraph window on creation. Values are true
and false
.
Fast setting for options.expand
(overwriting).
Set the name of the parser function as String to support different data
input.
Available parsers:
'normal'
'ors'
If you want to support relevant elevation data, consider contributing a parser function.
default: 'normal'