---
layout: default
title: Location Search
type: location
---
<div class="container mb-15">
    <div class="progress" style="margin-bottom:5px">
        <div id="progressBar" class="progress-bar" role="progressbar" style="" aria-valuenow="0" aria-valuemin="0"
             aria-valuemax="100">
            <div class="label"></div>
        </div>
    </div>
    <div id="progressText" style="width: 100%;text-align: center;">Idle</div>
</div>
<div class="container mb-15">
    <h2>Location Search</h2>
    <p>
        Search YouTube by location for geotagged videos.
        Find videos near you or anywhere in the world.
        Read the <a target="_blank" href="https://github.com/mattwright324/youtube-geofind/wiki">wiki</a> to learn more about this app.
    </p>
    <div class="row g-3">
        <div class="col-md-8">
            <label for="address" class="form-label"><strong>Location</strong></label>
            <div class="input-group">
                <input type="text" class="form-control" id="address" aria-describedby="addressHelp"
                       placeholder="Search Mapbox" autocomplete="off">
                <button id="searchAddress" class="btn btn-secondary disabled" title="Search address">
                    <span><i class="bi bi-search"></i></span>
                    <span class="countdown"></span>
                </button>
                <button id="geolocate" class="btn btn-secondary disabled" title="Find me!">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                        <path d="M0 0h24v24H0z" fill="none"/>
                        <path fill="white"
                              d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>
                    </svg>
                    <span class="countdown"></span>
                </button>
                <button id="randomLocation" class="btn btn-secondary disabled" title="Random location">
                    <span><img src="./img/random-location.png" width="24" height="24"></span>
                    <span class="countdown"></span>
                </button>
            </div>

            <div id="addressHelp" class="form-text">
                Search with a location name (hit enter). Also drag and drop point on map, right click in map, or use
                buttons.
            </div>
        </div>
        <div class="col-md-4">
            <label for="radius" class="form-label"><strong>Radius</strong></label>
            <input id="radius" data-suffix="km" value="25" min="1" max="1000" step="5" type="number"
                   aria-describedby="radiusHelp" autocomplete="off">
            <div id="radiusHelp" class="form-text">Results may be close yet outside the radius. Max 1000km.</div>
        </div>

        <div class="col-12">
            <label for="keywords" class="form-label">Keywords</label>
            <div class="input-group">
                <input type="text" class="form-control" id="keywords" placeholder="Search" aria-describedby="keywordsHelp" autocomplete="off">
                <button class="btn btn-secondary" title="Random topic" id="randomTopic">
                    <i class="bi bi-shuffle"></i>
                </button>
            </div>
            <div id="keywordsHelp" class="form-text">
                As if searching in YouTube, see <a target="_blank" href="https://github.com/mattwright324/youtube-geofind/wiki/YouTube-Keyword-Operators">keywords operators</a>.
                Best used with a large radius or population-dense locations.
            </div>
        </div>
        {% include form_controls.html %}
    </div>
</div>