CODEWITHSUNDEEP
javascriptleafletgeojson
Kuntal Parbat
Kuntal Parbat

Reputation: 159

Control layers Icon according to feature type (properties)

Please read first understand then react. People nowadays give negative mark without know the actual issue.

if You have any more information need please ask me.

leaflet Version: Leaflet 1.0.2, *I am using map-box plugin here for better CDN access.

I have successfully crate control layer group and custom Circle Marker group using GeoJSON.

This is source:

L.mapbox.accessToken = 'pk.eyJ1IjoiZG9zcyIsImEiOiI1NFItUWs4In0.-9qpbOfE3jC68WDUQA1Akg';

var map = L.mapbox.map('mapbox', 'mapbox.light').setView([22.9867569, 87.8549755], 9);

var baselayer = {};


var initialContent = {};

var myGeometry = JSON.stringify({
  "features": [{
    "type": "Feature",
    "properties": {
      "pname": "66_marker",
      "action": "B",
      "name": "AAA",
      "photo": "",
      "comment": "",
      "fac_type": "",
      "val_6": 1,
      "val_7": 333333,
      "val_8": "",
      "val_9": "",
      "val_10": "",
      "val_11": "",
      "val_12": "",
      "val_13": "",
      "val_14": "",
      "val_15": "",
      "val_16": "",
      "val_17": "",
      "val_18": "",
      "val_19": "",
      "val_20": "",
      "id": 66,
      "user_id": 1
    },
    "geometry": {
      "type": "Point",
      "coordinates": [88.266906738281, 22.793907258499]
    }
  }, {
    "type": "Feature",
    "properties": {
      "pname": "73_marker",
      "action": "A",
      "name": "WW",
      "photo": "",
      "comment": "",
      "fac_type": "",
      "val_6": 1,
      "val_7": 333333,
      "val_8": "",
      "val_9": "",
      "val_10": "",
      "val_11": "",
      "val_12": "",
      "val_13": "",
      "val_14": "",
      "val_15": "",
      "val_16": "",
      "val_17": "",
      "val_18": "",
      "val_19": "",
      "val_20": "",
      "id": 73,
      "user_id": 1
    },
    "geometry": {
      "type": "Point",
      "coordinates": [88.360290527344, 22.692586244731]
    }
  }, {
    "type": "Feature",
    "properties": {
      "pname": "78_marker",
      "action": "b",
      "name": "BBB",
      "photo": "",
      "comment": "",
      "fac_type": "",
      "val_6": 1,
      "val_7": 333333,
      "val_8": "",
      "val_9": "",
      "val_10": "",
      "val_11": "",
      "val_12": "",
      "val_13": "",
      "val_14": "",
      "val_15": "",
      "val_16": "",
      "val_17": "",
      "val_18": "",
      "val_19": "",
      "val_20": "",
      "id": 78,
      "user_id": 1
    },
    "geometry": {
      "type": "Point",
      "coordinates": [88.887634277344, 22.872379306788]
    }
  }, {
    "type": "Feature",
    "properties": {
      "pname": "83_marker",
      "action": "Q",
      "name": "SSS",
      "photo": "",
      "comment": "",
      "fac_type": "",
      "val_6": 1,
      "val_7": 333333,
      "val_8": "",
      "val_9": "",
      "val_10": "",
      "val_11": "",
      "val_12": "",
      "val_13": "",
      "val_14": "",
      "val_15": "",
      "val_16": "",
      "val_17": "",
      "val_18": "",
      "val_19": "",
      "val_20": "",
      "id": 83,
      "user_id": 1
    },
    "geometry": {
      "type": "Point",
      "coordinates": [88.689880371094, 22.978623970385]
    }
  }, {
    "type": "Feature",
    "properties": {
      "pname": "88_marker",
      "action": "A",
      "name": "WW",
      "photo": "",
      "comment": "",
      "fac_type": 1,
      "val_6": 1,
      "val_7": 333333,
      "val_8": "",
      "val_9": "",
      "val_10": "",
      "val_11": "",
      "val_12": "",
      "val_13": "",
      "val_14": "",
      "val_15": "",
      "val_16": "",
      "val_17": "",
      "val_18": "",
      "val_19": "",
      "val_20": "",
      "id": 88,
      "user_id": 1
    },
    "geometry": {
      "type": "Point",
      "coordinates": [88.401489257812, 22.935630216775]
    }
  }, {
    "type": "Feature",
    "properties": {
      "pname": "93_marker",
      "action": "C",
      "name": "qqq",
      "photo": "",
      "comment": "",
      "fac_type": 1,
      "val_6": 1,
      "val_7": 333333,
      "val_8": "",
      "val_9": "",
      "val_10": "",
      "val_11": "",
      "val_12": "",
      "val_13": "",
      "val_14": "",
      "val_15": "",
      "val_16": "",
      "val_17": "",
      "val_18": "",
      "val_19": "",
      "val_20": "",
      "id": 93,
      "user_id": 1
    },
    "geometry": {
      "type": "Point",
      "coordinates": [88.547058105469, 22.85719470097]
    }
  }, {
    "type": "Feature",
    "properties": {
      "pname": "98_marker",
      "action": "AA",
      "name": "QQ",
      "photo": "",
      "comment": "",
      "fac_type": 1,
      "val_6": 1,
      "val_7": 22222,
      "val_8": "",
      "val_9": "",
      "val_10": "",
      "val_11": "",
      "val_12": "",
      "val_13": "",
      "val_14": "",
      "val_15": "",
      "val_16": "",
      "val_17": "",
      "val_18": "",
      "val_19": "",
      "val_20": "",
      "id": 98,
      "user_id": 1
    },
    "geometry": {
      "type": "Point",
      "coordinates": [88.118591308594, 22.791375149054]
    }
  }, {
    "type": "Feature",
    "properties": {
      "pname": "62_marker",
      "action": "GG",
      "name": "Kuntal",
      "photo": "1477902102_Street_-_Kolkata_2011-07-27_00417.jpg",
      "comment": "This is Kolkata",
      "fac_type": 8,
      "val_6": 1,
      "val_7": 9830264337,
      "val_8": "HH",
      "val_9": 9754875,
      "val_10": "[email protected]",
      "val_11": "",
      "val_12": "",
      "val_13": "",
      "val_14": "",
      "val_15": "",
      "val_16": "",
      "val_17": "",
      "val_18": "",
      "val_19": "",
      "val_20": "",
      "id": 62,
      "user_id": 1
    },
    "geometry": {
      "type": "Point",
      "coordinates": [87.896118164062, 22.748322097622]
    }
  }, {
    "type": "Feature",
    "properties": {
      "pname": "77_polygon",
      "action": 1,
      "name": "",
      "photo": "",
      "comment": "",
      "fac_type": "",
      "val_6": "",
      "val_7": "",
      "val_8": "",
      "val_9": "",
      "val_10": "",
      "val_11": "",
      "val_12": "",
      "val_13": "",
      "val_14": "",
      "val_15": "",
      "val_16": "",
      "val_17": "",
      "val_18": "",
      "val_19": "",
      "val_20": "",
      "id": 77,
      "user_id": 1
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [88.302773237228, 22.684419907565],
          [88.30274105072, 22.684122940681],
          [88.303438425064, 22.683954659161],
          [88.303513526917, 22.684281323099],
          [88.303191661835, 22.684311019782],
          [88.302773237228, 22.684419907565]
        ]
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "pname": "94_polygon",
      "action": 2,
      "name": "",
      "photo": "",
      "comment": "",
      "fac_type": "",
      "val_6": "",
      "val_7": "",
      "val_8": "",
      "val_9": "",
      "val_10": "",
      "val_11": "",
      "val_12": "",
      "val_13": "",
      "val_14": "",
      "val_15": "",
      "val_16": "",
      "val_17": "",
      "val_18": "",
      "val_19": "",
      "val_20": "",
      "id": 94,
      "user_id": 1
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [88.305047750473, 22.685221714938],
          [88.304886817932, 22.68493464864],
          [88.305455446243, 22.684598087387],
          [88.305659294128, 22.684974244027],
          [88.305047750473, 22.685221714938]
        ]
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "pname": "69_marker",
      "action": "y",
      "name": "",
      "photo": "",
      "comment": "",
      "fac_type": 1,
      "val_6": "",
      "val_7": "",
      "val_8": "",
      "val_9": "",
      "val_10": "",
      "val_11": "",
      "val_12": "",
      "val_13": "",
      "val_14": "",
      "val_15": "",
      "val_16": "",
      "val_17": "",
      "val_18": "",
      "val_19": "",
      "val_20": "",
      "id": 69,
      "user_id": 1
    },
    "geometry": {
      "type": "Point",
      "coordinates": [88.304752707481, 22.683890316173]
    }
  }, {
    "type": "Feature",
    "properties": {
      "pname": "73_marker",
      "action": "r",
      "name": "",
      "photo": "",
      "comment": "",
      "fac_type": 1,
      "val_6": "",
      "val_7": "",
      "val_8": "",
      "val_9": "",
      "val_10": "",
      "val_11": "",
      "val_12": "",
      "val_13": "",
      "val_14": "",
      "val_15": "",
      "val_16": "",
      "val_17": "",
      "val_18": "",
      "val_19": "",
      "val_20": "",
      "id": 73,
      "user_id": 1
    },
    "geometry": {
      "type": "Point",
      "coordinates": [88.304173350334, 22.684276373652]
    }
  }]
});

var myGeoJSON = JSON.parse(myGeometry);

var geoJsonGroup = L.geoJson(myGeoJSON);

var categories = {},
  fac_type;

var myStyle = {
  fillOpacity: 1,
  stroke: false,
  weight: 1,
  opacity: 1,
  fill: true,
  clickable: true
};

var geoJsonGroup = new L.geoJson(myGeoJSON, {

  style: function(feature) {
    switch (feature.properties.pname) {
      case '66_marker':
        return {
          color: "yellow"
        };
      case '73_marker':
        return {
          color: "blue"
        };
      case '62_marker':
        return {
          color: "redMarker"
        };
      case '77_polygon':
        return {
          color: "red"
        };
    }
  },

  pointToLayer: function(feature, latlng) {
    return new L.CircleMarker(latlng, myStyle);

  },

  onEachFeature: function(feature, layer) {
    var layers = layer;


    var initialContent = document.createElement("div");
    initialContent.className = "content-scroll6";
    initialContent.innerHTML = "<table class='table table-striped'><tr><td>POI_NAME</td><td>" + feature.properties.name + "</td></tr>" + "<tr><td>FAC_TYPE</td><td><a id='fac_type'></a></td></tr>" + "<tr><td>SUBCAT</td><td>" + feature.properties.val_6 + "</td></tr>" + "<tr><td>PH_NUMBER</td><td>" + feature.properties.val_7 + "</td></tr>" + "<tr><td>HNO</td><td>" + feature.properties.val_8 + "</td></tr>" + "<tr><td>POSTCODE</td><td>" + feature.properties.val_9 + "</td></tr>" + "<tr><td>MAIL</td><td>" + feature.properties.val_10 + "</td></tr>" + "<tr><td>STR_NM</td><td>" + feature.properties.val_11 + "</td></tr>" + "<tr><td>PHOTO</td><td ><img src='uploads/" + feature.properties.photo + "' class='inImg'></td></tr>" + "<tr><td>COMMENT</td><td>" + feature.properties.comment + "</td></tr>" + "<tr><td>URL</td><td>" + feature.properties.val_12 + "</td></tr>" + "<tr><td>SUB_LOC</td><td>" + feature.properties.val_13 + "</td></tr>" + "<tr><td>LOCALITY</td><td>" + feature.properties.val_14 + "</td></tr>" + "<tr><td>Val 15</td><td>" + feature.properties.val_15 + "</td></tr>" + "<tr><td>Val 16</td><td>" + feature.properties.val_16 + "</td></tr>" + "<tr><td>Val 17</td><td>" + feature.properties.val_17 + "</td></tr>" + "<tr><td>Val 18</td><td>" + feature.properties.val_18 + "</td></tr>" + "<tr><td>Val 19</td><td>" + feature.properties.val_19 + "</td></tr>" + "<tr><td>Val 20</td><td>" + feature.properties.val_20 + "</td></tr></table>";

    layer.bindPopup(initialContent);



    fac_type = feature.properties.pname;
    // Initialize the category array if not already set.
    if (typeof categories[fac_type] === "undefined") {
      categories[fac_type] = [];
    }
    categories[fac_type].push(layer);


  }

}).addTo(map);



