Add new routing + MapLibre example with elevation profile

Author: Alfiya Tarasenko

README.md

@@ -53,7 +53,7 @@ Uses JavaScript and HTML to call the Geoapify Routing API for route data and the
 - [Geoapify Static Maps API](https://www.geoapify.com/static-maps-api/)
 
 **Demo:**  
-👉 [Printable Route Directions – Live Demo](https://geoapify.github.io/maps-api-code-samples/javascript/printable-route-directions/demo.html)
+👉 [Printable Route Directions – Live Demo](https://geoapify.github.io/maps-api-code-samples/javascript/printable-route-directions/demo_combined.html)
 
 ---
 

javascript/.DS_Store

@@ -4,7 +4,7 @@ This code sample demonstrates how to calculate and display **isochrones** (time-
 
 The application allows users to click on the map, configure travel mode and isoline parameters, and visualize the reachable area as a polygon layer. Each isoline is styled with a distinct color and includes a custom marker to indicate its origin.
 
-![Isoline Leaflet Screenshot](https://github.com/geoapify/maps-api-code-samples/blob/main/javascript/isolines-leaflet/isoline-leaflet-demo-screenshot.jpg?raw=true)
+![Screenshot: Isoline visualization with Leaflet and custom markers](https://github.com/geoapify/maps-api-code-samples/blob/main/javascript/isolines-leaflet/isoline-leaflet-demo-screenshot.jpg?raw=true)
 
 The code calculates isolines with the [Geoapify Isoline API](https://www.geoapify.com/isoline-api/) and renders it dynamically using Leaflet:
 

javascript/isolines-leaflet/README.md

@@ -404,7 +404,7 @@ <h3>Configure Isoline</h3>
 
   <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
   <script type="module">// Configuration
-const GEOAPIFY_API_KEY = '93b8e26606dd485183dcdab30f239f81'; // Replace with your actual API key
+const GEOAPIFY_API_KEY = '27a3c5f9a6754da28283d1995edb9467'; // Replace with your actual API key
 const DEFAULT_CENTER = [40.7128, -74.0060]; // New York coordinates (lat, lng for Leaflet)
 const DEFAULT_ZOOM = 13;
 

javascript/isolines-leaflet/demo_combined.html

@@ -4,7 +4,7 @@ This code sample demonstrates how to calculate and visualize **isochrones** (tim
 
 The application lets users click on the map, select travel mode and isoline type, and view the resulting polygon directly on a dynamic vector map. Each isoline is styled with a distinct color and features a custom marker that reflects the travel mode and value.
 
-![Isoline MapLibre Screenshot](https://github.com/geoapify/maps-api-code-samples/blob/main/javascript/isolines-maplibre/isoline-maplibre-demo-screenshot.jpg?raw=true)
+![Screenshot: Multiple isochrones with custom markers and colors](https://github.com/geoapify/maps-api-code-samples/blob/main/javascript/isolines-maplibre/isoline-maplibre-demo-screenshot.jpg?raw=true)
 
 The application combines Geoapify APIs with MapLibre’s vector rendering engine:
 
@@ -132,9 +132,6 @@ This will create a `demo_combined.html` file in the `isolines-maplibre/` folder,
 
 > The script uses `src/demo.html` as input and outputs a self-contained file with embedded JavaScript and CSS.
 
-
-Вот следующий раздел — **Code Examples** — с ключевыми фрагментами из `isolines-maplibre`:
-
 ## Code Examples
 
 Here are the key code snippets that power the application:

javascript/isolines-maplibre/README.md

@@ -393,7 +393,7 @@ <h3>Configure Isoline</h3>
 
   <script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
   <script type="module">// Configuration
-const GEOAPIFY_API_KEY = '93b8e26606dd485183dcdab30f239f81'; // Replace with your actual API key
+const GEOAPIFY_API_KEY = '27a3c5f9a6754da28283d1995edb9467'; // Replace with your actual API key
 const DEFAULT_CENTER = [-74.0060, 40.7128]; // New York coordinates
 const DEFAULT_ZOOM = 13;
 

javascript/isolines-maplibre/demo_combined.html

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "inline-source": "^8.0.3"
+  }
+}

javascript/package.json

@@ -13,7 +13,7 @@ This combination of dynamic and static content allows users to interact with the
 
 ## Demo
 
-You can see the code sample in action here: [Demo Link](https://geoapify.github.io/maps-api-code-samples/javascript/printable-route-directions/demo.html)
+You can see the code sample in action here: [Demo Link](https://geoapify.github.io/maps-api-code-samples/javascript/printable-route-directions/demo_combined.html)
 
 ## About the Code Sample
 
@@ -312,7 +312,78 @@ The **`generateImageURL()`** function dynamically generates static map previews
      geometries.push(`polygon:${manoeuvreArrow};linewidth:1;linecolor:${encodeURIComponent('#333333')};fillcolor:${encodeURIComponent('#ffffff')};fillopacity:1`);
      ```
 
-### Summary
+## How to Run the Sample
+
+You can run the Route + Elevation demo locally using a static server or directly in your IDE with live preview.
+
+### Option 1: Run with a Local HTTP Server
+
+Serve the contents of the folder using a static server:
+
+1. **Install `http-server`** (if not already installed):
+
+   ```bash
+   npm install -g http-server
+   ```
+
+2. **Start the server** from the folder containing your HTML and JS files:
+
+   ```bash
+   http-server .
+   ```
+
+3. **Open the demo** in your browser:
+
+   ```
+   http://localhost:8080/demo.html
+   ```
+
+Or use `npx` for a one-time server:
+
+```bash
+npx http-server .
+```
+
+### Option 2: Use IDE Live Preview
+
+Many modern IDEs provide live preview for HTML files:
+
+* **Visual Studio Code** — Install the “Live Server” extension, then right-click `src/demo.html` and choose **“Open with Live Server”**.
+* **WebStorm / IntelliJ / PhpStorm** — Right-click `src/demo.html` and choose **“Open in Browser”**.
+* **Brackets** — Click the **lightning bolt icon** or use **File → Live Preview**.
+
+> Opening the file directly via `file://` protocol is not recommended, as some browsers block dynamic requests in local mode.
+
+## How to Build `demo_combined.html`
+
+As an alternative to running the project from multiple files, you can generate a standalone HTML file with all scripts and styles inlined. This is useful for GitHub Pages or distributing the demo as a single file.
+
+### Steps
+
+1. **Navigate to the parent folder**, e.g. `javascript/route-elevation-chart`:
+
+   ```bash
+   cd javascript/route-elevation-chart
+   ```
+
+2. **Install the required build dependency**:
+
+   ```bash
+   npm install inline-source
+   ```
+
+3. **Run the build script** (make sure `combine.js` exists in the folder):
+
+   ```bash
+   node combine.js
+   ```
+
+This will generate a `demo_combined.html` file with all JavaScript and CSS embedded inline.
+
+> The `combine.js` script should take `src/` as input and produce a portable version suitable for publishing or offline usage.
+
+
+## Summary
 
 This code sample showcases how to use the **Geoapify Routing API** and **Geoapify Static Maps API** to generate rich, interactive route instructions and static map visuals. It includes key functionalities like:
 

javascript/printable-route-directions/README.md

@@ -0,0 +1,23 @@
+const inlineSource = require('inline-source').inlineSource;
+const fs = require('fs').promises;
+const path = require('path');
+
+async function inlineResources() {
+    const htmlPath = path.resolve('route-directions/src/demo.html');
+    const outputPath = path.resolve('route-directions/demo_combined.html');
+
+    try {
+        const html = await inlineSource(htmlPath, {
+            compress: false,
+            rootpath: path.resolve('route-directions/src'),
+            ignore: []
+        });
+
+        await fs.writeFile(outputPath, html, 'utf-8');
+        console.log(`✅ Combined HTML saved to ${outputPath}`);
+    } catch (err) {
+        console.error(`❌ Error: ${err.message}`);
+    }
+}
+
+inlineResources();