Finally finished adding language boundaries - next step: export them to a file so that they don't have to be recomputed each time

index.js

@@ -142,13 +142,50 @@ const district2lang = { // Should override state colors
 	"Hapur": languages["urdu"],
 }
 
+
+function reverseCoordArrays(coords) {
+    if (!Array.isArray(coords)) {
+	 	return coords; 
+	 }
+	 if (coords.every(item => Array.isArray(item) && item.length == 2 && item.every(val => Number.isFinite(val)))) {
+		if (!turf.booleanClockwise(coords)) {
+		 	return coords.reverse();
+		} else {
+			return coords;
+		}
+	}
+
+	return coords.map(reverseCoordArrays);
+}
+
+
 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]]));
+
+    // Check if we have features to process
+    if (!features || features.length === 0) {
+      console.warn("No features to process for boundary");
+      return null;
     }
+    
+    // Handle single feature case
+    if (features.length === 1) {
+      return features[0];
+    }
+
+    // Combine all polygons using turf.union
+    let combined = turf.union(turf.featureCollection(features))
+
+//	for (let i=0; i<combined.geometry.coordinates.length; i++) {
+//		let outerCoords = combined.geometry.coordinates[i]
+//		if (!turf.booleanClockwise(outerCoords)) {
+//			outerCoords.reverse()
+//		}
+//
+//		 combined.geometry.coordinates[i] = outerCoords;
+//	 }
+
+	 combined.geometry.coordinates = reverseCoordArrays(combined.geometry.coordinates);
     return combined;
   } catch (error) {
     console.error("Error processing GeoJSON:", error);
@@ -161,21 +198,18 @@ function getOuterBoundaryPolygon(features) {
 
 
 
-function stateOrDistrictOrLanguage(d) {
+function stateOrDistrict(d) {
 	if (typeof d.properties.district !== 'undefined') {
 		return "district"
 	} else {
-		if (typeof d.properties.lang_name !== 'undefined') {
-			return "language"
-		} else {
-			return "state"
-		}
+		return "state"
 	}
 }
 
 function drawMap(world) {
 	const mapWidth = document.getElementById("indiaMap").getAttribute("width")
 	const mapHeight = document.getElementById("indiaMap").getAttribute("height")
+	console.log(d3.geoBounds(world));
 	const projection = d3.geoMercator().fitSize([mapWidth, mapHeight], world)
 	const path = d3.geoPath().projection(projection);
 
@@ -186,16 +220,12 @@ function drawMap(world) {
 
 	states.append("path")
 		.attr("d", path)
-		.attr("class", d => stateOrDistrictOrLanguage(d))
-		.attr("fill", function(d) {
-						if (stateOrDistrictOrLanguage(d) == "state" || stateOrDistrictOrLanguage(d) == "district") {
-							return district2lang.hasOwnProperty(d.properties.district) ?
-							district2lang[d.properties.district].color :
-							state2lang[d.properties.st_nm].color
-						}
-		})
+		.attr("class", d => stateOrDistrict(d))
+		.attr("fill", d => district2lang.hasOwnProperty(d.properties.district) ?
+								district2lang[d.properties.district].color :
+								state2lang[d.properties.st_nm].color)
 		.each(function(d) {
-				if (stateOrDistrictOrLanguage(d) == "district") {
+				if (stateOrDistrict(d) == "district") {
 						districtLang = district2lang.hasOwnProperty(d.properties.district) ? district2lang[d.properties.district] : state2lang[d.properties.st_nm];
 						districtLang.districts.push(d)
 				}
@@ -213,29 +243,28 @@ function drawMap(world) {
 		.attr("id", d => d.properties.district+"Text")
       .text(d => d.properties.district);
 
-//		let allLangs = []
-//
-//		for (const [langId,lang] of Object.entries(languages)) {
-//			let geojson = {
-//			    "type": "FeatureCollection",
-//			    "features": lang.districts
-//			};
-//			
-//			let outerBound = getOuterBoundaryPolygon(geojson.features)
-//			outerBound["id"] = "lang" + lang.name
-//			outerBound.properties["lang_name"]= lang.name
-//			allLangs.push(outerBound);
-//
-//			// Draw the boundary
-//			svg.append("path")
-//		  		.datum(outerBound)
-//		  		.attr("d", path)
-//		  		.attr("fill", "none")
-//		  		.attr("stroke", "red")
-//		  		.attr("stroke-width", 2);
-//		}
-//
-//		console.log(JSON.stringify(allLangs,null,2))
+		let allLangs = []
+
+		for (const [langId,lang] of Object.entries(languages)) {
+			let geojson = {
+			    "type": "FeatureCollection",
+			    "features": lang.districts
+			};
+			
+			let outerBound = getOuterBoundaryPolygon(geojson.features)
+			outerBound["id"] = "lang" + lang.name
+			outerBound.properties["lang_name"]= lang.name
+			allLangs.push(outerBound);
+			console.log(JSON.stringify(outerBound, null, 2))
+
+			svg.append("path")
+		  		.datum(outerBound)
+		  		.attr("d", path)
+		  		.attr("fill", "none")
+		  		.attr("stroke", "red")
+		  		.attr("stroke-width", 2)
+		}
+		console.log(allLangs)
 
 
 }