Minor comments and test layout improvement for map (#634)

Author: stevebriskin

packages/blocks/README.md

@@ -32,6 +32,11 @@ You can now use the components in your app:
 
 [sveltekit]: https://kit.svelte.dev/
 
+## Environment Variables
+
+Google maps requires an API key `VITE_GOOGLE_MAPS_API_KEY` to be defined in .env
+We support Google Maps for rendering maps. If no API key is provided, we fall back to OpenStreet even if Google Maps is selected
+
 ## Playground
 
 The playground can be used during development but is not used outside of the package.

packages/blocks/src/lib/maplibre/style.ts

@@ -13,6 +13,7 @@ const getGoogleMapsStyle = (
     [MapProviders.googleMaps]: {
       type: 'raster',
       tiles: [
+        // The apiKey is not actually needed here for some reason. TODO: Update to use the google maps tile api ASAP.
         `https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${apiKey}`,
       ],
       tileSize,
@@ -22,6 +23,7 @@ const getGoogleMapsStyle = (
     satellite: {
       type: 'raster',
       tiles: [
+        // The apiKey is not actually needed here for some reason. TODO: Update to use the google maps tile api ASAP.
         `https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}&key=${apiKey}`,
       ],
       tileSize: 256,

packages/blocks/src/routes/+page.svelte

@@ -64,11 +64,12 @@ const path = () =>
         mapProvider="google-maps"
         mapProviderKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY}
       >
-        <NavigationControls />
-        <SatelliteControls />
+        <div class="absolute right-12 top-2.5 z-10 flex items-center gap-2">
+          <NavigationControls />
+          <SatelliteControls />
+        </div>
       </MapLibre>
     </div>
   </div>
-
   <FollowingMarker />
 </div>