質問編集履歴

更新

2017/01/02 05:45

投稿

oyatsu8

スコア97

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -92,19 +92,19 @@
 アドバイス頂けたら助かります。
+その後、下記のようにしてみましたが、contrilパネルのinfo,legendが表示出来ていません。
-```jaavscript,leaflet
+```javascript
 <!DOCTYPE html>
@@ -292,160 +292,192 @@
     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._div = L.DomUtil.create('div', 'info');
-        this.update();
+            this.update();
-        return this._div;
+            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;
     };
-    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');
-    };
-    // info.addTo(map);
+    //legend.addTo(map);
-    //info end
-    //legend start
+    //legend end
-    var legend = L.control({position: 'bottomright'});
-    legend.onAdd = function (map) {
+    function highlightFeature(e) {
-        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];
+        var layer = e.target;
-            to = grades[i + 1];
-            labels.push(
+        layer.setStyle({
+            weight: 5,
-                '<i style="background:' + getColor(from + 1) + '"></i> ' +
+            color: '#666',
+            dashArray: '',
+            fillOpacity: 0.4
+        });
-                from + (to ? '&ndash;' + to : '+'));
+        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
+            layer.bringToFront();
         }
-        div.innerHTML = labels.join('<br>');
+        info.update(layer.feature.properties);
-        return div;
-    };
+    }
+    var geojson;
+    function resetHighlight(e) {
-    //legend.addTo(map);
+        geojson.resetStyle(e.target);
-    //legend end
+        info.update();
+    }
-    function highlightFeature(e) {
+    function zoomToFeature(e) {
-        var layer = e.target;
+        map.fitBounds(e.target.getBounds());
+    }
+    function onEachFeature(feature, layer) {
-        layer.setStyle({
+        layer.on({
-            weight: 5,
-            color: '#666',
+            mouseover: highlightFeature,
-            dashArray: '',
+            mouseout: resetHighlight,
-            fillOpacity: 0.4
+            click: zoomToFeature
         });
-        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,
@@ -454,35 +486,81 @@
     }).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";
-    geojson = L.geoJson(statesData, {
+    property = feature.properties.density02;
-        style: style,
-        onEachFeature: onEachFeature
-    }).addTo(choropleth02);
     info.addTo(choropleth02);
     legend.addTo(choropleth02);
+}
+console.log("title: ");
+console.log(title);
+console.log("property: ");
+console.log(property);
@@ -504,4 +582,6 @@
 </html>
 ```

質問に追記しました

2017/01/02 05:45

投稿

oyatsu8

スコア97

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -20,6 +20,82 @@
 どうにかしたいとしています、引数等の使い分けがまだ理解し切れていないのもあるのですが、、
+特に知りたい事は例えば下記の用な場合に、
+```javascript
+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');
+    };
 アドバイス頂けたら助かります。