Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions dist/samples/map-drawing-terradraw/app/.eslintsrc.json
Original file line number Diff line number Diff line change
@@ -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
}
}
40 changes: 40 additions & 0 deletions dist/samples/map-drawing-terradraw/app/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
# Basic Terra Draw with Google Maps API Sample

This sample demonstrates a basic implementation of Terra Draw with the Google Maps JavaScript API. It includes various drawing modes such as Point, LineString, Polygon, Rectangle, Circle, and Freehand.

![Roadmap View](./screenshots/draw-roadmap.png)
![Satellite View](./screenshots/draw-satellite.png)

# 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

First `cd` to the folder for the sample to run, then:

`$npm start`

### Build an individual example

From `samples/`:

`$npm run build --workspace=sample-name/`

### Build all of the examples.

From `samples/`:
`$npm run build-all`

## Feedback

For feedback related to this sample, please open a new issue on
[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).

41 changes: 41 additions & 0 deletions dist/samples/map-drawing-terradraw/app/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<!--
@license
Copyright 2025 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<!--[START maps_map_drawing_terradraw]-->
<html>
<head>
<title>Terra Draw with Google Maps API Sample</title>
<link rel="stylesheet" href="./style.css">
<!-- Terra Draw CSS (if any needed, add here) -->
</head>
<body>
<!-- Map Container -->
<div id="map"></div>

<!-- Top-right mode selection UI -->
<div id="mode-ui">
<button id="point-mode" class="mode-button" title="Point"><img src="./img/point.svg" alt="Point" draggable="false"></button>
<button id="linestring-mode" class="mode-button" title="Linestring"><img src="./img/polyline.svg" alt="Linestring" draggable="false"></button>
<button id="polygon-mode" class="mode-button active" title="Polygon"><img src="./img/polygon.png" alt="Polygon" draggable="false"></button>
<button id="rectangle-mode" class="mode-button" title="Rectangle"><img src="./img/rectangle.svg" alt="Rectangle" draggable="false"></button>
<button id="circle-mode" class="mode-button" title="Circle"><img src="./img/circle.svg" alt="Circle" draggable="false"></button>
<button id="freehand-mode" class="mode-button" title="Freehand"><img src="./img/freehand.svg" alt="Freehand" draggable="false"></button>
<button id="select-mode" class="mode-button" title="Select"><img src="./img/select.svg" alt="Select" draggable="false"></button>
<button id="resize-button" class="mode-button" title="Resize"><img src="./img/resize.svg" alt="Resize" draggable="false"></button>
<button id="clear-mode" class="mode-button" title="Clear"><img src="./img/delete.svg" alt="Clear" draggable="false"></button>
<button id="delete-selected-button" class="mode-button" title="Clear last or Selected"><img src="./img/delete-selected.svg" alt="Delete Selected" draggable="false"></button>
<button id="undo-button" class="mode-button" title="Undo"><img src="./img/undo.svg" alt="Undo" draggable="false"></button>
<button id="redo-button" class="mode-button" title="Redo"><img src="./img/redo.svg" alt="Redo" draggable="false"></button>
<button id="export-button" class="mode-button" title="Export"><img src="./img/download.svg" alt="Export" draggable="false"></button>
<button id="upload-button" class="mode-button" title="Upload"><img src="./img/upload.svg" alt="Upload" draggable="false"></button>
<input type="file" id="upload-input" style="display: none;" accept=".geojson,.json">
</div>

<script type="module" src="./index.ts"></script>
<!-- Google Maps API is loaded by the Loader in index.ts -->
</body>
</html>
<!--[END maps_map_drawing_terradraw]-->
Loading
Loading