directions about setting up .env

Author: dimfeld

.env.example

@@ -0,0 +1,2 @@
+# Add a key here for the 3d buildings page to work
+PUBLIC_MAPTILER_KEY=

README.md

@@ -3,3 +3,11 @@
 Svelte wrapper for the [maplibre](https://maplibre.org/projects/maplibre-gl-js/) mapping library.
 
 This library is functional, but I'm still experimenting with extra features to make advanced functionality easier to use. It also needs proper documentation. In the meantime, the [demo site](https://svelte-maplibre.vercel.app) includes code for all the examples, and is a good place to start.
+
+## Developing
+
+You should create a `.env` file to configure the environment. See the `.env.example` file for the
+necessary settings.
+
+Currently the only environment variable is a MapTiler API key, required for the 3D Buildings example.
+If you don't have one, you can set this to a blank value to use the other examples.

src/routes/examples/3d_buildings/+page.svelte

@@ -1,11 +1,18 @@
 <script lang="ts">
   import Map from '$lib/Map.svelte';
-  import { mapClasses, streetsStyle } from '../styles.js';
+  import { mapClasses, streetsStyle, hasMaptilerKey } from '../styles.js';
   import code from './+page.svelte?raw';
   import CodeSample from '$site/CodeSample.svelte';
   import FillExtrusionLayer from '$lib/FillExtrusionLayer.svelte';
 </script>
 
+{#if !hasMaptilerKey}
+  <h2 class="text-red-500">
+    Please set the PUBLIC_MAPTILER_KEY environment variable to your MapTiler API key to run this
+    example.
+  </h2>
+{/if}
+
 <p>
   This example uses a FillExtrusionLayer to show a 3D view of buildings, with shorter buildings in
   green and taller buildings in red.<br /> Hold down Ctrl and drag the mouse to rotate on a computer.

src/routes/examples/styles.ts

@@ -1,5 +1,6 @@
 import { PUBLIC_MAPTILER_KEY } from '$env/static/public';
 
+export const hasMaptilerKey = PUBLIC_MAPTILER_KEY && PUBLIC_MAPTILER_KEY !== 'key';
 export const streetsStyle = `https://api.maptiler.com/maps/streets-v2/style.json?key=${PUBLIC_MAPTILER_KEY}`;
 
 export const mapClasses =