Added function to get the outer boundary of the districts, based on language

index.js

@@ -23,6 +23,8 @@ const urduColor = "#3fa179" // Urdu
 const tuluColor = "#dedc52" // Tulu
 const maithaliColor = "#4472a6" // Maithali
 
+const unavailLangColor = "#555555"
+
 // Credit: https://www.artcraftblend.com/blogs/colors/shades-of-pastel
 const colorMap = {
 		"Tamil Nadu": tamilColor,
@@ -39,12 +41,12 @@ const colorMap = {
 		"Jharkhand": hindiColor, // DEFAULT
 		"West Bengal": bengaliColor,
 		"Assam": AssameseColor,
-		"Meghalaya": hindiColor, // DEFAULT
+		"Meghalaya": unavailLangColor, // DEFAULT
 		"Tripura": bengaliColor,
 		"Mizoram": mizoColor,
 		"Manipur": manipuriColor,
-		"Nagaland": hindiColor, // DEFAULT
-		"Arunachal Pradesh": hindiColor, // DEFAULT
+		"Nagaland": unavailLangColor, // DEFAULT
+		"Arunachal Pradesh": unavailLangColor, // DEFAULT
 		"Sikkim": nepaliColor,
 		"Bihar": bhojpuriColor,
 		"Madhya Pradesh": hindiColor,
@@ -108,6 +110,45 @@ const districtColorMap = { // Should override state colors
 	"Hapur": urduColor,
 }
 
+// Assuming 'features' is your array of GeoJSON polygon features
+function getOuterBoundary(features) {
+  // Merge all polygons into a single multipolygon
+  const merged = turf.union(turf.featureCollection(features));
+  
+  // If we have a multipolygon, extract its coordinates
+  const coordinates = merged.geometry.type === 'MultiPolygon' 
+    ? merged.geometry.coordinates 
+    : [merged.geometry.coordinates];
+  
+  // Extract just the outer ring of each polygon (first ring in each polygon)
+  const outerRings = coordinates.map(polygon => polygon[0]);
+  
+  // Create a new Feature with a MultiLineString geometry containing the outer rings
+  const boundary = turf.multiLineString(outerRings);
+  
+console.log(boundary);
+  return boundary;
+}
+
+function getOuterBoundaryPolygon(features) {
+  try {
+    // Combine all polygons using turf.union
+    let combined = features[0];
+    for (let i = 1; i < features.length; i++) {
+      combined = turf.union(turf.featureCollection([combined, features[i]]));
+    }
+    return combined;
+  } catch (error) {
+    console.error("Error processing GeoJSON:", error);
+    return null;
+  }
+}
+
+
+
+
+
+
 function stateOrDistrict(d) {
 	if (typeof d.properties.district !== 'undefined') {
 		return "district"
@@ -134,10 +175,12 @@ function drawMap(world) {
 								districtColorMap[d.properties.district] :
 								colorMap[d.properties.st_nm])
 		.each(function(d) {
-				if (!colorToDistrict.hasOwnProperty(this.getAttribute("fill"))) {
-					colorToDistrict[this.getAttribute("fill")] = [d]
-				} else {
-					colorToDistrict[this.getAttribute("fill")].push(d)
+				if (stateOrDistrict(d) == "district") {
+					if (!colorToDistrict.hasOwnProperty(this.getAttribute("fill"))) {
+						colorToDistrict[this.getAttribute("fill")] = [d]
+					} else {
+						colorToDistrict[this.getAttribute("fill")].push(d)
+					}
 				}
 		})
 		.append("title") // Tooltip
@@ -152,6 +195,30 @@ function drawMap(world) {
 		.attr("class", "districtText")
 		.attr("id", d => d.properties.district+"Text")
       .text(d => d.properties.district);
+
+
+
+		// Example usage
+		let geojson = {
+		    "type": "FeatureCollection",
+		    "features": colorToDistrict[hindiColor]
+		};
+		console.log(geojson)
+		
+	console.log(getOuterBoundaryPolygon(geojson.features));
+
+  // Draw the boundary
+  svg.append("path")
+    .datum(getOuterBoundaryPolygon(geojson.features))
+    .attr("d", path)
+    .attr("fill", "none")
+    .attr("stroke", "red")
+    .attr("stroke-width", 2);
+
+		const bbox = turf.bbox(getOuterBoundaryPolygon(geojson.features));
+		console.log("Bounding box:", bbox);
+
+
 }
 
 d3.json("india_with_districts.json").then(drawMap)