質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.37%

  • JavaScript

    18784questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

leafletjs choroplethサンプルの改造について02

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 992

oyatsu8

score 70

Leaflet.jsのサンプルで、 
http://leafletjs.com/examples/choropleth/ 
を改造しようとしているのですが、overlayの切り替えをする時に、一緒に
var info = L.control();
var legend = L.control({position: 'bottomright'});
もスタイルを変えて切り替えたいのですが、各overlay(下記のコードの場合、choropleth01,choropleth02)に
info.addTo(choropleth01);
legend.addTo(choropleth01);
としても、なぜか出来ません。
チェックボックスの場合分けをしてしたらなんとか出来るのですが、コードが多くなりすぎるので
どうにかしたいとしています、引数等の使い分けがまだ理解し切れていないのもあるのですが、、

特に知りたい事は例えば下記の用な場合に、

info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
    };
    info.update = function (props) {
        this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
            '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
            : 'Hover over a state');
    };


'<h4>US Population Density</h4>'(タイトル)と、
props.density(プロパティ)を
場合によってかき分けたいときの書き方です。

function (map,title,name,property)
などとして

var title="test-title";
var property = "test-property";

info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML = '<h4>'+ title +'</h4>' +  (props ?
'<b>' + props.name + '</b><br />' + property + ' people / mi<sup>2</sup>'
: 'Hover over a state');
};

アドバイス頂けたら助かります。

その後、下記のようにしてみましたが、contrilパネルのinfo,legendが表示出来ていません。

<!DOCTYPE html>
<html>
<head>

    <title>Choropleth Tutorial - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>


    <style>
        #map {
            width: 600px;
            height: 400px;
        }
    </style>

    <style>#map { width: 800px; height: 500px; }
.info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; }
.legend { text-align: left; line-height: 18px; color: #555; } .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }</style>
</head>
<body>

<div id='map'></div>

<script type="text/javascript" src="us-states.js"></script>

<script type="text/javascript">

    var choropleth01 = new L.LayerGroup();
    var choropleth02 = new L.LayerGroup();

    var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, '
+
            'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        mbUrl ='https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw',
        osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">' + 'OpenStreetMap</a> contributors';

        var grayscale   = L.tileLayer(mbUrl, {id: 'mapbox.light',attribution: mbAttr}),
        streets  = L.tileLayer(mbUrl, {id: 'mapbox.streets',attribution: mbAttr});

        var map = L.map('map', {
            center: [37.8, -96],
            zoom: 4,
            layers: [grayscale, choropleth01]
        });
        var baseLayers = {
            "Grayscale": grayscale,
            "Streets": streets,
        };
        var overlays = {
           "Choropleth01" : choropleth01,
           "Choropleth02" : choropleth02
        };
        L.control.layers(baseLayers, overlays).addTo(map);





    // get color depending on population density value
    function getColor(d) {
        return d > 1000 ? '#800026' :
                d > 500  ? '#BD0026' :
                d > 200  ? '#E31A1C' :
                d > 100  ? '#FC4E2A' :
                d > 50   ? '#FD8D3C' :
                d > 20   ? '#FEB24C' :
                d > 10   ? '#FED976' :
                            '#FFEDA0';
    }

    function style(feature) {
        return {
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '3',
            fillOpacity: 0.7,
            fillColor: getColor(feature.properties.density)
        };
    }


    //info start
    var info = L.control();
    // info.onAdd = function (map) {
    //     this._div = L.DomUtil.create('div', 'info');
    //     this.update();
    //     return this._div;
    // };
    // info.update = function (props) {
    //     this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
    //         '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
    //         : 'Hover over a state');
    // };

    var title="test-title";
    var property = "test-property";

    info.onAdd = function (map) {
            this._div = L.DomUtil.create('div', 'info');
            this.update();
            return this._div;
        };
        info.update = function (props) {
            this._div.innerHTML = '<h4>'+ title +'</h4>' +  (props ?
                '<b>' + props.name + '</b><br />' + property + ' people / mi<sup>2</sup>'
                : 'Hover over a state');
        };


    // info.addTo(map);
    //info end

    //legend start
    var legend = L.control({position: 'bottomright'});

    legend.onAdd = function (map) {

        var div = L.DomUtil.create('div', 'info legend'),
            grades = [0, 10, 20, 50, 100, 200, 500, 1000],
            labels = [],
            from, to;

        for (var i = 0; i < grades.length; i++) {
            from = grades[i];
            to = grades[i + 1];

            labels.push(
                '<i style="background:' + getColor(from + 1) + '"></i> ' +
                from + (to ? '&ndash;' + to : '+'));
        }

        div.innerHTML = labels.join('<br>');
        return div;
    };

    //legend.addTo(map);
    //legend end



    function highlightFeature(e) {
        var layer = e.target;

        layer.setStyle({
            weight: 5,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.4
        });

        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
            layer.bringToFront();
        }

        info.update(layer.feature.properties);
    }

    var geojson;

    function resetHighlight(e) {
        geojson.resetStyle(e.target);
        info.update();
    }

    function zoomToFeature(e) {
        map.fitBounds(e.target.getBounds());
    }

    function onEachFeature(feature, layer) {
        layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,
            click: zoomToFeature
        });
    }

    geojson = L.geoJson(statesData, {
        style: style,
        onEachFeature: onEachFeature
    }).addTo(choropleth01);

    geojson = L.geoJson(statesData, {
        style: style,
        onEachFeature: onEachFeature
    }).addTo(choropleth02);


