distance measure control

The distance measure control uses mapbox-gl-draw. It was designed for the original 2017 atlas.phila.gov, and was adapted to work with Vue3 for this remake.

In Map.vue, the distance measure control is added in the template with a ref, so that functions within the component can be called from Map.vue.

const distanceMeasureControlRef = ref(null)
const drawCreate = (e) => {
  distanceMeasureControlRef.value.getDrawDistances(e);
}

This was required because trying to call DistanceMeasureControl.vue's functions, such as the getDrawDistances() function, within the DistanceMeasureControl.vue component was causing some kind of memory leak, and freezing up the entire app.

It works to call the function from Map.vue.

This seemed to happen when the map object was stored in MapStore and then accessed within another component. This kind of thing worked in the Vue2 atlas. For using Vue3, by calling these functions from Map.vue (where the map object is created) they are running with the original map object, which seems to fix the issue.