Skip to content

Commit 54e4327

Browse files
willum070willum070
authored
feat: Migrates the DDS region coverage viewer; quality/standards and optimization! (#875)
1 parent 92d4945 commit 54e4327

File tree

11 files changed

+4389
-0
lines changed

11 files changed

+4389
-0
lines changed

‎samples/dds-region-viewer/README.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# Google Maps JavaScript Sample
2+
3+
The Region Viewer lets you view all types of boundaries for every supported region.
4+
It is intended as a utility rather than a direct code demonstration.
5+
6+
## Run the conversion scripts
7+
8+
The Region Viewer relies on Google-provided JSON coverage data files to populate
9+
its menus. The Coverage data is periodically updated. Authors can generate new
10+
coverage data from CSV files using the Python scripts located in `/scripts`.
11+
12+
The conversion scripts have specific sorting requirements for the input CSV files:
13+
14+
- `csv_to_html.py` requires the CSV to be sorted by the "Country Code" column. Used
15+
to generate the HTML table for the documentation page.
16+
- `csv_to_json.py` requires the CSV to be sorted by the "Country Name En" column.
17+
Used to generate JSON data for menu logic.
18+
19+
To update coverage data:
20+
21+
1. Update the CSV files with ones containing the latest data.
22+
2. From the `samples/dds-region-viewer/` folder, run the following commands:
23+
24+
```bash
25+
python3 scripts/csv_to_html.py
26+
python3 scripts/csv_to_json.py
27+
```
28+
29+
## Setup
30+
31+
### Before starting run:
32+
33+
`npm i`
34+
35+
### Run an example on a local web server
36+
37+
`cd samples/dds-region-viewer`
38+
`npm start`
39+
40+
### Build an individual example
41+
42+
`cd samples/dds-region-viewer`
43+
`npm run build`
44+
45+
From 'samples':
46+
47+
`npm run build --workspace=dds-region-viewer/`
48+
49+
### Build all of the examples.
50+
51+
From 'samples':
52+
53+
`npm run build-all`
54+
55+
### Run lint to check for problems
56+
57+
`cd samples/dds-region-viewer`
58+
`npx eslint index.ts`
59+
60+
## Feedback
61+
62+
For feedback related to this sample, please open a new issue on
63+
[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).

‎samples/dds-region-viewer/index.html‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!DOCTYPE html>
2+
<!--
3+
@license
4+
Copyright 2019 Google LLC. All Rights Reserved.
5+
SPDX-License-Identifier: Apache-2.0
6+
-->
7+
<!-- [START maps_dds_region_viewer] -->
8+
<html>
9+
<head>
10+
<title>Region Coverage Viewer</title>
11+
12+
<link rel="stylesheet" type="text/css" href="./style.css" />
13+
<script type="module" src="./index.js"></script>
14+
<!-- prettier-ignore -->
15+
<script>(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })
16+
({ key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly" });</script>
17+
</head>
18+
<body>
19+
<gmp-map
20+
center="39.32,-95"
21+
zoom="2"
22+
map-type-control="false"
23+
street-view-control="false"
24+
map-id="1bf5295b744a394a"
25+
>
26+
<div id="container" slot="control-inline-start-block-start">
27+
<div id="sidebar">
28+
<div id="title">Region Coverage Viewer</div>
29+
<div id="country-menu-div">
30+
<!-- Country selection dropdown -->
31+
<select id="country-select" class="pac-controls"></select>
32+
</div>
33+
<div id="feature-menu-div">
34+
<!-- Feature type dropdown -->
35+
<select id="feature-type-select" class="pac-controls">
36+
<option id="country" value="country">Country</option>
37+
<option
38+
id="administrative_area_level_1"
39+
value="administrative_area_level_1"
40+
selected
41+
>
42+
Administrative Area Level 1
43+
</option>
44+
<option
45+
id="administrative_area_level_2"
46+
value="administrative_area_level_2"
47+
>
48+
Administrative Area Level 2
49+
</option>
50+
<option id="locality" value="locality">Locality</option>
51+
<option id="postal_code" value="postal_code">Postal code</option>
52+
<option id="school_district" value="school_district">
53+
School district
54+
</option>
55+
</select>
56+
</div>
57+
<!-- Autocomplete control -->
58+
<gmp-place-autocomplete class="pac-controls"></gmp-place-autocomplete>
59+
<div id="filter-checkbox">
60+
<label for="pac-filter-option"
61+
><input id="pac-filter-option" type="checkbox" /> Restrict search
62+
to selected feature type</label
63+
>
64+
</div>
65+
<!-- Color controls -->
66+
<div id="color-controls" class="pac-controls">
67+
<label for="head"
68+
>Fill:&nbsp;<input
69+
type="color"
70+
id="fill-color-picker"
71+
name="head"
72+
value="#810FCB"
73+
/></label>
74+
&nbsp;&nbsp;
75+
<label for="body"
76+
>Stroke:&nbsp;<input
77+
type="color"
78+
id="stroke-color-picker"
79+
name="body"
80+
value="#810FCB"
81+
/></label>
82+
</div>
83+
<!-- Place details, photo, etc. -->
84+
<div id="pac-content"></div>
85+
</div>
86+
</div>
87+
</gmp-map>
88+
</body>
89+
</html>
90+
<!-- [END maps_dds_region_viewer] -->

0 commit comments

Comments
 (0)