var overlay_name = "name_test";
var overlay_type = "type_test";

map.on('overlayadd overlayremove baseLayerchange', function(a) {
    overlay_name = a.name;
    overlay_type = a.type;

    console.log("overlay_type :");
    console.log(overlay_type);
});

if(overlay_name==choropleth01 || overlay_type == overlayadd){
    title="title01";
    property = feature.properties.density;

    info.addTo(choropleth01);
    legend.addTo(choropleth01);

}else if(overlay_name==choropleth02 || overlay_type == overlayadd){
    title="title02";
    property = feature.properties.density02;

    info.addTo(choropleth02);
    legend.addTo(choropleth02);
}

console.log("title: ");
console.log(title);

console.log("property: ");
console.log(property);


    map.attributionControl.addAttribution('Population data &copy; <a href="http://census.gov/">US Census Bureau</a>');

</script>



</body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

infoやlegendなどのControlはmapにしか追加できないみたいですね...(詳しくはわかりませんが)
なので、overlayaddイベントとoverlayremoveイベントを使ってmap.addControl()とmap.removeControl()すればいいようです。参考

以下動作確認をしたコードです。

<html>
<head>

</head>
<body>
<form>
<input type='text' name='id'>
</form>
</body>
icchii@ubuntu:~/src/html$ cat l.php
<!DOCTYPE html>
<html>
<head>

    <title>Choropleth Tutorial - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>


    <style>
        #map {
            width: 600px;
            height: 400px;
        }
    </style>

    <style>#map { width: 800px; height: 500px; }
.info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; }
.legend { text-align: left; line-height: 18px; color: #555; } .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }</style>
</head>
<body>

<div id='map'></div>

<script type="text/javascript" src="us-states.js"></script>

<script type="text/javascript">

    var choropleth01 = new L.LayerGroup();
    var choropleth02 = new L.LayerGroup();

    var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, '
+
            'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        mbUrl ='https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw',
        osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">' + 'OpenStreetMap</a> contributors';

        var grayscale   = L.tileLayer(mbUrl, {id: 'mapbox.light',attribution: mbAttr}),
        streets  = L.tileLayer(mbUrl, {id: 'mapbox.streets',attribution: mbAttr});

        var map = L.map('map', {
            center: [37.8, -96],
            zoom: 4,
            layers: [grayscale, choropleth01]
        });
        var baseLayers = {
            "Grayscale": grayscale,
            "Streets": streets,
        };
        var overlays = {
           "Choropleth01" : choropleth01,
           "Choropleth02" : choropleth02
        };
        L.control.layers(baseLayers, overlays).addTo(map);





    // get color depending on population density value
    function getColor(d) {
        return d > 1000 ? '#800026' :
                d > 500  ? '#BD0026' :
                d > 200  ? '#E31A1C' :
                d > 100  ? '#FC4E2A' :
                d > 50   ? '#FD8D3C' :
                d > 20   ? '#FEB24C' :
                d > 10   ? '#FED976' :
                            '#FFEDA0';
    }

    function style(feature) {
        return {
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '3',
            fillOpacity: 0.7,
            fillColor: getColor(feature.properties.density)
        };
    }


    //info start
    var info1 = L.control();
    info1.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
    };
    info1.update = function (props) {
        this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
            '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
            : 'Hover over a state');
    };
    info1.addTo(map);
    var info2 = L.control();
    info2.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
    };
    info2.update = function (props) {
        this._div.innerHTML = '<h4>test02</h4>' +  (props ?
            '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
            : 'Hover over a state');
    };
    var infos = {
        "Choropleth01": info1,
        "Choropleth02": info2
    }
    //info end

    //legend start
    var legend1 = L.control({position: 'bottomright'});

    legend1.onAdd = function (map) {

        var div = L.DomUtil.create('div', 'info legend'),
            grades = [0, 20, 50, 200, 500, 2000],
            labels = [],
            from, to;

        for (var i = 0; i < grades.length; i++) {
            from = grades[i];
            to = grades[i + 1];

            labels.push(
                '<i style="background:' + getColor(from + 1) + '"></i> ' +
                from + (to ? '&ndash;' + to : '+'));
        }

        div.innerHTML = labels.join('<br>');
        return div;
    };

    legend1.addTo(map);

    var legend2 = L.control({position: 'bottomright'});

    legend2.onAdd = function (map) {

        var div = L.DomUtil.create('div', 'info legend'),
            grades = [0, 10, 50, 100, 500, 1000],
            labels = [],
            from, to;

        for (var i = 0; i < grades.length; i++) {
            from = grades[i];
            to = grades[i + 1];

            labels.push(
                '<i style="background:' + getColor(from + 1) + '"></i> ' +
                from + (to ? '&ndash;' + to : '+'));
        }

        div.innerHTML = labels.join('<br>');
        return div;
    };
    var legends = {
        "Choropleth01": legend1,
        "Choropleth02": legend2
    }
    //legend end

    function legendAdd(event) {
        var layername = event.name;
        map.addControl(legends[layername]);
        map.addControl(infos[layername]);
    }
    function legendRemove(event) {
        var layername = event.name;
        map.removeControl(legends[layername]);
        map.removeControl(infos[layername]);
    }
    map.on('overlayadd',legendAdd);
    map.on('overlayremove',legendRemove);

    function highlightFeature(e) {
        var layer = e.target;

        layer.setStyle({
            weight: 5,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.4
        });

        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
            layer.bringToFront();
        }

        info.update(layer.feature.properties);
    }

    var geojson;

    function resetHighlight(e) {
        geojson.resetStyle(e.target);
        info.update();
    }

    function zoomToFeature(e) {
        map.fitBounds(e.target.getBounds());
    }

    function onEachFeature(feature, layer) {
        layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,
            click: zoomToFeature
        });
    }

    geojson = L.geoJson(statesData, {
        style: style,
        onEachFeature: onEachFeature
    }).addTo(choropleth01);

    geojson = L.geoJson(statesData, {
        style: style,
        onEachFeature: onEachFeature
    }).addTo(choropleth02);

    map.attributionControl.addAttribution('Population data &copy; <a href="http://census.gov/">US Census Bureau</a>');