var overlaysObj = {},
  categoryName,
  categoryArray,
  categoryLG;

for (categoryName in categories) {

  categoryArray = categories[categoryName];
  categoryLG = L.layerGroup(categoryArray);
  categoryLG.categoryName = categoryName;
  overlaysObj[categoryName] = categoryLG;

}

// Create an empty LayerGroup that will be used to emulate adding / removing all categories.
var allPointsLG = L.layerGroup();
overlaysObj["All Points"] = allPointsLG;

var control = L.control.layers(baselayer, overlaysObj, {
  collapsed: false
}).addTo(map);


// Make sure the Layers Control checkboxes are kept in sync with what is on map.
// For some reason this control does not sync its checkboxes with the map state by itself, whereas it does with Leaflet 0.7.x?
map.on("overlayadd overlayremove", function(event) {
  var layer = event.layer,
    layerCategory;

  if (layer === allPointsLG) {
    if (layer.notUserAction) {
      // allPointsLG has been removed just to sync its state with the fact that at least one
      // category is not shown. This event does not come from a user un-ticking the "All points" checkbox.
      layer.notUserAction = false;
      return;
    }
    // Emulate addition / removal of all category LayerGroups when allPointsLG is added / removed.
    for (var categoryName in overlaysObj) {
      if (categoryName !== "All Points") {
        if (event.type === "overlayadd") {
          overlaysObj[categoryName].addTo(map);
        } else {
          map.removeLayer(overlaysObj[categoryName]);
        }
      }
    }
    control._update();
  } else if (layer.categoryName && layer.categoryName in overlaysObj) {
    if (event.type === "overlayadd") {
      // Check if all categories are shown.
      for (var categoryName in overlaysObj) {
        layerCategory = overlaysObj[categoryName];
        if (categoryName !== "All Points" && !layerCategory._map) {
          // At least one category is not shown, do nothing.
          return;
        }
      }
      allPointsLG.addTo(map);
      control._update();
    } else if (event.type === "overlayremove" && allPointsLG._map) {
      // Remove allPointsLG as at least one category is not shown.
      // But register the fact that this is purely for updating the checkbox, not a user action.
      allPointsLG.notUserAction = true;
      map.removeLayer(allPointsLG);
      control._update();
    }
  }
});
body {
  margin: 0;
}

