Store language text instead of district text

index.html

@@ -23,7 +23,7 @@
 			.state {
 				stroke: black;
 				fill: none;
-				stroke-width: 1;
+				stroke-width: 0.5;
 			}
 			.language {
 				stroke: red;
@@ -31,16 +31,24 @@
 				hover events to be recognized on the inside. */
 				fill: black;
 				fill-opacity: 0.0;
-				stroke-width: 2;
+				stroke-width: 1;
+			}
+			.languageText {
+				visibility: hidden;
+				font-family: sans-serif;
+				font-size:1.25em;
+			}
+			.language:hover ~ .languageText {
+				visibility: visible;
 			}
 
 			.district {
 				stroke: white;
-				stroke-width: 0.5;
+				stroke-width: 0.25;
 				transition: fill 0.3s;
 			}
 			.language:hover {
-				stroke-width: 3;
+				stroke-width: 2;
 			}
 			.districtText {
 				visibility: hidden;
@@ -55,12 +63,13 @@
 		<section id="textStuff">
 		<h1>Indian Translate</h1>
 
-		<label for="toTranslate">Enter text to translate:
-			<input type="text" name="toTranslate"/>
-		</label>
+		<form class="translateForm" action="/submit" method="get">
+		<label for="query">Enter text to translate:</label>
+			<input type="text" name="query" id="query" required/>
+			<input type="submit" value="Translate"/>
 		</section>
 
-		<svg id = "indiaMap" width="700" height="700"></svg>
+		<svg id = "indiaMap" width="1000" height="1000"></svg>
 		</main>
 
 		<script src="index.js"></script>

index.js

@@ -259,9 +259,15 @@ function drawMap(world) {
       .attr("text-anchor", "middle")
       .attr("font-size", "12px")
       .attr("fill", "black")
-		.attr("class", "districtText")
-		.attr("id", d => d.properties.district+"Text")
-      .text(d => d.properties.district);
+		.attr("class", "languageText")
+		.attr("id", d => d.properties.lang_name+"Text")
+      .text(function(d) {
+			if (stateOrDistrictOrLanguage(d) == "language") {
+				return d.properties.lang_name;
+			} else {
+				return d.properties.district;
+			}
+		});
 
 		let allLangs = []