@ferrarid72

Hi, First Run npm install vue2-leaflet leaflet --save
and as example: this is my code for a vue page:

<template>
  <q-page padding class="flex">
    <q-card style="flex:1">
      <l-map :zoom="zoom" :center="center">
        <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
      </l-map>
    </q-card>
  </q-page>
</template>

<script>
import { LMap, LTileLayer } from 'vue2-leaflet'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

export default {
  name: 'Map',
  components: {
    LMap,
    LTileLayer
  },
  data () {
    return {
      zoom: 13,
      center: L.latLng(47.413220, -1.219482),
      url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }
  }
}
</script>
<style>
</style>

Hi! As a quick hack you an use this:
style=“transform : scale(1.3, 1.3);”
more than one will increase size, less will reduce

Okay that make sense.

I should have gone see jQuery.extend() for more info.

Okay that make sense, but then it is weird that a function that can extend multiple object returns only one object. Isn’t it ?

let newObject = extend([Boolean deepCopy], targetObj, obj, ...)

For example, how would it work for several objects ?

something like that?

extend(true, obj1, extendedObj1, obj2, extendedObj2)

Hello @qyloxe.

Well, this is quite a long an complete answer.
This has enlighten me a bit, and since I do not use VueX, I’ll stick with Parse/Stringify.

Thanks a lot!

Hi there.

Until now I’ve been using JSON.parse(JSON.Stringify(OBJ)) to deep copy.

I recently found out the extend method of Quasar.

One of the advantage I can see right now is the possibility to ask for deep copy or no (resulting in a shallow copy in that case I guess).

I have several questions. For deep copy only, is it better to use the Quasar method, or the Parsing/Stringify is more efficient as Javascript native ?

Second question. In the example the extend method returns the object, but there are several object parameters following.
It is unclear. Maybe a little update of the documentation would help.

Hey.

Thanks. but the solution I posted actually works. I do not have issues, I just wanted to share how I did things

Well I though your proposal would be a very good solution, but it is actually not working.
Main problems:

• It calculate offset from top of DOM so top of quasar application. If the top of your QTree is not touching the top of your dom, then it will return invalid values (easy to solve though, by subtracting that margin between top dom and top QTree).
• Second and main problem:
  Let’s imagine you have 100 values in your Qtree all at level/depth 0 (no children), just to make it simple. Let’s say you scrolled manually at the end of your Qtree.
  and you want programmatically scroll to the 10th. Well the 10th is above the top of dom, so your method return negative value. And a scroll value is always positive.

Hey.

I had more or less the same problem, I wanted to scroll a specific entry of my Qtree.
I followed the instructions here

but I discovered that it was scrolling only a little bit. This is because el.offsetTop return the offset to direct parent.

So I adapted the function a littlebit:

function scrollToElement (el) {
  const target = getScrollTarget(el);
  let offset = 0;
  while (el.id !== "YOURQTREE_ID") {
    offset += el.offsetTop;
    el = el.offsetParent;
  }
  const duration = 1000;
  setScrollPosition(target, offset, duration);
}

in order to have it working, you need to define an id on the Qtree and also the class “scroll” or others such as defined here

and then call this function when you need it:

scrollToElement(YOUR_ELEMENT);

The only bug I see is when you’ve scrolled to the place, if you call the function again it doesn’t work perfectly.
But it’s maybe linked to my setup as I call scrollToElement in mounted(), so I refresh the page to call again the scroll, and in this case, it goes nuts.
It was indeed linked to the page refresh. Otherwise, no problem.

Tell me if unclear and I’ll explain further.

Hello All.

As I didn’t like the default masks button (to change map layers) in vue2-leaflet, I wanted to make my own one using QBtnDropdown.

When I click a first time, the button oppens.
but when I click again (while oppened), it closes to opens again right after as if it was receiving two click input.

I’ve prepared an online example:
https://codesandbox.io/s/qbtn-in-leaflet-zupfd
You might have to wait up to one minute for it to load.

Try clicking on the top right button on the map.

It’s clearly linked to the fact it’s on top of the leaflet map and probably not a bug on the component itself, but help would be appreciated!

Thanks.

@ferrarid72

Hi, First Run npm install vue2-leaflet leaflet --save
and as example: this is my code for a vue page:

<template>
  <q-page padding class="flex">
    <q-card style="flex:1">
      <l-map :zoom="zoom" :center="center">
        <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
      </l-map>
    </q-card>
  </q-page>
</template>

<script>
import { LMap, LTileLayer } from 'vue2-leaflet'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

export default {
  name: 'Map',
  components: {
    LMap,
    LTileLayer
  },
  data () {
    return {
      zoom: 13,
      center: L.latLng(47.413220, -1.219482),
      url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }
  }
}
</script>
<style>
</style>

Hi! As a quick hack you an use this:
style=“transform : scale(1.3, 1.3);”
more than one will increase size, less will reduce