Error using the plugin

[bidsinga]

Thanks for creating this plugin! I'm just trying to install this plugin, but run into an error. I've some experiences with leaflet map in Vue, but I'm not an expert, so it might be a simple solution. I installed leaflet.heightgraph and vue2-leaflet-height-graph and followed the instruction from the README. I use the plugin locally, not globally (I also wouldn't know where to put the global code, as I don't have a main.js). The error that I get is as follow:

Module not found: Error: Can't resolve 'vue2-leaflet-height-graph' in 'C:\Users\basid\websites\gps-master\gps-master\src\pages'

Does anyone know what I'm doing wrong and how I could solv this error? Thanks in advance!

[amoncaldas]

Hi @bidsinga

You can see a working example of the plugin on our ors-map client. Take a look on the MapView component, specially on the following lines:

Add package via package.json: https://github.com/GIScience/ors-map-client/blob/develop/package.json#L56

Import: https://github.com/GIScience/ors-map-client/blob/develop/src/fragments/map-view/map-view.js#L43
Declare component: https://github.com/GIScience/ors-map-client/blob/develop/src/fragments/map-view/map-view.js#L87
Use in the view-template: https://github.com/GIScience/ors-map-client/blob/develop/src/fragments/map-view/MapView.vue#L140

In the ors-map-client we have a more complex case regarding the options passed to the height-graph component. We build the options here: https://github.com/GIScience/ors-map-client/blob/develop/src/fragments/map-view/map-view.js#L538
In your case you probably will just define a simple options object.

[bidsinga]

Thanks the reply. I still get the same error
Module not found: Error: Can't resolve 'vue2-leaflet-height-graph' in C:\Users\basid\websites\gps-master\gps-master\src\pages'

My package.json
"dependencies": { "@quasar/extras": "^1.0.0", "core-js": "^3.6.5", "leaflet": "^1.7.1", "leaflet-gpx": "^1.5.2", "leaflet.heightgraph": "^1.4.0", "quasar": "^1.0.0", "vue2-leaflet": "^2.7.1", "vue2-leaflet-gpx": "^2.0.0", "vue2-leaflet-height": "^0.0.9", "vue2-leaflet-height-graph": "^0.2.0", "vuex": "^3.6.0"},``

My .Vue file

<template>
  <l-map>
     <l-height-graph :data="FeatureCollections" :options="{ width: 1000, position:  'bottomleft'}"/>
  </l-map>
</template>

<script>
import L from 'leaflet';
import { LMap, LTileLayer, LControl, LMarker, LIcon } from 'vue2-leaflet';
import LGpx from 'vue2-leaflet-gpx';
import 'leaflet/dist/leaflet.css';
import LHeightGraph from 'vue2-leaflet-height-graph'

const FeatureCollections = [{
   [Data from page](https://github.com/GIScience/Leaflet.Heightgraph/#supported-data)
}]

export default {
  components: {
    LMap,
    LTileLayer,
    LGpx,
    LMarker,
    LIcon,
    LControl,
    LHeightGraph,
  }
}
</script>

Do you have an idea what can cause this problem?

[amoncaldas]

Could you try to use the same way we are using the package declaration (in package.json) ?

"vue2-leaflet-height-graph": "git+https://github.com/GIScience/vue2-leaflet-height-graph.git",

[bidsinga]

Thanks for the reply once again, and now it works! It seems I had to install a script again, which I thought I already installed.

Now next problem, I see a white box appearing in the map, but without heightgraph. I'm using https://github.com/GIScience/vue2-leaflet-height-graph/blob/master/src/data/geojson-example-2.js as example. Shall I make a new issue about this or does anyone have a quick solution?

[amoncaldas]

Hi @bidsinga
By the few information you provided I can not realize what the issue is. As I said, the component is working and is live on https://maps.openrouteservice.org (calculate a route from A to B and then expand the altitude chart to see it)

So maybe it would be more productive if you check it working on our maps client and then debug and compare with your application to see what is going on and what is different.

By doing this you can eventually identify if something is wrong with you setup/app or identify a specific bug in the component. If you fall in the second case, than I ask you to create an issue with the technical details.

[majid-saeed]

import Vue2LeafletHeightGraph from "vue2-leaflet-height-graph/src/Vue2LeafletHeightGraph.vue";