Locatie

Component preview

<style>
    .dso-map-example {
        background-image: url("../../dummy/images/map-lved125.png");
        background-size: cover;
        height: 400px;
        margin: 32px 0;
        width: 100%;
    }
</style>
<main>
    <div class="dso-app-heading">

        <h1>Aanvraag Laan van Eik en Duinen 125, Den Haag</h1>

        <h2 class="dso-steps-indicator">
            2. Locatie

            <span class="dso-step">
                Stap 2/7
            </span>

        </h2>

    </div>

    <form>
        <div class="row">
            <div class="col-md-9">
                <h3>Coordinaten</h3>
            </div>
            <div class="col-md-3 text-right">
                <div class="dso-dropdown-menu">
                    <button type="button" aria-expanded="false" class="dso-tertiary"><span>Meer zoekopties</span></button>

                </div>

            </div>
        </div>
        <div class="dso-justify-form-groups">

            <div class="form-group dso-select">
                <div class="dso-label-container">
                    <label for="type" class="control-label">
                        Type
                    </label>

                </div>
                <div class="dso-field-container">
                    <select id="type" class="form-control">

                        <option value="rd">RD</option>

                        <option value="wgs84" selected>WGS84</option>

                    </select>

                </div>
            </div>

            <div class="form-group dso-input">
                <div class="dso-label-container">
                    <label for="" class="control-label">
                        Lattitude
                    </label>

                </div>
                <div class="dso-field-container">

                    <input type="" id="" class="form-control" value="52.07066496">

                </div>
            </div>

            <div class="form-group dso-input">
                <div class="dso-label-container">
                    <label for="" class="control-label">
                        Longitude
                    </label>

                </div>
                <div class="dso-field-container">

                    <input type="" id="" class="form-control" value="4.26389251">

                </div>
            </div>

            <div class="dso-form-buttons">
                <button type="button" class="dso-secondary btn-sm"><span>Zoeken</span></button>

            </div>
        </div>
        <div class="dso-map-example"></div>
        <div class="dso-form-buttons">
            <div class="dso-aside">
                <button type="button" class="dso-tertiary">
                    <dso-icon icon="chevron-left"></dso-icon><span>Vorige stap</span>
                </button>

            </div>
            <button type="submit" class="dso-primary"><span>Volgende stap</span>
                <dso-icon icon="chevron-right"></dso-icon>
            </button>

        </div>
    </form>
</main>

<style>
  .dso-map-example {
    background-image: url("{{ '/dummy/images/map-lved125.png' | path }}");
    background-size: cover;
    height: 400px;
    margin: 32px 0;
    width: 100%;
  }
</style>
<main>
  {% render '@application-heading', appheading %}
  <form>
    <div class="row">
      <div class="col-md-9">
        <h3>Coordinaten</h3>
      </div>
      <div class="col-md-3 text-right">
        {% render '@dropdown-menu-css', dropdownButton %}
      </div>
    </div>
    <div class="dso-justify-form-groups">
      {% render '@group-select', typeSelect %}
      {% render '@group-input', inputLatt %}
      {% render '@group-input', inputLong %}
      <div class="dso-form-buttons">
        {% render '@button', {label:'Zoeken', type:'button', modifier :'dso-secondary btn-sm'} %}
      </div>
    </div>
    <div class="dso-map-example"></div>
    <div class="dso-form-buttons">
      <div class="dso-aside">
        {% render '@button', {type: 'button', modifier: 'dso-tertiary', label: 'Vorige stap', icon: 'chevron-left'} %}
      </div>
      {% render '@button', {type: 'submit', modifier: 'dso-primary', label: 'Volgende stap', iconAfter: 'chevron-right'} %}
    </div>
  </form>
</main>

appheading:
  title: Aanvraag Laan van Eik en Duinen 125, Den Haag
  subtitle: 2. Locatie
  step: Stap 2/7
dropdownButton:
  modifier: dso-tertiary
  label: Meer zoekopties
  items:
    - label: Adres
    - label: Postcode en huisnummer
    - label: Kadastraal nummer
    - label: Coordinaten
    - Label: Teken een gebied op de kaart
typeSelect:
  id: type
  inputType: select
  label: Type
  options:
    - value: rd
      label: RD
    - value: wgs84
      label: WGS84
      selected: true
inputLatt:
  value: 52.07066496
  icon: true
  label: Lattitude
  hideSearchButton: true
inputLong:
  value: 4.26389251
  icon: true
  label: Longitude