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.
set geocoder
expanded
option true expanded (otherwise, there search icon floating in middle of page)add css
.leaflet-top { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
adjust
.leaflet-pelias-control
desired width , height in css
wiki
Comments
Post a Comment