Skip to content

Instantly share code, notes, and snippets.

@mhansen

mhansen/index.html

Created January 4, 2026 04:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mhansen/af89560f438d1a6c4cdccea90a5bb2d4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mhansen/af89560f438d1a6c4cdccea90a5bb2d4 to your computer and use it in GitHub Desktop.
Download ZIP
Terminal output HTML
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Terminal Output</title>
</head>
<body style="background: black; color: white; margin: 0; padding: 5px;">
<pre>
███ █████████ ██████████ ██████ ██████ █████ ██████ █████ █████
░░░███ ███░░░░░███░░███░░░░░█░░██████ ██████ ░░███ ░░██████ ░░███ ░░███
░░░███ ███ ░░░ ░███ █ ░ ░███░█████░███ ░███ ░███░███ ░███ ░███
░░░███ ░███ ░██████ ░███░░███ ░███ ░███ ░███░░███░███ ░███
███░ ░███ █████ ░███░░█ ░███ ░░░ ░███ ░███ ░███ ░░██████ ░███
███░ ░░███ ░░███ ░███ ░ █ ░███ ░███ ░███ ░███ ░░█████ ░███
███░ ░░█████████ ██████████ █████ █████ █████ █████ ░░█████ █████
░░░ ░░░░░░░░░ ░░░░░░░░░░ ░░░░░ ░░░░░ ░░░░░ ░░░░░ ░░░░░ ░░░░░
Tips for getting started:
1. Ask questions, edit files, or run commands.
2. Be specific for the best results.
3. Create GEMINI.md files to customize your interactions with Gemini.
4. /help for more information.
&gt; Let's fix https://github.com/mhansen/nzwirelessmap/issues/19
╭─────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✓ WebFetch Processing URLs and instructions from prompt: "Get the content of https://github.c… │
│ │
│ Content processed from prompt. │
╰─────────────────────────────────────────────────────────────────────────────────────────────────╯
╭─────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✓ ReadFolder site2/src │
│ │
│ Listed 8 item(s). │
╰─────────────────────────────────────────────────────────────────────────────────────────────────╯
╭─────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✓ ReadFile site2/src/App.tsx │
│ │
╰─────────────────────────────────────────────────────────────────────────────────────────────────╯
╭─────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✓ GoogleSearch Searching the web for: "deck.gl LineLayer getWidth zoom" │
│ │
│ Search results for "deck.gl LineLayer getWidth zoom" returned. │
╰─────────────────────────────────────────────────────────────────────────────────────────────────╯
╭─────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✓ ReadFile site2/src/App.tsx │
│ │
╰─────────────────────────────────────────────────────────────────────────────────────────────────╯
╭─────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✓ Edit site2/src/App.tsx: getWidth: 100, // balanc... =&gt; getWidth: 2,... │
│ │
│ 119 data: p2plinks, │
│ 120 getSourcePosition: (d: Link) =&gt; [parseFloat(d.rx_lng), parseFloat(d.rx_lat)], │
│ 121 getTargetPosition: (d: Link) =&gt; [parseFloat(d.tx_lng), parseFloat(d.tx_lat)], │
│ 122 - getWidth: 100, // balance between being able to see auckland and not │
│ 123 - widthUnits: 'meters', │
│ 122 + getWidth: 2, │
│ 123 widthMinPixels: 1.5, // i get aliasing with 1, but 2 seems too big. │
│ 125 - widthMaxPixels: 100, // big enough to click │
│ 124 getColor: [120, 249, 0], │
│ 125 pickable: true, │
│ 126 onClick: info =&gt; this.onRadioLinkClick(info.object as Link), │
╰─────────────────────────────────────────────────────────────────────────────────────────────────╯
╭─────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✓ ReadFile site2/package.json │
│ │
╰─────────────────────────────────────────────────────────────────────────────────────────────────╯
╭─────────────────────────────────────────────────────────────────────────────────────────────────╮
│ - Shell npm install [in site2] (Installing project dependencies.) │
│ │
╰─────────────────────────────────────────────────────────────────────────────────────────────────╯
ℹ Request cancelled.
&gt; i have the dev server running already and can see it. this is good, the size is now invariant to
zoom. but it is too thick now when we are zoomed out. can we adjust the width to be fewer pixels
when zoomed out?
✦ I can do that. I'll adjust the line width based on the map's zoom level. When zoomed out, the
lines will be thinner, and when zoomed in, they will be thicker.
╭─────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✓ ReadFile site2/src/App.tsx │
│ │
╰─────────────────────────────────────────────────────────────────────────────────────────────────╯
╭─────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✓ Edit site2/src/App.tsx: ... =&gt; ... │
│ │
│ 70 } │
│ 71 │
│ 72 export default class App extends React.Component&lt;IProps, IState&gt; { │
│ 73 + map: google.maps.Map | null = null; │
│ 74 + │
│ 75 constructor(props : IProps) { │
│ 76 super(props); │
│ 77 │
╰─────────────────────────────────────────────────────────────────────────────────────────────────╯
╭─────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✓ Edit site2/src/App.tsx: const map = new google.m... =&gt; this.map = new google.ma… │
│ │
│ 90 componentDidMount() { │
│ 91 const p1 = loadScript(GOOGLE_MAPS_API_URL).then(() =&gt; { │
│ 92 const mapContainer = document.getElementById('map')!; │
│ 93 - const map = new google.maps.Map(mapContainer, { │
│ 93 + this.map = new google.maps.Map(mapContainer, { │
│ 94 center: {lat: -41, lng: 174}, │
│ 95 zoom: 6, │
│ 96 mapTypeId: 'satellite', │
│ 97 }); │
│ 98 + this.map.addListener('zoom_changed', () =&gt; { │
│ 99 + this.updateLayers(); │
│ 100 + }); │
│ 101 const overlay = new GoogleMapsOverlay({ │
│ 102 layers: [new LineLayer({id: 'point2point', data: []})] │
│ 103 }); │
│ 101 - overlay.setMap(map); │
│ 104 + overlay.setMap(this.map); │
│ 105 this.setState({ │
│ 106 overlay: overlay │
│ 107 }); │
╰─────────────────────────────────────────────────────────────────────────────────────────────────╯
╭─────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✓ Edit site2/src/App.tsx: createLineLayer(p2plinks : I... =&gt; createLineLayer(p2plinks : I… │
│ │
│ 119 } │
│ 120 │
│ 121 createLineLayer(p2plinks : Iterable&lt;Link&gt;) { │
│ 122 + const zoom = this.map ? this.map.getZoom()! : 6; │
│ 123 + const width = zoom &lt; 7 ? 1 : 2; │
│ 124 return new LineLayer({ │
│ 125 id: 'point2point', │
│ 126 data: p2plinks, │
│ 127 getSourcePosition: (d: Link) =&gt; [parseFloat(d.rx_lng), parseFloat(d.rx_lat)], │
│ 128 getTargetPosition: (d: Link) =&gt; [parseFloat(d.tx_lng), parseFloat(d.tx_lat)], │
│ 127 - getWidth: 2, │
│ 128 - widthMinPixels: 1.5, // i get aliasing with 1, but 2 seems too big. │
│ 129 + getWidth: width, │
│ 130 + widthMinPixels: 1, │
│ 131 getColor: [120, 249, 0], │
│ 132 pickable: true, │
│ 133 onClick: info =&gt; this.onRadioLinkClick(info.object as Link), │
╰─────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ I've made the changes. The line width will now adjust as you zoom in and out. Let me know if
you'd like any other adjustments.
&gt; up the zoom threshold by 1
╭─────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✓ Edit site2/src/App.tsx: const width = zoom &lt; 7 ? 1... =&gt; const width = zoom &lt; 8 ? 1… │
│ │
│ 120 │
│ 121 createLineLayer(p2plinks : Iterable&lt;Link&gt;) { │
│ 122 const zoom = this.map ? this.map.getZoom()! : 6; │
│ 123 - const width = zoom &lt; 7 ? 1 : 2; │
│ 123 + const width = zoom &lt; 8 ? 1 : 2; │
│ 124 return new LineLayer({ │
│ 125 id: 'point2point', │
│ 126 data: p2plinks, │
╰─────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ I've updated the zoom threshold. The lines will now be thinner when the zoom level is less than
8.
</pre>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment