htmlmapzen

How to customize Mapzen search control using my own html/css?

How can I customize an L.Mapzen.geocoder to take my own HTML/CSS styled search box that is positioned at the center (just like the one in Mapzen Demo)?

<div id="form-wrapper">
    <form class="form-horizontal">
      <div class="col-lg-offset-3 col-lg-6">
        <div class="input-group">
          <input type="text" class="form-control input-sm">
                  <span class="input-group-btn">
                    <button class="btn btn-default btn-sm" type="submit"><span class="glyphicon glyphicon-search"></span></button>
                  </span>
          </input>
        </div>
      </div>
    </form>
</div>

I wanted to let it stay at the center as the map adjusts to the location as its background.

Its basic use is to let the users check if the location they chose is correct and after another button click their input will be redirected to another python django view.

Solution

  • Here is how the Mapzen demo was created.

    1. set the geocoder expanded option to true so that it is always expanded (otherwise, there will just be a search icon floating in the middle of the page)

    2. add this CSS

      .leaflet-top {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }

    3. adjust .leaflet-pelias-control to your desired width and height in CSS