## Map

### Map Canvas

The map canvas takes up the full viewport. For demo purposes, the container is constrained.

Map Canvas Placeholder

            <div
                id="map"
                style="
                    width: 100%;
                    height: 400px;
                    background: #e0e0e0;
                    position: relative;
                "
            >
                <div
                    class="map_canvas"
                    style="width: 100%; height: 100%; position: relative"
                >
                    <!-- Map tiles would be rendered here by a mapping library -->
                    <div
                        style="
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            height: 100%;
                            color: #666;
                        "
                    >
                        Map Canvas Placeholder
                    </div>
                </div>
            </div>

### Layer Controls

### Base Layers

Streets Satellite Terrain

            <div
                class="layer_control_base"
                style="padding: 16px; background: #f5f5f5; border-radius: 8px"
            >
                <h3>Base Layers</h3>
                <label>
                    <span>
                        <input
                            type="radio"
                            name="base-layer"
                            value="streets"
                            checked
                        />
                        <span>Streets</span>
                    </span>
                </label>
                <label>
                    <span>
                        <input type="radio" name="base-layer" value="satellite" />
                        <span>Satellite</span>
                    </span>
                </label>
                <label>
                    <span>
                        <input type="radio" name="base-layer" value="terrain" />
                        <span>Terrain</span>
                    </span>
                </label>
            </div>

### Overlay Controls

### Overlays

Traffic Transit Bike Lanes

            <div
                class="layer_control_overlay"
                style="padding: 16px; background: #f5f5f5; border-radius: 8px"
            >
                <h3>Overlays</h3>
                <label>
                    <span>
                        <input type="checkbox" name="overlay" value="traffic" />
                        <span>Traffic</span>
                    </span>
                </label>
                <label>
                    <span>
                        <input type="checkbox" name="overlay" value="transit" />
                        <span>Transit</span>
                    </span>
                </label>
                <label>
                    <span>
                        <input type="checkbox" name="overlay" value="bike" />
                        <span>Bike Lanes</span>
                    </span>
                </label>
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!