Simon Willison asked GPT-6 Astra to generate 5K and 10K running routes starting from his address in El Granada, California, using OpenStreetMap data. The model returned the requested maps within 27 minutes, providing both an embedded visualisation and downloadable GPX and GeoJSON files.
The output
The 5K route produced is a loop around El Granada harbor. It measures 5.1 km and follows Carmel Avenue, Paloma Avenue, San Carlos Avenue, Avenue Granada, Capistrano Road, Francisco Street, and the Coastal Trail. The map includes a visual line overlaid on the street grid.
I used Nominatim to locate the address and Overpass to download local OpenStreetMap roads and trails, then calculated the loops locally.
Willison noted that the specific code executed and the precise steps taken were not visible in the ChatGPT interface. He describes this lack of transparency as an anti-feature.
How the map was built
Displaying the map relied on the visualise skill, which created a file named /workspace/el-granada-5k-share.html to embed in the UI. The HTML structure includes a header for the route name and distance, followed by the map container.
<div id="eg-share-loop">
<div class="viz-row"><h3>El Granada harbor loop</h3><span class="text-small">5.1 km</span></div>
<div id="eg-share-stage"></div>
<div class="text-small text-muted">Map data © <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap contributors</a></div>
<style>
#eg-share-loop { width:100%; }
#eg-share-loop #eg-share-stage { width:100%; margin:8px 0; }
#eg-share-loop .eg-share-map { display:block; width:100%; touch-action:none; }
#eg-share-loop .eg-share-map text { fill:var(--foreground); font-size:12px; font-weight:400; }
#eg-share-loop .eg-share-label { paint-order:stroke; stroke:var(--background); stroke-width:3px; stroke-linejoin:round; }
</style>
<script type="application/json" id="eg-share-data">{"route":{"type":"LineString","coordinates":[[-122.467425,37.4997753] ...</script>
<script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script>
<script>
(() => {
const root=document.getElementById('eg-share-loop');The <script type="application/json"> element holds the full geometry required to render the route and map using D3. This library loads from an allow-listed CDN, specifically cdn.jsdelivr.net, as detailed in the visualise skill documentation. The Content Security Policy restricts external resources to a specific set of origins, including cdnjs.cloudflare.com, esm.sh, unpkg.com, fonts.googleapis.com, fonts.gstatic.com, and fonts.bunny.net. Other origins are blocked and fail silently.
