[user interface]: Use .png as the XYZ Tile URL format hint for rast…

…er & raster-dem tiles (#952)

## Launch Checklist

 - [x] Briefly describe the changes in this PR.

* When adding a new Raster or Raster-dem tile source, use `.png` as the
hint for the tile URL hint prompt.
* Currently, the user is prompted for a Vector tile source (e.g.,
`.pbf`)
* If a new Mapnik user already has their XYZ raster Tile URL, then they
may already know how to modify this text field.
* This change may be useful for new users and is intended for them.
* `.png` is a start. It could be `.webp` or `.jpg`, or `.jpg`, or in the
case of Esri there is no extension for the images.
* See [RobLabs.com/xyz](https://RobLabs.com/xyz) for sample XYZ raster
tile URLs

---

- [x] Include before/after visuals or gifs if this PR includes visual
changes.
* Steps to reproduce
* See [RobLabs.com/maputnik](https://roblabs.com/maputnik) for a working
version of this fix for Maputnik
* On top menu bar: *Data Sources* > In the *Add New Source* section >
Change *Source Type* to "Raster (Tile URLs)"
* There you will see prompt hint for a raster Tile instead of vector
tile `.pbf`.
* See the release notes for the National Park Service prototype release
for [Maputnik for National Park Service Park
Tiles](https://github.com/roblabs/maputnik/releases/tag/v2.1.1-nationalparkservice)
for more screen shots.

#### Before

`.pbf` may be confusing for those adding a Raster


![image](https://github.com/user-attachments/assets/f3869f2e-b2d6-4339-807d-7c14ddfecd29)

#### After


![image](https://github.com/user-attachments/assets/2bb06206-23c2-467c-981d-f939a9525d3d)

---

 - [x] Write tests for all new functionality.
 * See screen shots for functionality
 - ~~[] Add an entry to `CHANGELOG.md` under the `## main` section.~~
 *Not really a feature, so I will leave this out*
 - [ ] ~~Link to related issues.~~

src/components/ModalSources.tsx

@@ -155,7 +155,7 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
     }
     case 'tile_raster': return {
       type: 'raster',
-      tiles: (source as RasterSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
+      tiles: (source as RasterSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.png`],
       minzoom: (source as RasterSourceSpecification).minzoom || 0,
       maxzoom: (source as RasterSourceSpecification).maxzoom || 14,
       scheme: (source as RasterSourceSpecification).scheme || 'xyz',
@@ -167,7 +167,7 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
     }
     case 'tilexyz_raster-dem': return {
       type: 'raster-dem',
-      tiles: (source as RasterDEMSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
+      tiles: (source as RasterDEMSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.png`],
       minzoom: (source as RasterDEMSourceSpecification).minzoom || 0,
       maxzoom: (source as RasterDEMSourceSpecification).maxzoom || 14,
       tileSize: (source as RasterDEMSourceSpecification).tileSize || 512