2016-05-21 21 views
1

ポップアップ付きCircleMarkersを示すチラシマップを作成しました。彼らは、彼らが立っている家が建てられたときに色付けされています。 (申し訳ありませんが、私の英語は恐ろしいです)。ここに私のjsfiddleへのリンクです:https://jsfiddle.net/marielouisejournocode/p2pL3r49/2/ あなたが見ることができるように値の範囲にカラー(リーフレットサークルマーカー)を割り当てます

var colors = { 
     1966: 'green', 
     1960: 'yellow', 
     1952: 'orange', 
     1951: 'red' 
    }; 

を次のように、私はjsの色を設定する私の「ネイティブ」のプログラミング言語ではありません。 Rでは、c(1950, 1960)のような数字の範囲に色を割り当てることができます。これは1950年から1960年までのすべての数字になりますが、割り当ては引き続き機能します。私はjsでこの範囲を取得する方法を知らないし、私はそれの中の数字の範囲に色を割り当てることができるか分からない。私はすべての利用可能な建設年を視覚化したい(私は第二次世界大戦の終わりからドルトムントがかなり破壊されたと思います)、毎年1〜6かそれほど異なる色を割り当てる必要がなければ素晴らしいでしょう。

答えて

2

私が正しく理解していれば、あなたのフィーチャ(住宅)の年のプロパティに応じてCircle Markerに特定の色を割り当てることができますが、簡単にするため(1年に1つではなく、2つの色が必要です)。

この場合、年を検査して適切な色を決定する方法はたくさんあります。例としては、(セクション "いくつかの色を追加する" を参照)

function getColor(d) { 
    return d >= 1966 ? 'green' : // Means: if (d >= 1966) return 'green' else… 
    d >= 1960 ? 'black' : // if (d >= 1960) return 'black' else etc… 
    d >= 1952 ? 'red' : 
    d >= 1940 ? 'orange' : // Note that numbers must be in descending order 
    'grey'; 
} 

// […] 

L.circleMarker([place.lon, place.lat], { 
    color: getColor(place.constructdate), // you can call the getColor function 
    fillColor: getColor(place.constructdate), 
    fillOpacity: 0.5 
}) 

更新Leaflet Chloropleth map tutorialにJSFiddle次のようになります。https://jsfiddle.net/p2pL3r49/3/

2

あなたはこれを行うための関数を書くことができます。

function getRange(start, end) { 
    var range = []; 

    for (var i = start; i < end; i++) { 
    range.push(i); 
    } 

    return range; 
} 

var years = getRange(1950, 1961); // [1950,..., 1960] 

あなたはlodashのようなユーティリティライブラリを使用するために喜んでいる場合は、1行でこれを行うことができますについては

var years = _.range(1950, 1961); // [1950,...,1960] 

色、補間する方法はたくさんあります。良い答えがありますhere

関連する問題