diff --git a/dist/index.html b/dist/index.html index a496030c..3e7d260c 100644 --- a/dist/index.html +++ b/dist/index.html @@ -46,6 +46,7 @@

Maps JSAPI Samples

  • advanced-markers-html-simple
  • advanced-markers-simple
  • advanced-markers-zoom
    • +
  • boundaries-simple
  • deckgl-heatmap
  • deckgl-kml
  • deckgl-kml-updated
    • diff --git a/dist/samples/boundaries-simple/app/.eslintsrc.json b/dist/samples/boundaries-simple/app/.eslintsrc.json new file mode 100644 index 00000000..4c44dab0 --- /dev/null +++ b/dist/samples/boundaries-simple/app/.eslintsrc.json @@ -0,0 +1,13 @@ +{ + "extends": [ + "plugin:@typescript-eslint/recommended" + ], + "parser": "@typescript-eslint/parser", + "rules": { + "@typescript-eslint/ban-ts-comment": 0, + "@typescript-eslint/no-this-alias": 1, + "@typescript-eslint/no-empty-function": 1, + "@typescript-eslint/explicit-module-boundary-types": 1, + "@typescript-eslint/no-unused-vars": 1 + } +} diff --git a/dist/samples/boundaries-simple/app/README.md b/dist/samples/boundaries-simple/app/README.md new file mode 100644 index 00000000..3eb0a93e --- /dev/null +++ b/dist/samples/boundaries-simple/app/README.md @@ -0,0 +1,40 @@ +# Google Maps JavaScript Sample + +This sample is generated from @googlemaps/js-samples located at +https://github.com/googlemaps-samples/js-api-samples. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/boundaries-simple` +`npm start` + +### Build an individual example + +`cd samples/boundaries-simple` +`npm run build` + +From 'samples': + +`npm run build --workspace=boundaries-simple/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/boundaries-simple` +`npx eslint index.ts` + +## Feedback + +For feedback related to this sample, please open a new issue on +[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues). diff --git a/dist/samples/boundaries-simple/app/index.html b/dist/samples/boundaries-simple/app/index.html new file mode 100644 index 00000000..46d36f41 --- /dev/null +++ b/dist/samples/boundaries-simple/app/index.html @@ -0,0 +1,22 @@ + + + + + + Boundaries Simple + + + + + + + + + + + diff --git a/dist/samples/boundaries-simple/app/index.ts b/dist/samples/boundaries-simple/app/index.ts new file mode 100644 index 00000000..2f5369c5 --- /dev/null +++ b/dist/samples/boundaries-simple/app/index.ts @@ -0,0 +1,53 @@ +/** +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ + +/** +* This is the simplest possible data-driven styling example. +* It calls the styling function with a Place ID. +*/ + +// [START maps_boundaries_simple] +let featureLayer; + +async function initMap() { + // Request needed libraries. + await google.maps.importLibrary("maps") as google.maps.MapsLibrary; + + // Get the gmp-map element. + const mapElement = document.querySelector( + "gmp-map" + ) as google.maps.MapElement; + + // Get the inner map. + const innerMap = mapElement.innerMap; + + // [START maps_boundaries_simple_get_layer] + // Get the feature layer. + featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY); + // [END maps_boundaries_simple_get_layer] + + // [START maps_boundaries_simple_style_single] + // Define a style with purple fill and border. + const featureStyleOptions: google.maps.FeatureStyleOptions = { + strokeColor: '#810FCB', + strokeOpacity: 1.0, + strokeWeight: 3.0, + fillColor: '#810FCB', + fillOpacity: 0.5 + }; + + // Apply the style to a single boundary. + featureLayer.style = (options: { feature: { placeId: string; }; }) => { + if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI + return featureStyleOptions; + } + }; + // [END maps_boundaries_simple_style_single] + +} + +initMap(); +// [END maps_boundaries_simple] diff --git a/dist/samples/boundaries-simple/app/package.json b/dist/samples/boundaries-simple/app/package.json new file mode 100644 index 00000000..a8d36e45 --- /dev/null +++ b/dist/samples/boundaries-simple/app/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/boundaries-simple", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh boundaries-simple && bash ../app.sh boundaries-simple && bash ../docs.sh boundaries-simple && npm run build:vite --workspace=. && bash ../dist.sh boundaries-simple", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", + "preview": "vite preview" + }, + "dependencies": { + + } +} diff --git a/dist/samples/boundaries-simple/app/style.css b/dist/samples/boundaries-simple/app/style.css new file mode 100644 index 00000000..94557ee3 --- /dev/null +++ b/dist/samples/boundaries-simple/app/style.css @@ -0,0 +1,25 @@ +/** + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_boundaries_simple] */ +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +gmp-map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +/* [END maps_boundaries_simple] */ \ No newline at end of file diff --git a/dist/samples/boundaries-simple/app/tsconfig.json b/dist/samples/boundaries-simple/app/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/dist/samples/boundaries-simple/app/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "esnext", + "strict": true, + "noImplicitAny": false, + "lib": [ + "es2015", + "esnext", + "es6", + "dom", + "dom.iterable" + ], + "moduleResolution": "Node", + "jsx": "preserve" + } +} diff --git a/dist/samples/boundaries-simple/dist/assets/index-DJGsUxfk.js b/dist/samples/boundaries-simple/dist/assets/index-DJGsUxfk.js new file mode 100644 index 00000000..e2190fa0 --- /dev/null +++ b/dist/samples/boundaries-simple/dist/assets/index-DJGsUxfk.js @@ -0,0 +1,5 @@ +(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))o(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const n of t.addedNodes)n.tagName==="LINK"&&n.rel==="modulepreload"&&o(n)}).observe(document,{childList:!0,subtree:!0});function i(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function o(e){if(e.ep)return;e.ep=!0;const t=i(e);fetch(e.href,t)}})();/** +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/let s;async function l(){await google.maps.importLibrary("maps"),s=document.querySelector("gmp-map").innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY);const i={strokeColor:"#810FCB",strokeOpacity:1,strokeWeight:3,fillColor:"#810FCB",fillOpacity:.5};s.style=o=>{if(o.feature.placeId=="ChIJ0zQtYiWsVHkRk8lRoB1RNPo")return i}}l(); diff --git a/dist/samples/boundaries-simple/dist/assets/index-i_98oPIq.css b/dist/samples/boundaries-simple/dist/assets/index-i_98oPIq.css new file mode 100644 index 00000000..c48393ed --- /dev/null +++ b/dist/samples/boundaries-simple/dist/assets/index-i_98oPIq.css @@ -0,0 +1,5 @@ +/** + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */gmp-map{height:100%}html,body{height:100%;margin:0;padding:0} diff --git a/dist/samples/boundaries-simple/dist/index.html b/dist/samples/boundaries-simple/dist/index.html new file mode 100644 index 00000000..d898c846 --- /dev/null +++ b/dist/samples/boundaries-simple/dist/index.html @@ -0,0 +1,22 @@ + + + + + + Boundaries Simple + + + + + + + + + + + diff --git a/dist/samples/boundaries-simple/docs/index.html b/dist/samples/boundaries-simple/docs/index.html new file mode 100644 index 00000000..46d36f41 --- /dev/null +++ b/dist/samples/boundaries-simple/docs/index.html @@ -0,0 +1,22 @@ + + + + + + Boundaries Simple + + + + + + + + + + + diff --git a/dist/samples/boundaries-simple/docs/index.js b/dist/samples/boundaries-simple/docs/index.js new file mode 100644 index 00000000..e26dd440 --- /dev/null +++ b/dist/samples/boundaries-simple/docs/index.js @@ -0,0 +1,42 @@ +"use strict"; +/** +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ +/** +* This is the simplest possible data-driven styling example. +* It calls the styling function with a Place ID. +*/ +// [START maps_boundaries_simple] +let featureLayer; +async function initMap() { + // Request needed libraries. + await google.maps.importLibrary("maps"); + // Get the gmp-map element. + const mapElement = document.querySelector("gmp-map"); + // Get the inner map. + const innerMap = mapElement.innerMap; + // [START maps_boundaries_simple_get_layer] + // Get the feature layer. + featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY); + // [END maps_boundaries_simple_get_layer] + // [START maps_boundaries_simple_style_single] + // Define a style with purple fill and border. + const featureStyleOptions = { + strokeColor: '#810FCB', + strokeOpacity: 1.0, + strokeWeight: 3.0, + fillColor: '#810FCB', + fillOpacity: 0.5 + }; + // Apply the style to a single boundary. + featureLayer.style = (options) => { + if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI + return featureStyleOptions; + } + }; + // [END maps_boundaries_simple_style_single] +} +initMap(); +// [END maps_boundaries_simple] diff --git a/dist/samples/boundaries-simple/docs/index.ts b/dist/samples/boundaries-simple/docs/index.ts new file mode 100644 index 00000000..2f5369c5 --- /dev/null +++ b/dist/samples/boundaries-simple/docs/index.ts @@ -0,0 +1,53 @@ +/** +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ + +/** +* This is the simplest possible data-driven styling example. +* It calls the styling function with a Place ID. +*/ + +// [START maps_boundaries_simple] +let featureLayer; + +async function initMap() { + // Request needed libraries. + await google.maps.importLibrary("maps") as google.maps.MapsLibrary; + + // Get the gmp-map element. + const mapElement = document.querySelector( + "gmp-map" + ) as google.maps.MapElement; + + // Get the inner map. + const innerMap = mapElement.innerMap; + + // [START maps_boundaries_simple_get_layer] + // Get the feature layer. + featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY); + // [END maps_boundaries_simple_get_layer] + + // [START maps_boundaries_simple_style_single] + // Define a style with purple fill and border. + const featureStyleOptions: google.maps.FeatureStyleOptions = { + strokeColor: '#810FCB', + strokeOpacity: 1.0, + strokeWeight: 3.0, + fillColor: '#810FCB', + fillOpacity: 0.5 + }; + + // Apply the style to a single boundary. + featureLayer.style = (options: { feature: { placeId: string; }; }) => { + if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI + return featureStyleOptions; + } + }; + // [END maps_boundaries_simple_style_single] + +} + +initMap(); +// [END maps_boundaries_simple] diff --git a/dist/samples/boundaries-simple/docs/style.css b/dist/samples/boundaries-simple/docs/style.css new file mode 100644 index 00000000..94557ee3 --- /dev/null +++ b/dist/samples/boundaries-simple/docs/style.css @@ -0,0 +1,25 @@ +/** + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_boundaries_simple] */ +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +gmp-map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +/* [END maps_boundaries_simple] */ \ No newline at end of file diff --git a/dist/samples/boundaries-simple/jsfiddle/demo.css b/dist/samples/boundaries-simple/jsfiddle/demo.css new file mode 100644 index 00000000..29cd2be7 --- /dev/null +++ b/dist/samples/boundaries-simple/jsfiddle/demo.css @@ -0,0 +1,24 @@ +/** + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +gmp-map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + diff --git a/dist/samples/boundaries-simple/jsfiddle/demo.details b/dist/samples/boundaries-simple/jsfiddle/demo.details new file mode 100644 index 00000000..90255aba --- /dev/null +++ b/dist/samples/boundaries-simple/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: boundaries-simple +authors: + - Geo Developer IX Documentation Team +tags: + - google maps +load_type: h +description: Sample code supporting Google Maps Platform JavaScript API documentation. diff --git a/dist/samples/boundaries-simple/jsfiddle/demo.html b/dist/samples/boundaries-simple/jsfiddle/demo.html new file mode 100644 index 00000000..edce527f --- /dev/null +++ b/dist/samples/boundaries-simple/jsfiddle/demo.html @@ -0,0 +1,22 @@ + + + + + + Boundaries Simple + + + + + + + + + + + diff --git a/dist/samples/boundaries-simple/jsfiddle/demo.js b/dist/samples/boundaries-simple/jsfiddle/demo.js new file mode 100644 index 00000000..425d1627 --- /dev/null +++ b/dist/samples/boundaries-simple/jsfiddle/demo.js @@ -0,0 +1,42 @@ +"use strict"; +/** +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ +/** +* This is the simplest possible data-driven styling example. +* It calls the styling function with a Place ID. +*/ + +let featureLayer; +async function initMap() { + // Request needed libraries. + await google.maps.importLibrary("maps"); + // Get the gmp-map element. + const mapElement = document.querySelector("gmp-map"); + // Get the inner map. + const innerMap = mapElement.innerMap; + + // Get the feature layer. + featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY); + + + // Define a style with purple fill and border. + const featureStyleOptions = { + strokeColor: '#810FCB', + strokeOpacity: 1.0, + strokeWeight: 3.0, + fillColor: '#810FCB', + fillOpacity: 0.5 + }; + // Apply the style to a single boundary. + featureLayer.style = (options) => { + if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI + return featureStyleOptions; + } + }; + +} +initMap(); + diff --git a/index.html b/index.html index a496030c..3e7d260c 100644 --- a/index.html +++ b/index.html @@ -46,6 +46,7 @@

    Maps JSAPI Samples

  • advanced-markers-html-simple
  • advanced-markers-simple
  • advanced-markers-zoom
    • +
  • boundaries-simple
  • deckgl-heatmap
  • deckgl-kml
  • deckgl-kml-updated
    • diff --git a/package-lock.json b/package-lock.json index 4471b0c5..45aba178 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1412,6 +1412,10 @@ "resolved": "samples/advanced-markers-zoom", "link": true }, + "node_modules/@js-api-samples/boundaries-simple": { + "resolved": "samples/boundaries-simple", + "link": true + }, "node_modules/@js-api-samples/deckgl-heatmap": { "resolved": "samples/deckgl-heatmap", "link": true @@ -8769,6 +8773,10 @@ "name": "@js-api-samples/advanced-markers-zoom", "version": "1.0.0" }, + "samples/boundaries-simple": { + "name": "@js-api-samples/boundaries-simple", + "version": "1.0.0" + }, "samples/deckgl-heatmap": { "name": "@js-api-samples/deckgl-heatmap", "version": "1.0.0" @@ -8831,11 +8839,11 @@ "version": "1.0.0", "dependencies": { "@googlemaps/js-api-loader": "^2.0.1", - "terra-draw": "*", - "terra-draw-google-maps-adapter": "*" + "terra-draw": "latest", + "terra-draw-google-maps-adapter": "latest" }, "devDependencies": { - "@types/google.maps": "*", + "@types/google.maps": "latest", "typescript": "^5.9.3", "vite": "^7.1.11" } @@ -8975,7 +8983,7 @@ "name": "@js-api-samples/react-ui-kit-place-details-latlng-compact", "version": "1.0.0", "dependencies": { - "@vis.gl/react-google-maps": "*", + "@vis.gl/react-google-maps": "latest", "react": "^19.2.0", "react-dom": "^19.2.0" },