リーフレットの凡例が正しく表示されない

Question

リーフレットの地図上に凡例を表示することを些細なものと思っているものを表示しようとしています。しかし、私は現在、無駄に動作するようにしようと約6時間を費やしました。私がしたいのは、大部分が不透明な箱を小さな正方形で表示し、次に各正方形の隣にテキストラベルを付けてその色の意味を与えます。

私が試しても、テキストを表示するだけでどんな種類の色でも表示することはできませんし、伝説をグッドな灰色のボックスに表示することもできませんすべてのWebサンプルが表示されます。ここではJavascriptのコードは次のとおりです。

function getColor(s) { 
     if (s === 'Last update <2 hours ago') 
      return 'yellow'; 
     else if (s === 'Last update >24 hours ago') 
      return 'blue'; 
     else 
      return 'black'; 
    } 
    var legend = L.control({position: 'topright'}); 


    legend.onAdd = function (map) { 
     var legendDiv = L.DomUtil.create('div', 'info legend'), 
      checkins = ['Last update > 30 days ago', 'Last update >24 hours ago', 'Last update <2 hours ago'], 
      title= ['<strong>Marker Color Codes</strong>'], 
      labels = []; 
     for (var i=0; i < checkins.length; i++) { 
      labels.push( 
       '<i class="square" style="background:' + getColor(checkins[i]) + '"></i>'+ checkins[i] + '') 
     } 
     legendDiv.innerHTML = labels.join('<br>'); 


     return legendDiv; 
    } 

    legend.addTo(map); 

そして、ここでは、CSSです：

.legend { 
     border: 5px solid black; 
     font-weight: bold; 
     color: blue; 
     text-align: left; 
     width: 250px; 
     height: 240px; 
     line-height: 18px; 
     background: white; 
     opacity: 1; 
    } 
    .legend i { 
      width: 50px; 
      height: 50px; 
      float: left; 
      margin-right: 8px; 
      opacity: 0.7; 
    } 
    .legend square { 
      border-radius: 50%; 
      width: 50px; 
      height: 50px; 
      margin-top: 8px; 
    } 

私は境界線と伝説のサイズのすべての種類でプレーしてきたので、幅にあまりを集中していません高さのパラメータ。私は違いを生むためにどんなサイズも得られません。私が見てみたいと思い何

が小さな四角で（色は重要ではない）すべての例は、背景がグレーの四角い箱をSHOW-だけです：ここで表示される内容のスクリーンショットですその色の重要性を説明するテキスト文字列が続きます。

私はここで間違っていますか？

ありがとうございました。

Answer 1

何らかの理由でCSSルールが適用されないようです。

彼らが正しく追加されたら

、あなたのlegendディスプレイは何であなたが設定したルール：https://plnkr.co/edit/qAjh0duPRI4US6Q4DSCN?p=preview