Skip to content

Commit

Permalink
some tidying
Browse files Browse the repository at this point in the history
  • Loading branch information
@EmmaLRussell
EmmaLRussell committed Nov 4, 2024
1 parent 6226fb3 commit 88400c0
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 89 deletions.
30 changes: 11 additions & 19 deletions src/components/Choropleth.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,9 @@ import { backgroundLayer } from "./utils";
import { useLoadingSpinner } from "../composables/useLoadingSpinner";
import { useSelectedMapInfo } from "../composables/useSelectedMapInfo";
import MapSettingsMenu from "./mapSettingsMenu/MapSettingsMenu.vue";
import { MapFeature } from "../types/resourceTypes";
import ExcelDownloadButton from "./ExcelDownloadButton.vue";
import { GeoJsonProperties } from "geojson";
import { LeafletMouseEvent } from "leaflet";
import * as L from "leaflet";
const router = useRouter();
const { mapSettings, appConfig, mapLoading } = storeToRefs(useAppStore());
Expand Down Expand Up @@ -83,7 +81,8 @@ const style = (p: GeoJsonProperties) => {
const { country, indicator } = mapSettings.value;
const isFaded = !!country && !featureInSelectedCountry(p);
const styleColors = getFillAndOutlineColor(indicator, getFeatureId(p), isFaded);
// TODO: can we use class? Needs to be svg?
// TODO: Should be able to use class, but only if svg mode..
// TODO: prune this style?
return {
className: "geojson",
fillColor: styleColors.fillColor,
Expand All @@ -100,29 +99,22 @@ const getTooltip = (e: LeafletMouseEvent) => tooltipForFeature(getFeatureId(e.la
// when rendering the geojson, leaflet will attach event listener specified here to each feature.
// here we use it to control mapLoading element and changing the URL of the app when they click on
// a feature based on what country it is
const layerOnEvents = {
click: (e: LeafletMouseEvent) => {
console.log("clicked");
mapLoading.value = true;
// TODO: layer is deprecated, what should we use?
const properties = e.layer.properties;
const country = properties[featureProperties.country];
// select feature's country, or unselect if click on it when already selected
const countryToSelect = country === mapSettings.value.country ? "" : country;
routerPush(router, `/${APP_BASE_ROUTE}/${mapSettings.value.indicator}/${countryToSelect}`);
}
const clickEvent = (e: LeafletMouseEvent) => {
mapLoading.value = true;
// TODO: layer is deprecated, what should we use?
const properties = e.layer.properties;
const country = properties[featureProperties.country];
// select feature's country, or unselect if click on it when already selected
const countryToSelect = country === mapSettings.value.country ? "" : country;
routerPush(router, `/${APP_BASE_ROUTE}/${mapSettings.value.indicator}/${countryToSelect}`);
};
const { map, dataSummary, lockBounds, updateLeafletMap, handleMapBoundsUpdated, updateRegionBounds } = useLeaflet(
style,
getTooltip,
layerOnEvents
clickEvent
);
useLoadingSpinner(map, mapLoading);
;
const openTooltip = (e: LayerMouseEvent) => {}
const closeTooltip = () => {};
const updateMap = () => {
lockBounds.value = !!mapSettings.value.country;
Expand Down
84 changes: 14 additions & 70 deletions src/composables/useLeaflet.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,13 @@ import * as L from "leaflet";
const a = L.TileLayer
console.log(typeof a)
import "leaflet.vectorgrid";
//import * as GJ from "geojson";
import {
LatLngBounds,
Map,
geoJSON,
GeoJSON,
Polyline,
Layer,
polyline,
TooltipOptions,
LeafletEventHandlerFnMap,
GeoJSONOptions,
PathOptions,
vectorGrid, LeafletMouseEvent
} from "leaflet";
Expand All @@ -24,13 +19,12 @@ import { countryAdmin1OutlineStyle, countryOutlineStyle, minZoom } from "../comp
import { useDataSummary } from "./useDataSummary";
import { MapFeature } from "../types/resourceTypes";

type FeatureProperties = { GID_0: string; GID_1: string; NAME_1: string };
type TooltipOptionAndContent = { content: string; options?: TooltipOptions };

export const useLeaflet = (
style: (f: GeoJsonProperties) => PathOptions,
getTooltip: (e: LeafletMouseEvent) => TooltipOptionAndContent,
layerEvents: Record<(e: LeafletMouseEvent) => void>
clickEvent: (e: LeafletMouseEvent) => void
) => {
// external refs: map related

Expand All @@ -53,11 +47,9 @@ export const useLeaflet = (
// internal refs

const emptyLayer = shallowRef<Polyline>(polyline([]));
//const geoJsonLayer = shallowRef<GeoJSON<FeatureProperties, Geometry> | null>(null);
const vectorGridLayer = shallowRef<VectorGrid.Slicer | null>(null);
const countryOutlineLayer = shallowRef<Polyline | null>(null);
const countryAdmin1OutlineLayer = shallowRef<(Polyline | null)[] | null>(null);
const layerWithOpenTooltip = shallowRef<Layer | null>(null);
const bounds = ref<LatLngBounds | null>(null);

// external refs: e2e test related
Expand Down Expand Up @@ -113,26 +105,11 @@ export const useLeaflet = (
}
};

// this is run for every single feature that we display, we can attach
// tooltips and any events to our features, the user of useLeaflet can
// attach events to features via layerEvents
/*const configureGeojsonLayer = (feature: MapFeature, layer: Layer) => {
const tooltip = getTooltip(feature);
layer.bindTooltip(tooltip?.content, tooltip?.options);
layer.on({
...layerEvents(feature),
tooltipopen: () => {
// in the past tooltips remained open when you clicked and dragged on the
// map while the bounds were locked, now we track each layer that will open a
// tooltip and close them if they are not the most recent layer to make sure
// no old tooltips remain open
if (layer !== layerWithOpenTooltip.value) {
layerWithOpenTooltip.value?.closeTooltip();
layerWithOpenTooltip.value = layer;
}
}
});
};*/
const closeTooltip = () => {
if (tooltip.value) {
getLeafletMap().closeTooltip(tooltip.value);
}
};

// this is the main function that updates the map, should be called in an appropriate
// watcher
Expand All @@ -154,17 +131,6 @@ export const useLeaflet = (
countryOutlineLayer.value?.remove();
countryAdmin1OutlineLayer.value?.forEach((layer) => layer?.remove());

// create new geojson and add to map
/*geoJsonLayer.value = geoJSON<FeatureProperties, Geometry>(newFeatures, {
style,
onEachFeature: configureGeojsonLayer,
smoothFactor: 0
} as GeojsonOptions).addTo(leafletMap);*/


// Examples of styling etc:
// https://github.com/Leaflet/Leaflet.VectorGrid/blob/master/docs/demo-geojson.html

const geoJsonDocument = {
type: 'FeatureCollection',
features: newFeatures
Expand All @@ -175,41 +141,19 @@ export const useLeaflet = (
interactive: true,
vectorTileLayerStyles: {
sliced: style

}
});
Object.keys(layerEvents).forEach((key: string) => {
vectorGridLayer.value.on(key, layerEvents[key]);
});

vectorGridLayer.value.on("mouseover", (e: LayerMouseEvent) => {
}).on("click",
clickEvent
).on("mouseover", (e: LayerMouseEvent) => {
const content = getTooltip(e);
if (tooltip.value) {
getLeafletMap().closeTooltip(tooltip.value);
}
closeTooltip(); //close any existing tooltip
tooltip.value = L.tooltip({ sticky: true, permanent: false})
.setContent(content)
.setLatLng(e.latlng)
.openOn(getLeafletMap());
});
vectorGridLayer.value.on("mouseout", () => {
// TODO: make closeTooltip method
if (tooltip.value) {
getLeafletMap().closeTooltip(tooltip.value);
}
});

/*vectorGridLayer.value.on(
"mouseover", (e: LayerMouseEvent) => {
const content = getTooltip(e);
const lmap = L.map('map'); // TODO : sort this
L.popup()
.setContent(content)
.setLatLng(e.latlng)
.openOn(lmap);
}
);*/
vectorGridLayer.value.addTo(leafletMap);
.openOn(leafletMap);
}).on("mouseout", () => {
closeTooltip();
}).addTo(leafletMap);

// adding country outline if we have a admin0GeojsonFeature
if (admin0GeojsonFeature.value) {
Expand Down

0 comments on commit 88400c0

Please sign in to comment.