html,
body,
#mapbox {
  height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.js"></script>
<link href="https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.css" rel="stylesheet"/>
<body>
  <div id="mapbox"></div>
</body>

What I Want to make is : 1. Customise Icon for markers not different colour as you see now.
2. Add different Icon on layer Control. Example Image:

enter image description here

Upvotes: 0

Views: 153

Answers (1)

Owen J Lamb
Owen J Lamb

Reputation: 254

Take a look at this example for creating custom leaflet markers.

The idea is that rather than converting the marker point to L.circleMarker, you can create a marker with custom icon image.

Since you will have multiple icons it sounds like, it would be best to create an icon class:

var myIcon = L.Icon.extend({
    options: {
        iconSize:     [38, 95],
        iconAnchor:   [22, 94],
        popupAnchor:  [-3, -76]
    }
});

Then when you instantiate the icon, you can set your custom icon image.

var firstIcon = new myIcon({iconUrl: 'first-icon.png'}),
    anotherIcon = new myIcon({iconUrl: 'another-icon.png'}),
    yetAnotherIcon = new myIcon({iconUrl: 'tet-another.png'});


 pointToLayer: function(feature, latlng) {
      if(feature.properties.pname == '66_marker'){
         return L.marker(latlng, {icon: firstIcon});
       } else if (feature.properties.pname == '73_marker'){
         return L.marker(latlng, {icon: anotherIcon});
       }
  }

To create a custom icon for layer control, you can create icon classes in your css. When you add the layer to layer control you can add in your icon.

overlaysObj[categoryName] = '<span class="custom-icon"></span>' + categoryLG;

Good luck.

Upvotes: 1

Related Questions