diff --git a/dist/samples/deckgl-heatmap/app/index.html b/dist/samples/deckgl-heatmap/app/index.html index 4331feb8..b6550e9d 100644 --- a/dist/samples/deckgl-heatmap/app/index.html +++ b/dist/samples/deckgl-heatmap/app/index.html @@ -4,6 +4,7 @@ Copyright 2019 Google LLC. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 --> + deck.gl HeatmapLayer and Google Maps Platform @@ -71,4 +72,5 @@

Bike Parking Spaces

({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"}); - \ No newline at end of file + + \ No newline at end of file diff --git a/dist/samples/deckgl-heatmap/app/index.ts b/dist/samples/deckgl-heatmap/app/index.ts index 9ace375a..41af0a2f 100644 --- a/dist/samples/deckgl-heatmap/app/index.ts +++ b/dist/samples/deckgl-heatmap/app/index.ts @@ -3,7 +3,7 @@ * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ - +/* [START maps_deckgl_heatmap] */ // Declare global namespace for Deck.gl to satisfy TypeScript compiler declare namespace deck { class HeatmapLayer { @@ -20,7 +20,6 @@ declare namespace deck { // Add other Deck.gl types used globally if needed } - // Initialize and add the map let map: google.maps.Map; // Use global types for Deck.gl components @@ -45,7 +44,6 @@ async function initMap(): Promise { }; } - // The location for the map center. const position = {lat:37.77325660358167, lng:-122.41712341793448}; // Using the center from original deckgl-polygon.js @@ -197,3 +195,4 @@ async function initMap(): Promise { } initMap(); +/* [END maps_deckgl_heatmap] */ \ No newline at end of file diff --git a/dist/samples/deckgl-heatmap/app/style.css b/dist/samples/deckgl-heatmap/app/style.css index 07d09c1a..72c9f28d 100644 --- a/dist/samples/deckgl-heatmap/app/style.css +++ b/dist/samples/deckgl-heatmap/app/style.css @@ -3,7 +3,7 @@ * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ -/* [START maps_add_map] */ +/* [START maps_deckgl_heatmap] */ /* * Always set the map height explicitly to define the size of the div element * that contains the map. @@ -26,7 +26,6 @@ body { position: relative; /* Set body as positioning context */ font-family: 'Roboto', Arial, sans-serif; /* Set font family */ } -/* [END maps_add_map] */ #toggleButton { position: absolute; @@ -101,4 +100,5 @@ margin:10px; transform: translateX(-50%); /* Adjust for centering */ top: auto; /* Remove top positioning */ } -} \ No newline at end of file +} +/* [END maps_deckgl_heatmap] */ diff --git a/dist/samples/deckgl-heatmap/dist/assets/index-CG8BDR0z.js b/dist/samples/deckgl-heatmap/dist/assets/index-CG8BDR0z.js new file mode 100644 index 00000000..87ecd117 --- /dev/null +++ b/dist/samples/deckgl-heatmap/dist/assets/index-CG8BDR0z.js @@ -0,0 +1,10 @@ +(function(){const a=document.createElement("link").relList;if(a&&a.supports&&a.supports("modulepreload"))return;for(const o of document.querySelectorAll('link[rel="modulepreload"]'))g(o);new MutationObserver(o=>{for(const n of o)if(n.type==="childList")for(const d of n.addedNodes)d.tagName==="LINK"&&d.rel==="modulepreload"&&g(d)}).observe(document,{childList:!0,subtree:!0});function u(o){const n={};return o.integrity&&(n.integrity=o.integrity),o.referrerPolicy&&(n.referrerPolicy=o.referrerPolicy),o.crossOrigin==="use-credentials"?n.credentials="include":o.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function g(o){if(o.ep)return;o.ep=!0;const n=u(o);fetch(o.href,n)}})();let l,p,f,c,s;async function b(){var r,a=document.querySelector(".mdc-linear-progress");a&&(r=new mdc.linearProgress.MDCLinearProgress(a),r.open(),r.determinate=!1,r.done=function(){r.close(),a?.remove()});const u={lat:37.77325660358167,lng:-122.41712341793448},{Map:g,InfoWindow:o}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:n}=await google.maps.importLibrary("marker"),d=document.getElementById("map");if(!d){console.error("Map element not found!");return}l=new g(d,{zoom:13,center:u,tilt:90,heading:-25,mapId:"6b73a9fe7e831a00",fullscreenControl:!1,clickableIcons:!1}),p=new deck.HeatmapLayer({id:"HeatmapLayer",data:"https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-bike-parking.json",getPosition:t=>t.COORDINATES,getWeight:t=>t.SPACES,radiusPixels:25,visible:!0,pickable:!0,onHover:t=>{const e=document.getElementById("tooltip");if(e){if(console.log("Hovered object:",t.object),t.object){let i="

Bike Parking Info:

";t.object.ADDRESS!==void 0&&(i+=`Address: ${t.object.ADDRESS}
`),t.object.RACKS!==void 0&&(i+=`Racks: ${t.object.RACKS}
`),t.object.SPACES!==void 0&&(i+=`Spaces: ${t.object.SPACES}
`),e.innerHTML=i,e.style.left=t.x+"px",e.style.top=t.y+"px",e.style.display="block"}else e.style.display="none";console.log("Tooltip content set to:",e.innerHTML)}}}),p.pickable=!0,f=new deck.GoogleMapsOverlay({layers:[p],controller:!0}),f.setMap(l),r&&setTimeout(()=>{r.done()},100),s=new o,l.addListener("click",async t=>{const e=t.latLng;if(e)if(c){c.position=e;const i=` +
Location: ${e.lat().toFixed(3)}, ${e.lng().toFixed(3)}
+
Open in Google Maps
+ `;s.setContent(i),s.open(l,c)}else{c=new n({map:l,position:e,gmpClickable:!0}),c.addListener("click",()=>{s.close();const y=` +
Location: ${e.lat().toFixed(3)}, ${e.lng().toFixed(3)}
+
Open in Google Maps
+ `;s.setContent(y),s.open(l,c)});const i=` +
Location: ${e.lat().toFixed(3)}, ${e.lng().toFixed(3)}
+
Open in Google Maps
+ `;s.setContent(i),s.open(l,c)}});const m=document.getElementById("toggleButton");m&&m.addEventListener("click",()=>{const t=p.props.visible,e=p.clone({visible:!t});f.setProps({layers:[e]}),p=e,m.textContent=t?"Show Heatmap Layer":"Hide Heatmap Layer"})}b(); diff --git a/dist/samples/deckgl-heatmap/dist/assets/index-Bq-nlDlf.css b/dist/samples/deckgl-heatmap/dist/assets/index-D66dlIH6.css similarity index 81% rename from dist/samples/deckgl-heatmap/dist/assets/index-Bq-nlDlf.css rename to dist/samples/deckgl-heatmap/dist/assets/index-D66dlIH6.css index 019a7161..de784a83 100644 --- a/dist/samples/deckgl-heatmap/dist/assets/index-Bq-nlDlf.css +++ b/dist/samples/deckgl-heatmap/dist/assets/index-D66dlIH6.css @@ -2,4 +2,4 @@ * @license * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 - */#map{height:100%;flex-grow:1}html,body{height:100%;margin:0;padding:0;display:flex;flex-direction:column;position:relative;font-family:Roboto,Arial,sans-serif}#toggleButton{position:absolute;top:70px;left:50%;transform:translate(-50%);z-index:1000}#tooltip{position:absolute;z-index:1001;padding:10px;background:#000c;color:#fff;border-radius:4px;pointer-events:none;display:none;font-size:126x}h1{text-align:center;margin:10px}#legend{position:absolute;top:90px;right:10px;z-index:1000;background-color:#ffffffe6;padding:10px;border-radius:4px;font-size:14px}#legend h4{margin-top:0;margin-bottom:5px}#legend div{display:flex;align-items:center;margin-bottom:3px}#legend span{display:inline-block;width:20px;height:14px;margin-right:5px;border:1px solid #000}@media (max-width: 600px){#legend{position:absolute;bottom:50px;left:50%;transform:translate(-50%);top:auto;right:auto}#toggleButton{position:absolute;bottom:10px;left:50%;transform:translate(-50%);top:auto}} + */#map{height:100%;flex-grow:1}html,body{height:100%;margin:0;padding:0;display:flex;flex-direction:column;position:relative;font-family:Roboto,Arial,sans-serif}#toggleButton{position:absolute;top:70px;left:50%;transform:translate(-50%);z-index:1000}#tooltip{position:absolute;z-index:1001;padding:10px;background:#000c;color:#fff;border-radius:4px;pointer-events:none;display:none;font-size:126x}h1{text-align:center;margin:10px}#legend{position:absolute;top:90px;right:10px;z-index:1000;background-color:#ffffffe6;padding:10px;border-radius:4px;font-size:14px}#legend h4{margin-top:0;margin-bottom:5px}#legend div{display:flex;align-items:center;margin-bottom:3px}#legend span{display:inline-block;width:20px;height:14px;margin-right:5px;border:1px solid #000}@media (max-width: 600px){#legend{position:absolute;inset:auto auto 50px 50%;transform:translate(-50%)}#toggleButton{position:absolute;bottom:10px;left:50%;transform:translate(-50%);top:auto}} diff --git a/dist/samples/deckgl-heatmap/dist/assets/index-NKNuFlIx.js b/dist/samples/deckgl-heatmap/dist/assets/index-NKNuFlIx.js deleted file mode 100644 index 7c3e406e..00000000 --- a/dist/samples/deckgl-heatmap/dist/assets/index-NKNuFlIx.js +++ /dev/null @@ -1,14 +0,0 @@ -(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const o of document.querySelectorAll('link[rel="modulepreload"]'))g(o);new MutationObserver(o=>{for(const n of o)if(n.type==="childList")for(const d of n.addedNodes)d.tagName==="LINK"&&d.rel==="modulepreload"&&g(d)}).observe(document,{childList:!0,subtree:!0});function u(o){const n={};return o.integrity&&(n.integrity=o.integrity),o.referrerPolicy&&(n.referrerPolicy=o.referrerPolicy),o.crossOrigin==="use-credentials"?n.credentials="include":o.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function g(o){if(o.ep)return;o.ep=!0;const n=u(o);fetch(o.href,n)}})();/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */let l,p,f,c,a;async function b(){var i,r=document.querySelector(".mdc-linear-progress");r&&(i=new mdc.linearProgress.MDCLinearProgress(r),i.open(),i.determinate=!1,i.done=function(){i.close(),r==null||r.remove()});const u={lat:37.77325660358167,lng:-122.41712341793448},{Map:g,InfoWindow:o}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:n}=await google.maps.importLibrary("marker"),d=document.getElementById("map");if(!d){console.error("Map element not found!");return}l=new g(d,{zoom:13,center:u,tilt:90,heading:-25,mapId:"6b73a9fe7e831a00",fullscreenControl:!1,clickableIcons:!1}),p=new deck.HeatmapLayer({id:"HeatmapLayer",data:"https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-bike-parking.json",getPosition:t=>t.COORDINATES,getWeight:t=>t.SPACES,radiusPixels:25,visible:!0,pickable:!0,onHover:t=>{const e=document.getElementById("tooltip");if(e){if(console.log("Hovered object:",t.object),t.object){let s="

Bike Parking Info:

";t.object.ADDRESS!==void 0&&(s+=`Address: ${t.object.ADDRESS}
`),t.object.RACKS!==void 0&&(s+=`Racks: ${t.object.RACKS}
`),t.object.SPACES!==void 0&&(s+=`Spaces: ${t.object.SPACES}
`),e.innerHTML=s,e.style.left=t.x+"px",e.style.top=t.y+"px",e.style.display="block"}else e.style.display="none";console.log("Tooltip content set to:",e.innerHTML)}}}),p.pickable=!0,f=new deck.GoogleMapsOverlay({layers:[p],controller:!0}),f.setMap(l),i&&setTimeout(()=>{i.done()},100),a=new o,l.addListener("click",async t=>{const e=t.latLng;if(e)if(c){c.position=e;const s=` -
Location: ${e.lat().toFixed(3)}, ${e.lng().toFixed(3)}
-
Open in Google Maps
- `;a.setContent(s),a.open(l,c)}else{c=new n({map:l,position:e,gmpClickable:!0}),c.addListener("click",()=>{a.close();const y=` -
Location: ${e.lat().toFixed(3)}, ${e.lng().toFixed(3)}
-
Open in Google Maps
- `;a.setContent(y),a.open(l,c)});const s=` -
Location: ${e.lat().toFixed(3)}, ${e.lng().toFixed(3)}
-
Open in Google Maps
- `;a.setContent(s),a.open(l,c)}});const m=document.getElementById("toggleButton");m&&m.addEventListener("click",()=>{const t=p.props.visible,e=p.clone({visible:!t});f.setProps({layers:[e]}),p=e,m.textContent=t?"Show Heatmap Layer":"Hide Heatmap Layer"})}b(); diff --git a/dist/samples/deckgl-heatmap/dist/index.html b/dist/samples/deckgl-heatmap/dist/index.html index 0cab2812..8227af8b 100644 --- a/dist/samples/deckgl-heatmap/dist/index.html +++ b/dist/samples/deckgl-heatmap/dist/index.html @@ -4,6 +4,7 @@ Copyright 2019 Google LLC. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 --> + deck.gl HeatmapLayer and Google Maps Platform @@ -19,8 +20,8 @@ - - + +
Bike Parking Spaces ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"}); - \ No newline at end of file + + \ No newline at end of file diff --git a/dist/samples/deckgl-heatmap/docs/index.html b/dist/samples/deckgl-heatmap/docs/index.html index 4331feb8..b6550e9d 100644 --- a/dist/samples/deckgl-heatmap/docs/index.html +++ b/dist/samples/deckgl-heatmap/docs/index.html @@ -4,6 +4,7 @@ Copyright 2019 Google LLC. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 --> + deck.gl HeatmapLayer and Google Maps Platform @@ -71,4 +72,5 @@

Bike Parking Spaces

({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"}); - \ No newline at end of file + + \ No newline at end of file diff --git a/dist/samples/deckgl-heatmap/docs/index.js b/dist/samples/deckgl-heatmap/docs/index.js index f5e6570f..4b08389a 100644 --- a/dist/samples/deckgl-heatmap/docs/index.js +++ b/dist/samples/deckgl-heatmap/docs/index.js @@ -1,9 +1,4 @@ "use strict"; -/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */ // Initialize and add the map let map; // Use global types for Deck.gl components @@ -159,3 +154,4 @@ async function initMap() { } } initMap(); +/* [END maps_deckgl_heatmap] */ diff --git a/dist/samples/deckgl-heatmap/docs/index.ts b/dist/samples/deckgl-heatmap/docs/index.ts index 9ace375a..41af0a2f 100644 --- a/dist/samples/deckgl-heatmap/docs/index.ts +++ b/dist/samples/deckgl-heatmap/docs/index.ts @@ -3,7 +3,7 @@ * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ - +/* [START maps_deckgl_heatmap] */ // Declare global namespace for Deck.gl to satisfy TypeScript compiler declare namespace deck { class HeatmapLayer { @@ -20,7 +20,6 @@ declare namespace deck { // Add other Deck.gl types used globally if needed } - // Initialize and add the map let map: google.maps.Map; // Use global types for Deck.gl components @@ -45,7 +44,6 @@ async function initMap(): Promise { }; } - // The location for the map center. const position = {lat:37.77325660358167, lng:-122.41712341793448}; // Using the center from original deckgl-polygon.js @@ -197,3 +195,4 @@ async function initMap(): Promise { } initMap(); +/* [END maps_deckgl_heatmap] */ \ No newline at end of file diff --git a/dist/samples/deckgl-heatmap/docs/style.css b/dist/samples/deckgl-heatmap/docs/style.css index 07d09c1a..72c9f28d 100644 --- a/dist/samples/deckgl-heatmap/docs/style.css +++ b/dist/samples/deckgl-heatmap/docs/style.css @@ -3,7 +3,7 @@ * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ -/* [START maps_add_map] */ +/* [START maps_deckgl_heatmap] */ /* * Always set the map height explicitly to define the size of the div element * that contains the map. @@ -26,7 +26,6 @@ body { position: relative; /* Set body as positioning context */ font-family: 'Roboto', Arial, sans-serif; /* Set font family */ } -/* [END maps_add_map] */ #toggleButton { position: absolute; @@ -101,4 +100,5 @@ margin:10px; transform: translateX(-50%); /* Adjust for centering */ top: auto; /* Remove top positioning */ } -} \ No newline at end of file +} +/* [END maps_deckgl_heatmap] */ diff --git a/dist/samples/deckgl-heatmap/jsfiddle/demo.css b/dist/samples/deckgl-heatmap/jsfiddle/demo.css index 78dc786e..d9884f2b 100644 --- a/dist/samples/deckgl-heatmap/jsfiddle/demo.css +++ b/dist/samples/deckgl-heatmap/jsfiddle/demo.css @@ -27,7 +27,6 @@ body { font-family: 'Roboto', Arial, sans-serif; /* Set font family */ } - #toggleButton { position: absolute; top: 70px; /* Position towards the top of the map area */ @@ -101,4 +100,5 @@ margin:10px; transform: translateX(-50%); /* Adjust for centering */ top: auto; /* Remove top positioning */ } -} \ No newline at end of file +} + diff --git a/dist/samples/deckgl-heatmap/jsfiddle/demo.html b/dist/samples/deckgl-heatmap/jsfiddle/demo.html index 4331feb8..aef14871 100644 --- a/dist/samples/deckgl-heatmap/jsfiddle/demo.html +++ b/dist/samples/deckgl-heatmap/jsfiddle/demo.html @@ -4,6 +4,7 @@ Copyright 2019 Google LLC. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 --> + deck.gl HeatmapLayer and Google Maps Platform @@ -71,4 +72,4 @@

Bike Parking Spaces

({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"}); - \ No newline at end of file + diff --git a/dist/samples/deckgl-heatmap/jsfiddle/demo.js b/dist/samples/deckgl-heatmap/jsfiddle/demo.js index f5e6570f..4b08389a 100644 --- a/dist/samples/deckgl-heatmap/jsfiddle/demo.js +++ b/dist/samples/deckgl-heatmap/jsfiddle/demo.js @@ -1,9 +1,4 @@ "use strict"; -/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */ // Initialize and add the map let map; // Use global types for Deck.gl components @@ -159,3 +154,4 @@ async function initMap() { } } initMap(); +/* [END maps_deckgl_heatmap] */