8756485498

Committed 19 Apr 2024 04:08PM UTC coverage: 30.506%. Remained the same

Build # 8756485498

Build Type

Pull #2564

github

Committed by

web-flow

Commit Message

Merge 741d01a52 into 6667a966b

Pull Request Pull Request #2564: Fix custom map style input

Run Details

1785 of 10832 branches covered (16.48%)

Branch coverage included in aggregate %.

0 of 1 new or added line in 1 file covered. (0.0%)

135 existing lines in 3 files now uncovered.

6246 of 15494 relevant lines covered (40.31%)

16.94 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

7.77

/src/utils/src/map-style-utils/mapbox-gl-style-editor.ts

// SPDX-License-Identifier: MIT
// Copyright contributors to the kepler.gl project

import memoize from 'lodash.memoize';
import clondDeep from 'lodash.clonedeep';
import {
  DEFAULT_LAYER_GROUPS,
  DEFAULT_MAPBOX_API_URL,
  NO_MAP_ID,
  EMPTY_MAPBOX_STYLE
} from '@kepler.gl/constants';
import {BaseMapStyle, LayerGroup, MapState} from '@kepler.gl/types';

const mapUrlRg = /^mapbox:\/\/styles\/[-a-z0-9]{2,256}\/[-a-z0-9]{2,256}/;
const httpRg = /^(?=(http:|https:))/;

export function getDefaultLayerGroupVisibility({layerGroups = []}: {layerGroups: LayerGroup[]}) {
  return layerGroups.reduce(
    (accu, layer) => ({
      ...accu,
      [layer.slug]: layer.defaultVisibility
    }),
    {}
  );
}

const resolver = ({
  id,
  mapStyle,
  visibleLayerGroups = {}
}: {
  id?: string;
  mapStyle: BaseMapStyle;
  visibleLayerGroups: {[id: string]: LayerGroup | boolean} | false;
}) =>
  `${id}:${Object.keys(visibleLayerGroups)
    .filter(d => visibleLayerGroups[d])
    .sort()
    .join('-')}`;

/**
 * Edit preset map style to keep only visible layers
 *
 * @param mapStyle - preset map style
 * @param visibleLayerGroups - visible layers of top map
 * @returns top map style
 */
export const editTopMapStyle = memoize(
  ({
    id,
    mapStyle,
    visibleLayerGroups
  }: {
    id?: string;
    mapStyle: BaseMapStyle;
    visibleLayerGroups: {[id: string]: LayerGroup | boolean} | false;
  }) => {
    const visibleFilters = (mapStyle.layerGroups || [])
      .filter(lg => visibleLayerGroups[lg.slug])
      .map(lg => lg.filter);

    // if top map
    // keep only visible layers
    // @ts-expect-error
    const filteredLayers = mapStyle.style.layers.filter(layer =>
      visibleFilters.some(match => match(layer))
    );

    return {
      ...mapStyle.style,
      layers: filteredLayers
    };
  },
  resolver
);

/**
 * Edit preset map style to filter out invisible layers
 *
 * @param {Object} mapStyle - preset map style
 * @param {Object} visibleLayerGroups - visible layers of bottom map
 * @returns {Object} bottom map style
 */
export const editBottomMapStyle = memoize(({id, mapStyle, visibleLayerGroups}) => {
  if (id === NO_MAP_ID) {
    return EMPTY_MAPBOX_STYLE;
  }

  const invisibleFilters = (mapStyle.layerGroups || [])
    .filter(lg => !visibleLayerGroups[lg.slug])
    .map(lg => lg.filter);

  // if bottom map
  // filter out invisible layers
  const filteredLayers = mapStyle.style.layers.filter(layer =>
    invisibleFilters.every(match => !match(layer))
  );

  return {
    ...mapStyle.style,
    layers: filteredLayers
  };
}, resolver);

// valid style url
// mapbox://styles/uberdata/cjfyl03kp1tul2smf5v2tbdd4
// lowercase letters, numbers and dashes only.
export function isValidStyleUrl(url) {
  return typeof url === 'string' && Boolean(url.match(mapUrlRg) || url.match(httpRg));
}

export function getStyleDownloadUrl(styleUrl, accessToken, mapboxApiUrl) {
  if (styleUrl.startsWith('http')) {
    return styleUrl;
  }

  // mapbox://styles/jckr/cjhcl0lxv13di2rpfoytdbdyj
  if (styleUrl.startsWith('mapbox://styles')) {
    const styleId = styleUrl.replace('mapbox://styles/', '');

    // https://api.mapbox.com/styles/v1/heshan0131/cjg1bfumo1cwm2rlrjxkinfgw?pluginName=Keplergl&access_token=<token>
    return `${mapboxApiUrl ||
      DEFAULT_MAPBOX_API_URL}/styles/v1/${styleId}?pluginName=Keplergl&access_token=${accessToken}`;
  }

  // style url not recognized
  return null;
}

/**
 * Generate static map image from style Url to be used as icon
 * @param param
 * @param param.styleUrl
 * @param param.mapboxApiAccessToken
 * @param param.mapboxApiUrl
 * @param param.mapState
 * @param param.mapW
 * @param param.mapH
 */
export function getStyleImageIcon({
  styleUrl,
  mapboxApiAccessToken,
  mapboxApiUrl = DEFAULT_MAPBOX_API_URL,
  mapState = {
    longitude: -122.3391,
    latitude: 37.7922,
    zoom: 9
  },
  mapW = 400,
  mapH = 300
}: {
  styleUrl: string;
  mapboxApiAccessToken: string;
  mapboxApiUrl?: string;
  mapState?: Partial<MapState>;
  mapW?: number;
  mapH?: number;
}) {
  const styleId = styleUrl.replace('mapbox://styles/', '');

  return (
    `${mapboxApiUrl}/styles/v1/${styleId}/static/` +
    `${mapState.longitude},${mapState.latitude},${mapState.zoom},0,0/` +
    `${mapW}x${mapH}` +
    `?access_token=${mapboxApiAccessToken}&logo=false&attribution=false`
  );
}

export function scaleMapStyleByResolution(mapboxStyle, scale) {
  if (scale !== 1 && mapboxStyle) {
    const labelLayerGroup = DEFAULT_LAYER_GROUPS.find(lg => lg.slug === 'label');
    // @ts-ignore
    const {filter: labelLayerFilter} = labelLayerGroup;
    const zoomOffset = Math.log2(scale);

    const copyStyle = clondDeep(mapboxStyle);
    (copyStyle.layers || []).forEach(d => {
      // edit minzoom and maxzoom
      if (d.maxzoom) {
        d.maxzoom = Math.max(d.maxzoom + zoomOffset, 1);
      }

      if (d.minzoom) {
        d.minzoom = Math.max(d.minzoom + zoomOffset, 1);
      }

      // edit text size
      if (labelLayerFilter(d)) {
        if (d.layout && d.layout['text-size'] && Array.isArray(d.layout['text-size'].stops)) {
          d.layout['text-size'].stops.forEach(stop => {
            // zoom
            stop[0] = Math.max(stop[0] + zoomOffset, 1);
            // size
            stop[1] *= scale;
          });
        }
      }
    });

    return copyStyle;
  }

  return mapboxStyle;
}

/**
 * When switch to a new style, try to keep current layer group visibility
 * by merging default and current
 * @param {Object} defaultLayerGroup
 * @param {Object} currentLayerGroup
 * @return {Object} mergedLayerGroups
 */
export function mergeLayerGroupVisibility(defaultLayerGroup, currentLayerGroup) {
  return Object.keys(defaultLayerGroup).reduce(
    (accu, key) => ({
      ...accu,
      ...(currentLayerGroup.hasOwnProperty(key) ? {[key]: currentLayerGroup[key]} : {})
    }),
    defaultLayerGroup
  );
}

