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




how can customize l.mapzen.geocoder take own html/css styled search box positioned @ center (just 1 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 let stay @ center map adjusts location background.

its basic use let users check if location chose correct , after button click input redirected python django view.

here how mapzen demo created.

  1. set geocoder expanded option true expanded (otherwise, there search icon floating in middle of page)

  2. add css

    .leaflet-top {    width: 100%;    height: 100%;    display: flex;    align-items: center;    justify-content: center;  } 
  3. adjust .leaflet-pelias-control desired width , height in css





wiki

Comments

Popular posts from this blog

Asterisk AGI Python Script to Dialplan does not work -

python - Read npy file directly from S3 StreamingBody -

kotlin - Out-projected type in generic interface prohibits the use of metod with generic parameter -