</script>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/02 22:22

    大変ありがとうございます!!

    var legend1 = L.control({position: 'bottomright'});
    や、
    var legends = {
    "Choropleth01": legend1,
    "Choropleth02": legend2
    }
    //legend end

    function legendAdd(event) {
    var layername = event.name;
    map.addControl(legends[layername]);
    map.addControl(infos[layername]);
    }
    function legendRemove(event) {
    var layername = event.name;
    map.removeControl(legends[layername]);
    map.removeControl(infos[layername]);
    }
    map.on('overlayadd',legendAdd);
    map.on('overlayremove',legendRemove);

    の辺の書き方が全く思いつかないというか、分かりませんでした。
    この辺りはJSの基本的な書き方なのでしょうか?

    キャンセル

  • 2017/01/03 02:19

    あと、もう一つ質問なのですが、今の場合は、チェックボックスにチェックしたものが全て複数のレイヤが表示されているときは、上記のinfo,legendに関しては一番下にあるレイヤーだけを表示したい場合にどうしたらいいか試してみたのですが、うまくいきませんでした。。
    var keep_info_name = "test";

    function legendAdd(event) {
    var layername = event.name;
    map.addControl(legends[layername]);
    map.addControl(infos[layername]);


    if(keep_info_name!=layername){
    control.log("info01.hasLayer");

    map.removeControl(info01);
    map.removeControl(legend01);
    }

    keep_info_name = layername;

    }
    function legendRemove(event) {
    var layername = event.name;
    map.removeControl(legends[layername]);
    map.removeControl(infos[layername]);

    if(keep_info_name!=layername){
    control.log("info01.hasLayer");

    map.addControl(info01);
    map.addControl(legend01);
    }
    }
    map.on('overlayadd',legendAdd);
    map.on('overlayremove',legendRemove);

    キャンセル

  • 2017/01/03 02:44

    いつもありがとうございます、また別スレッドで質問させて頂きます!

    キャンセル

  • 2017/01/03 07:11 編集

    > この辺りはJSの基本的な書き方なのでしょうか?

    文法はもちろんJSですが、overlayaddやoverlayremoveというイベントはleafletのものです。
    オーバーレイが追加されたり、削除されたときに指定の関数が実行されるというものです。

    > あと、もう一つ質問なのですが、今の場合は、チェックボックスにチェックしたものが全て複数のレイヤが表示されているときは、上記のinfo,legendに関しては一番下にあるレイヤーだけを表示したい場合にどうしたらいいか試してみたのですが、うまくいきませんでした。。

    そういう機能は提供していないと思うので、ある程度leafletに詳しい人じゃないと難しいかもしれませんね

    キャンセル

  • 2017/01/03 10:40

    色々答えて頂き、大変ありがとうございます!
    leafletの仕様をまだわかりきっていないので、ちゃんと読もうと思います。
    とても助かりました!!

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    18784questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。