Google Maps Solar API JavaScript Sample

For a production-ready version, you must first build the application and then start it. This process optimizes the code and removes development-only tools.

npm run build
npm run start

The application uses Vite to manage environment variables. To authenticate your requests, create or update a .env file in the project root and add your API key to the VITE_GOOGLE_MAPS_API_KEY variable.

VITE_GOOGLE_MAPS_API_KEY="YOUR_API_KEY"

To start the application with hot-reloading enabled (the app will automatically reload when you change files), use the dev script.

npm install
npm run dev

Before running the application, ensure you have the following:

1. Google Maps Platform Account: Sign up for a project.
2. Enabled APIs: Your project must have both the Maps JavaScript API and the Solar API enabled.
3. API Key: An API key associated with the project mentioned above.
4. Local Environment: A current version of Node.js and NPM installed.

You can deploy this application to Google Cloud Run directly from the source. This command uploads your source, builds it using Cloud Build, and starts the service using npm run start.

# Choose the Cloud location to deploy the app.
export LOCATION="us-central1"

# Build and deploy the app from source.
gcloud run deploy "solar-potential" \
  --source="." \
  --region="$LOCATION" \
  --allow-unauthenticated

Use the following commands to maintain code quality:

• Type Checking: npm run check performs type checking. Use npm run check:watch to run it continuously during development.
• Linting: npm run lint checks for styling and formatting issues.
• Formatting: npm run format automatically fixes linting issues by formatting the codebase.

Use renderPalette to visualize single-value GeoTiff data (like solar potential or temperature) by mapping values to a color gradient. This function normalizes the data within a specified range and applies a color palette to create an RGB image.

import { renderPalette } from './routes/visualize';

const canvas = renderPalette({
  data: singleBandGeoTiff,
  mask: optionalMaskGeoTiff,
  colors: ['000000', 'ffffff'], // Hex color palette
  min: 0,                         // Minimum data value
  max: 100,                       // Maximum data value
  index: 0                        // The raster index to use
});

Use findClosestBuilding to retrieve detailed solar potential information for the building closest to a specific location. This includes solar panel configurations, roof segment statistics, and estimated energy production.

Parameters:

• location: A google.maps.LatLng object representing the point of interest.
• apiKey: Your Google Cloud API key.

Returns: A Promise that resolves to a BuildingInsightsResponse object containing solarPotential data.

import { findClosestBuilding } from './src/routes/solar';

const location = { lat: () => 37.7749, lng: () => -122.4194 }; // Example google.maps.LatLng
const apiKey = 'YOUR_API_KEY';

try {
  const insights = await findClosestBuilding(location, apiKey);
  console.log('Solar Potential:', insights.solarPotential);
} catch (error) {
  console.error('Failed to fetch building insights:', error);
}

Mathematical utilities for data processing:

• normalize(x, max, min): Scales a value x to a range between 0 and 1 based on the provided min and max.
• lerp(x, y, t): Performs linear interpolation between x and y based on factor t (0 to 1).
• clamp(x, min, max): Constrains a value x to stay within the [min, max] range.

Utility functions for color format conversion:

• colorToRGB(color: string): Converts a hex string (e.g., '0099FF' or '#0099FF') to an { r, g, b } object.
• rgbToColor({ r, g, b }): Converts an { r, g, b } object back to a hex string (e.g., '#0099ff').

import { colorToRGB, rgbToColor } from './routes/visualize';

const rgb = colorToRGB('#ff0000'); // { r: 255, g: 0, b: 0 }
const hex = rgbToColor({ r: 255, g: 0, b: 0 }); // '#ff0000'

The createPalette function generates a 256-color lookup table by interpolating between a provided list of hex colors. This ensures smooth color transitions when rendering data via renderPalette.

import { createPalette } from './routes/visualize';

// Returns an array of 256 {r, g, b} objects
const palette = createPalette(['ff0000', '00ff00', '0000ff']);