• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

Code-4-Community / speak-for-the-trees-frontend / 8842627401

26 Apr 2024 03:20AM UTC coverage: 39.836% (-0.4%) from 40.225%
8842627401

push

github

web-flow
Ah.more translations (#350)

* legend translations

* working: need to do add sites forms

* more translations

* locations message

* upload image tweaks

232 of 876 branches covered (26.48%)

Branch coverage included in aggregate %.

3 of 23 new or added lines in 13 files covered. (13.04%)

16 existing lines in 6 files now uncovered.

1079 of 2415 relevant lines covered (44.68%)

11.21 hits per line

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

2.13
/src/components/mapComponents/logic/init.ts
1
import {
2
  createNeighborhoodMarker,
3
  setBlocksStyle,
4
  setNeighborhoodsStyle,
5
  setPrivateStreetsStyle,
6
  setSitesStyle,
7
} from './style';
8
import {
9
  BlockGeoData,
10
  MapLayersAndListeners,
11
  MapViews,
12
  NeighborhoodGeoData,
13
  SiteGeoData,
14
} from '../ducks/types';
15
import {
16
  addHandleMapTypeChange,
17
  addHandleZoomChange,
18
  addTreePopupOnClick,
19
  addZoomToClickedNeighborhood,
20
  getImageSize,
21
} from './event';
22
import { BasicTreeInfo } from '../../treePopup';
23
import { message } from 'antd';
24
import { CheckboxValueType } from 'antd/es/checkbox/Group';
25
import { InitMapData } from '../ducks/types';
26
import { ALL_SITES_VISIBLE_COMBINED } from '../constants';
27
import { MapTypes, SetStateType } from '../../../context/types';
28
import { getActiveLanguage } from '../../../i18n/i18n';
29

30
// Logic for creating and setting up data layers/markers
31

32
/**
33
 * Creates the private streets layer and sets its initial style, returns the layer.
34
 * @param map the map to add the layer to
35
 * @param visible whether to initiate the layer as visible
36
 */
37
export function initPrivateStreets(
38
  map: google.maps.Map,
39
  visible: boolean,
40
): google.maps.Data {
41
  const privateStreetsLayer = new google.maps.Data({ map });
×
42
  // Loads the objects into the layer
43
  privateStreetsLayer.loadGeoJson(
×
44
    'https://raw.githubusercontent.com/florisdobber/SFTT-map-test/master/private_streets.json',
45
  );
46
  // Initially hide streets while the neighborhoods are shown
47
  setPrivateStreetsStyle(privateStreetsLayer, visible);
×
48
  return privateStreetsLayer;
×
49
}
50

51
/**
52
 * Creates the neighborhoods layer, adds the event listener for when a neighborhood is clicked, and
53
 * sets its initial style, returns the layer.
54
 * @param neighborhoods the neighborhood geo data
55
 * @param markersArray the array of markers to put the neighborhood name markers in
56
 * @param view the map view
57
 * @param map the map to add the layer to
58
 *  @param visible whether to initiate the layer as visible
59
 */
60
export function initNeighborhoods(
61
  neighborhoods: NeighborhoodGeoData,
62
  markersArray: google.maps.Marker[],
63
  view: MapViews,
64
  map: google.maps.Map,
65
  visible: boolean,
66
  mapTypeId: MapTypes,
67
): google.maps.Data {
68
  const neighborhoodsLayer = new google.maps.Data({ map });
×
69
  // Loads the objects into the layer
70
  neighborhoodsLayer.addGeoJson(neighborhoods);
×
71
  // Add a name marker to each neighborhood after the GeoJson loads
72
  neighborhoodsLayer.forEach((feature) => {
×
73
    const marker = createNeighborhoodMarker(feature, map, mapTypeId);
×
74
    markersArray.push(marker);
×
75
    marker.setMap(map);
×
76
  });
77
  // Sets the style of the layer, initially the neighborhoods are shown by themselves
78
  setNeighborhoodsStyle(neighborhoodsLayer, markersArray, visible, mapTypeId);
×
79
  // Adds the event listener
80
  addZoomToClickedNeighborhood(neighborhoodsLayer, view, map);
×
81
  return neighborhoodsLayer;
×
82
}
83

84
/**
85
 * Creates the blocks layer and sets its initial style, returns the layer.
86
 * @param blocks the blocks geo data
87
 * @param map the map to add the layer to
88
 *  @param visible whether to initiate the layer as visible
89
 */
90
export function initBlocks(
91
  blocks: BlockGeoData,
92
  map: google.maps.Map,
93
  visible: boolean,
94
): google.maps.Data {
95
  const blocksLayer = new google.maps.Data({ map });
×
96
  // Loads the objects into the layer
97
  blocksLayer.addGeoJson(blocks);
×
98
  // Sets the style of the layer, initially hidden while neighborhoods are shown
99
  setBlocksStyle(blocksLayer, visible);
×
100
  // todo add show reservation modal event listener
101
  return blocksLayer;
×
102
}
103

104
/**
105
 * Creates the sites layer, sets its initial style, and adds the event listener for when a site is clicked,
106
 * returns the layer.
107
 * @param sites the site geo data
108
 * @param visibleSites which sites are visible
109
 * @param setActiveTreeInfo the callback function to update the active tree info
110
 * @param popPopup the callback function to pop the popup at the location
111
 * @param map the map to add the layer to
112
 * @param zoomLevel the zoom level between 16 and 22 where zooming in increases zoom level
113
 * @param visible whether to initiate the layer as visible
114
 */
115
export function initSites(
116
  sites: SiteGeoData,
117
  visibleSites: CheckboxValueType[],
118
  setActiveTreeInfo: (value: BasicTreeInfo) => void,
119
  popPopup: (latLng: google.maps.LatLng) => void,
120
  map: google.maps.Map,
121
  zoomLevel: number,
122
  visible: boolean,
123
  mapTypeId: MapTypes,
124
): google.maps.Data {
125
  const sitesLayer = new google.maps.Data({ map });
×
126
  // Loads the objects into the layer
127
  sitesLayer.addGeoJson(sites);
×
128
  // Adds listener so tree popup appears when site clicked
129
  addTreePopupOnClick(sitesLayer, setActiveTreeInfo, popPopup);
×
130
  // Initially hidden while the neighborhoods are shown
131
  setSitesStyle(sitesLayer, visibleSites, zoomLevel, visible, mapTypeId);
×
132
  return sitesLayer;
×
133
}
134

135
const userLocationMessages: { [key: string]: string } = {
12✔
136
  en: 'Enable access to your location to display where you are on the map.',
137
  es: 'Enable access to your location to display where you are on the map.',
138
};
139

140
/**
141
 * Displays the user's location on the map, if the user has given permission.
142
 * @param map the map to show the location on
143
 */
144
export function initUserLocation(map: google.maps.Map): void {
145
  if (navigator.geolocation) {
×
146
    navigator.geolocation.getCurrentPosition(
×
147
      (pos) => {
148
        const me = new google.maps.LatLng(
×
149
          pos.coords.latitude,
150
          pos.coords.longitude,
151
        );
152
        const userLocation = new google.maps.Marker({
×
153
          position: me,
154
          clickable: false,
155
          icon: {
156
            path: google.maps.SymbolPath.CIRCLE,
157
            scale: 5,
158
            fillColor: 'blue',
159
            fillOpacity: 1,
160
            strokeWeight: 0,
161
          },
162
        });
163
        userLocation.setMap(map);
×
164
      },
165
      () => {
NEW
166
        message.info(userLocationMessages[getActiveLanguage()], 5).then();
×
167
      },
168
    );
169
  }
170
}
171

172
/**
173
 * Initializes map with view MapView.TREES.
174
 * @param mapData the map data to update
175
 * @param neighborhoods the neighborhood geo data
176
 * @param sites the site geo data
177
 */
178
export function initSiteView(
179
  mapData: InitMapData,
180
  neighborhoods: NeighborhoodGeoData,
181
  sites: SiteGeoData,
182
  setMapTypeId: SetStateType<MapTypes>,
183
): MapLayersAndListeners {
184
  const zoomedIn = mapData.zoom >= MapViews.TREES;
×
185

186
  const privateStreetsLayer = initPrivateStreets(mapData.map, false);
×
187
  const neighborhoodsLayer = initNeighborhoods(
×
188
    neighborhoods,
189
    mapData.markersArray,
190
    MapViews.TREES,
191
    mapData.map,
192
    !zoomedIn,
193
    mapData.mapTypeId,
194
  );
195
  const sitesLayer = initSites(
×
196
    sites,
197
    ALL_SITES_VISIBLE_COMBINED,
198
    mapData.setActiveTreeInfo,
199
    mapData.popPopup,
200
    mapData.map,
201
    getImageSize(mapData.zoom),
202
    zoomedIn,
203
    mapData.mapTypeId,
204
  );
205

206
  initUserLocation(mapData.map);
×
207

208
  const zoomListener = addHandleZoomChange(
×
209
    neighborhoodsLayer,
210
    mapData.markersArray,
211
    privateStreetsLayer,
212
    sitesLayer,
213
    sitesLayer,
214
    ALL_SITES_VISIBLE_COMBINED,
215
    MapViews.TREES,
216
    mapData.map,
217
  );
218

219
  const mapTypeListener = addHandleMapTypeChange(
×
220
    neighborhoodsLayer,
221
    mapData.markersArray,
222
    sitesLayer,
223
    ALL_SITES_VISIBLE_COMBINED,
224
    MapViews.TREES,
225
    mapData.map,
226
    setMapTypeId,
227
  );
228

229
  return {
×
230
    privateStreetsLayer,
231
    neighborhoodsLayer,
232
    sitesLayer,
233
    zoomListener,
234
    mapTypeListener,
235
  };
236
}
237

238
/**
239
 * Initializes map with view MapView.BLOCKS.
240
 * @param mapData the map data to update
241
 * @param neighborhoods the neighborhood geo data
242
 * @param blocks the blocks geo data
243
 */
244
export function initBlockView(
245
  mapData: InitMapData,
246
  neighborhoods: NeighborhoodGeoData,
247
  blocks: BlockGeoData,
248
  setMapTypeId: SetStateType<MapTypes>,
249
): MapLayersAndListeners {
250
  const zoomedIn = mapData.zoom >= MapViews.BLOCKS;
×
251

252
  const privateStreetsLayer = initPrivateStreets(mapData.map, true);
×
253
  const neighborhoodsLayer = initNeighborhoods(
×
254
    neighborhoods,
255
    mapData.markersArray,
256
    MapViews.BLOCKS,
257
    mapData.map,
258
    !zoomedIn,
259
    mapData.mapTypeId,
260
  );
261
  const blocksLayer = initBlocks(blocks, mapData.map, true);
×
262

263
  initUserLocation(mapData.map);
×
264

265
  const zoomListener = addHandleZoomChange(
×
266
    neighborhoodsLayer,
267
    mapData.markersArray,
268
    privateStreetsLayer,
269
    blocksLayer,
270
    blocksLayer,
271
    ALL_SITES_VISIBLE_COMBINED,
272
    MapViews.BLOCKS,
273
    mapData.map,
274
  );
275

276
  const mapTypeListener = addHandleMapTypeChange(
×
277
    neighborhoodsLayer,
278
    mapData.markersArray,
279
    blocksLayer,
280
    ALL_SITES_VISIBLE_COMBINED,
281
    MapViews.TREES,
282
    mapData.map,
283
    setMapTypeId,
284
  );
285

286
  return {
×
287
    privateStreetsLayer,
288
    neighborhoodsLayer,
289
    blocksLayer,
290
    zoomListener,
291
    mapTypeListener,
292
  };
293
}
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2026 Coveralls, Inc