自分のhtml/cssを使ってMapzen検索コントロールをカスタマイズするには？

Question

L.Mapzen.geocoderは、（Mapzen Demoのような）私の独自のHTML/CSSスタイルの検索ボックスを中央に配置するようにカスタマイズできますか？

<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> 

マップをバックグラウンドとして位置に合わせて中央に置いておきたいと思っていました。

基本的な使い方は、ユーザーが選択した場所が正しいかどうかを確認し、別のボタンをクリックした後に入力が別のpython djangoビューにリダイレクトされるようにすることです。

Answer 1

Mapzenのデモが作成された方法は次のとおりです。それは常に展開されるように

1. セットをtrueにジオコーダexpandedオプションは、このCSSを追加

2. （そうでない場合は、単にページの真ん中に浮かぶ検索アイコンがあるでしょう）

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

3. はCSSでご希望の幅と高さに.leaflet-pelias-controlを調整