1	// SPDX-License-Identifier: MIT
2	// Copyright contributors to the kepler.gl project
3
4	import memoize from 'lodash.memoize';	9✔
5	import clondDeep from 'lodash.clonedeep';	9✔
6	import {	9✔
7	DEFAULT_LAYER_GROUPS,
8	DEFAULT_MAPBOX_API_URL,
9	NO_MAP_ID,
10	EMPTY_MAPBOX_STYLE
11	} from '@kepler.gl/constants';
12	import {BaseMapStyle, LayerGroup, MapState} from '@kepler.gl/types';
13
14	const mapUrlRg = /^mapbox:\/\/styles\/[-a-z0-9]{2,256}\/[-a-z0-9]{2,256}/;	9✔
15	const httpRg = /^(?=(http:\|https:))/;	9✔
16
UNCOV 17	export function getDefaultLayerGroupVisibility({layerGroups = []}: {layerGroups: LayerGroup[]}) {	×
UNCOV 18	return layerGroups.reduce(	×
UNCOV 19	(accu, layer) => ({	×
20	...accu,
21	[layer.slug]: layer.defaultVisibility
22	}),
23	{}
24	);
25	}
26
27	const resolver = ({	9✔
28	id,
29	mapStyle,
30	visibleLayerGroups = {}	×
31	}: {
32	id?: string;
33	mapStyle: BaseMapStyle;
34	visibleLayerGroups: {[id: string]: LayerGroup \| boolean} \| false;
35	}) =>
36	`${id}:${Object.keys(visibleLayerGroups)
UNCOV 37	.filter(d => visibleLayerGroups[d])	×
38	.sort()
39	.join('-')}`;
40
41	/**
42	* Edit preset map style to keep only visible layers
43	*
44	* @param mapStyle - preset map style
45	* @param visibleLayerGroups - visible layers of top map
46	* @returns top map style
47	*/
48	export const editTopMapStyle = memoize(	9✔
49	({
50	id,
51	mapStyle,
52	visibleLayerGroups
53	}: {
54	id?: string;
55	mapStyle: BaseMapStyle;
56	visibleLayerGroups: {[id: string]: LayerGroup \| boolean} \| false;
57	}) => {	×
UNCOV 58	const visibleFilters = (mapStyle.layerGroups \|\| [])	×
UNCOV 59	.filter(lg => visibleLayerGroups[lg.slug])	×
UNCOV 60	.map(lg => lg.filter);	×
61
62	// if top map
63	// keep only visible layers
64	// @ts-expect-error
UNCOV 65	const filteredLayers = mapStyle.style.layers.filter(layer =>	×
66	visibleFilters.some(match => match(layer))	×
67	);
68
UNCOV 69	return {	×
70	...mapStyle.style,
71	layers: filteredLayers
72	};
73	},
74	resolver
75	);
76
77	/**
78	* Edit preset map style to filter out invisible layers
79	*
80	* @param {Object} mapStyle - preset map style
81	* @param {Object} visibleLayerGroups - visible layers of bottom map
82	* @returns {Object} bottom map style
83	*/
84	export const editBottomMapStyle = memoize(({id, mapStyle, visibleLayerGroups}) => {	9✔
UNCOV 85	if (id === NO_MAP_ID) {	×
86	return EMPTY_MAPBOX_STYLE;	×
87	}
88
UNCOV 89	const invisibleFilters = (mapStyle.layerGroups \|\| [])	×
UNCOV 90	.filter(lg => !visibleLayerGroups[lg.slug])	×
UNCOV 91	.map(lg => lg.filter);	×
92
93	// if bottom map
94	// filter out invisible layers
UNCOV 95	const filteredLayers = mapStyle.style.layers.filter(layer =>	×
96	invisibleFilters.every(match => !match(layer))	×
97	);
98
UNCOV 99	return {	×
100	...mapStyle.style,
101	layers: filteredLayers
102	};
103	}, resolver);
104
105	// valid style url
106	// mapbox://styles/uberdata/cjfyl03kp1tul2smf5v2tbdd4
107	// lowercase letters, numbers and dashes only.
108	export function isValidStyleUrl(url) {
109	return typeof url === 'string' && Boolean(url.match(mapUrlRg) \|\| url.match(httpRg));	×
110	}
111
112	export function getStyleDownloadUrl(styleUrl, accessToken, mapboxApiUrl) {
UNCOV 113	if (styleUrl.startsWith('http')) {	×
UNCOV 114	return styleUrl;	×
115	}
116
117	// mapbox://styles/jckr/cjhcl0lxv13di2rpfoytdbdyj
UNCOV 118	if (styleUrl.startsWith('mapbox://styles')) {	×
UNCOV 119	const styleId = styleUrl.replace('mapbox://styles/', '');	×
120
121	// https://api.mapbox.com/styles/v1/heshan0131/cjg1bfumo1cwm2rlrjxkinfgw?pluginName=Keplergl&access_token=<token>
UNCOV 122	return `${mapboxApiUrl \|\|	×
123	DEFAULT_MAPBOX_API_URL}/styles/v1/${styleId}?pluginName=Keplergl&access_token=${accessToken}`;
124	}
125
126	// style url not recognized
UNCOV 127	return null;	×
128	}
129
130	/**
131	* Generate static map image from style Url to be used as icon
132	* @param param
133	* @param param.styleUrl
134	* @param param.mapboxApiAccessToken
135	* @param param.mapboxApiUrl
136	* @param param.mapState
137	* @param param.mapW
138	* @param param.mapH
139	*/
140	export function getStyleImageIcon({
141	styleUrl,
142	mapboxApiAccessToken,
143	mapboxApiUrl = DEFAULT_MAPBOX_API_URL,	×
144	mapState = {	×
145	longitude: -122.3391,
146	latitude: 37.7922,
147	zoom: 9
148	},
149	mapW = 400,	×
150	mapH = 300	×
151	}: {
152	styleUrl: string;
153	mapboxApiAccessToken: string;
154	mapboxApiUrl?: string;
155	mapState?: Partial<MapState>;
156	mapW?: number;
157	mapH?: number;
UNCOV 158	}) {	×
UNCOV 159	const styleId = styleUrl.replace('mapbox://styles/', '');	×
160
161	return (	×
162	`${mapboxApiUrl}/styles/v1/${styleId}/static/` +
163	`${mapState.longitude},${mapState.latitude},${mapState.zoom},0,0/` +
164	`${mapW}x${mapH}` +
165	`?access_token=${mapboxApiAccessToken}&logo=false&attribution=false`
166	);
167	}
168
169	export function scaleMapStyleByResolution(mapboxStyle, scale) {
170	if (scale !== 1 && mapboxStyle) {	×
UNCOV 171	const labelLayerGroup = DEFAULT_LAYER_GROUPS.find(lg => lg.slug === 'label');	×
172	// @ts-ignore
173	const {filter: labelLayerFilter} = labelLayerGroup;	×
174	const zoomOffset = Math.log2(scale);	×
175
UNCOV 176	const copyStyle = clondDeep(mapboxStyle);	×
UNCOV 177	(copyStyle.layers \|\| []).forEach(d => {	×
178	// edit minzoom and maxzoom
179	if (d.maxzoom) {	×
180	d.maxzoom = Math.max(d.maxzoom + zoomOffset, 1);	×
181	}
182
UNCOV 183	if (d.minzoom) {	×
184	d.minzoom = Math.max(d.minzoom + zoomOffset, 1);	×
185	}
186
187	// edit text size
UNCOV 188	if (labelLayerFilter(d)) {	×
UNCOV 189	if (d.layout && d.layout['text-size'] && Array.isArray(d.layout['text-size'].stops)) {	×
190	d.layout['text-size'].stops.forEach(stop => {	×
191	// zoom
UNCOV 192	stop[0] = Math.max(stop[0] + zoomOffset, 1);	×
193	// size
UNCOV 194	stop[1] *= scale;	×
195	});
196	}
197	}
198	});
199
UNCOV 200	return copyStyle;	×
201	}
202
UNCOV 203	return mapboxStyle;	×
204	}
205
206	/**
207	* When switch to a new style, try to keep current layer group visibility
208	* by merging default and current
209	* @param {Object} defaultLayerGroup
210	* @param {Object} currentLayerGroup
211	* @return {Object} mergedLayerGroups
212	*/
213	export function mergeLayerGroupVisibility(defaultLayerGroup, currentLayerGroup) {
UNCOV 214	return Object.keys(defaultLayerGroup).reduce(	×
UNCOV 215	(accu, key) => ({	×
216	...accu,
217	...(currentLayerGroup.hasOwnProperty(key) ? {[key]: currentLayerGroup[key]} : {})	×
218	}),
219	defaultLayerGroup
220	);
221	}

keplergl / kepler.gl / 8756485498

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous