update

android/app/src/main/AndroidManifest.xml

@@ -1,5 +1,6 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="com.example.rogapp">
+    <uses-permission android:name="android.permission.INTERNET"/>
    <application
         android:label="rogapp"
         android:name="${applicationName}"

lib/data/location_data.dart

@@ -1,3 +1,4 @@
+// ignore: non_constant_identifier_names
 String location_line_date = """
 {
     "type": "FeatureCollection",

lib/index/index_binding.dart

@@ -0,0 +1,11 @@
+
+import 'package:flutter_map/plugin_api.dart';
+import 'package:get/get.dart';
+import 'package:rogapp/index/index_controller.dart';
+
+class IndexBinding extends Bindings {
+  @override
+  void dependencies() {
+    Get.put<IndexController>(IndexController());
+  }
+}

lib/index/index_controller.dart

@@ -1,155 +1,190 @@
-
+
-
+
-import 'package:flutter_map/plugin_api.dart';
+import 'package:flutter_map/flutter_map.dart';
-import 'package:geojson/geojson.dart';
+import 'package:geojson/geojson.dart';
-import 'package:get/get.dart';
+import 'package:get/get.dart';
-import 'package:latlong2/latlong.dart';
+import 'package:latlong2/latlong.dart';
-import 'package:rogapp/pages/map/map_page.dart';
+import 'package:rogapp/services/location_service.dart';
-import 'package:rogapp/services/location_service.dart';
+import 'package:rogapp/services/perfecture_service.dart';
-import 'package:rogapp/services/perfecture_service.dart';
+
-
+class IndexController extends GetxController {
-class HomeController extends GetxController {
+  List<GeoJsonFeatureCollection> locations = <GeoJsonFeatureCollection>[].obs;
-
+  List<GeoJsonFeature> currentFeature = <GeoJsonFeature>[].obs;
-  List<GeoJsonFeatureCollection> locations = <GeoJsonFeatureCollection>[].obs;
+  List<dynamic> perfectures = <dynamic>[].obs;
-  List<GeoJsonFeature> currentFeature = <GeoJsonFeature>[].obs;
+  List<LatLngBounds> currentBound = <LatLngBounds>[].obs;
-  List<dynamic> perfectures = <dynamic>[].obs;
+  List<dynamic> subPerfs = <dynamic>[].obs;
-  List<LatLngBounds> currentBound = <LatLngBounds>[].obs;
+
-  List<dynamic> subPerfs = <dynamic>[].obs;
+  MapController? mapController;
-
+
-
+  var mode = 0.obs;
-  @override
+
-  void onInit() {
+  String subDropdownValue = "-1";
-    LocationService.loadLocations().then((value){
+
-      locations.add(value!);
+  void toggleMode(){
-    });
+    if(mode==0){
-
+      mode += 1;
-    PerfectureService.loadPerfectures().then((value){
+    }
-      perfectures.add(value);
+    else{
-    });
+      mode -= 1;
-    
+    }
-    super.onInit();
+  }
-
+
-  }
+  @override
-
+  void onInit() {
-   void getBoundFromLatLng(List<LatLng> list) {
+    super.onInit();
-    double? x0, x1, y0, y1;
+
-    for (LatLng latLng in list) {
+    if(locations.length == 0){
-      if (x0 == null) {
+      LocationService.loadLocations().then((value){
-        x0 = x1 = latLng.latitude;
+        locations.add(value!);
-        y0 = y1 = latLng.longitude;
+      //print(value);
-      } else {
+      });
-        if (latLng.latitude > x1!) x1 = latLng.latitude;
+    }
-        if (latLng.latitude < x0) x0 = latLng.latitude;
+    if(perfectures.length == 0){
-        if (latLng.longitude > y1!) y1 = latLng.longitude;
+      PerfectureService.loadPerfectures().then((value){
-        if (latLng.longitude < y0!) y0 = latLng.longitude;
+        perfectures.add(value);
-      }
+        loadSubPerfFor("9");
-    }
+      });
-    currentBound.clear();
+    }
-    currentBound.add(LatLngBounds(LatLng(x1!, y1!), LatLng(x0!, y0!)));
+   }
-  }
+
-
+  void loadSubPerfFor(String perf){
-  void setBounds(){
+    subPerfs.clear();
-    List<LatLng> lts = [];
+    dynamic initVal = {'id':'-1', 'adm2_ja':'----'};
-    if(locations.length > 0){
+    PerfectureService.loadSubPerfectures(perf).then((value){
-          for(GeoJsonFeature i in locations[0].collection){
+      value!.add(initVal);
-            GeoJsonMultiPoint p = i.geometry as GeoJsonMultiPoint;
+      subPerfs.add(value);
-            LatLng lt = LatLng(p.geoSerie!.geoPoints[0].latitude , p.geoSerie!.geoPoints[0].longitude) ;
+      subDropdownValue = getSubInitialVal();
-            lts.add(lt);
+    });
-        }
+  }
-      }
+
-      else{
+  String getSubInitialVal(){
-        LatLng lt = LatLng(37.15319600454702, 139.58765950528198);
+    int min = 0;
-        lts.add(lt);
+    if(subPerfs.length > 0){
-      }
+      min = subPerfs[0][0]['id'] as int;
-      getBoundFromLatLng(lts);
+      for(var sub in subPerfs[0]){
-  }
+        int x = int.parse(sub['id'].toString()); // as int;
-
+        if(x < min){
-  void loadLocationforPerf(String perf){
+          min = x;
-    locations.clear();
+        }
-    LocationService.loadLocationsFor(perf).then((value){
+      }
-      locations.add(value!);
+    }
-       setBounds();
+    return min.toString();
-       MapPage.mapController.fitBounds(currentBound[0]);
+  }
-    });
+
-  }
+  void loadLocationforPerf(String perf, MapController mapController) async {
-
+    locations.clear();
-  String getSubInitialVal(){
+    LocationService.loadLocationsFor(perf).then((value){
-    int min = 0;
+      locations.add(value!);
-    if(subPerfs.length > 0){
+       mapController.fitBounds(currentBound[0]);
-      min = subPerfs[0][0]['id'] as int;
+    });
-      for(var sub in subPerfs[0]){
+  }
-        int x = sub['id'] as int;
+
-        if(x < min){
+    void loadLocationforSubPerf(String subperf, MapController mapController) async {
-          min = x;
+    locations.clear();
-        }
+    LocationService.loadLocationsSubFor(subperf).then((value){
-      }
+      locations.add(value!);
-    }
+    });
-    return min.toString();
+  }
-  }
+
-
+  void setBound(LatLngBounds bounds){
-  void loadSubPerfFor(String perf){
+    currentBound.clear();
-    subPerfs.clear();
+    currentBound.add(bounds);
-    PerfectureService.loadSubPerfectures(perf).then((value){
+  }
-      subPerfs.add(value);
+
-      print(subPerfs);
+  void zoomtoMainPerf(String id){
-    });
+    
-  }
+    PerfectureService.getMainPerfExt(id).then((value){
-
+      LatLng lat1 = LatLng(value![1], value[0]);
-    GeoJsonFeature? getFeatureForLatLong(double lat, double long){
+      LatLng lat2 = LatLng(value[3], value[2]);
-      if(locations.length > 0){
+      LatLngBounds bound = LatLngBounds(lat1, lat2);
-          for(GeoJsonFeature i in locations[0].collection){
+      mapController!.fitBounds(bound);
-            GeoJsonMultiPoint p = i.geometry as GeoJsonMultiPoint;
+      setBound(bound);
-            if(p.geoSerie!.geoPoints[0].latitude == lat && p.geoSerie!.geoPoints[0].longitude  == long){
+    });
-              return i;
+    
-          }
+  }
-        }
+
-      }
+  void zoomtoSubPerf(String id){
-  }
+    
-
+    PerfectureService.getSubExt(id).then((value){
-  void makeNext(GeoJsonFeature fs){
+      LatLng lat1 = LatLng(value![1], value[0]);
-    GeoJsonFeature<GeoJsonMultiPoint> pt = fs  as GeoJsonFeature<GeoJsonMultiPoint>;
+      LatLng lat2 = LatLng(value[3], value[2]);
-
+      LatLngBounds bound = LatLngBounds(lat1, lat2);
-    for(int i=0; i<= locations[0].collection.length - 1; i++){
+      mapController!.fitBounds(bound);
-      GeoJsonMultiPoint p = locations[0].collection[i].geometry as GeoJsonMultiPoint;
+      setBound(bound);
-
+    });
-      if(p.geoSerie!.geoPoints[0].latitude == pt.geometry!.geoSerie!.geoPoints[0].latitude && p.geoSerie!.geoPoints[0].longitude  == pt.geometry!.geoSerie!.geoPoints[0].longitude ){
+    
-          
+  }
-          if(currentFeature.length > 0){
+
-            currentFeature.clear();
+
-          }
+  void populateForPerf(String perf, MapController mapController){
-          if(i >= locations[0].collection.length - 1 ){
+    loadSubPerfFor(perf);
-            currentFeature.add(locations[0].collection[0] as GeoJsonFeature);
+    loadLocationforPerf(perf, mapController);
-          }
+    zoomtoMainPerf(perf);
-          else{
+  }
-            currentFeature.add(locations[0].collection[i + 1] as GeoJsonFeature);
+
-          }
+  void populateForSubPerf(String subperf, MapController mapController){
-      }
+    subDropdownValue = subperf;
-    }
+    loadLocationforSubPerf(subperf, mapController);
-
+    zoomtoSubPerf(subperf);
-  }
+  }
-
+
-  void makePrevious(GeoJsonFeature fs){
+  
-    GeoJsonFeature<GeoJsonMultiPoint> pt = fs  as GeoJsonFeature<GeoJsonMultiPoint>;
+  GeoJsonFeature? getFeatureForLatLong(double lat, double long){
-
+      if(locations.length > 0){
-    for(int i=0; i<= locations[0].collection.length - 1; i++){
+          for(GeoJsonFeature i in locations[0].collection){
-      GeoJsonMultiPoint p = locations[0].collection[i].geometry as GeoJsonMultiPoint;
+            GeoJsonMultiPoint p = i.geometry as GeoJsonMultiPoint;
-
+            if(p.geoSerie!.geoPoints[0].latitude == lat && p.geoSerie!.geoPoints[0].longitude  == long){
-      if(p.geoSerie!.geoPoints[0].latitude == pt.geometry!.geoSerie!.geoPoints[0].latitude && p.geoSerie!.geoPoints[0].longitude  == pt.geometry!.geoSerie!.geoPoints[0].longitude ){
+              return i;
-          
+          }
-          if(currentFeature.length > 0){
+        }
-            currentFeature.clear();
+      }
-          }
+  }
-          if(i == 0 ){
+
-            currentFeature.add(locations[0].collection[locations[0].collection.length -1] as GeoJsonFeature);
+  void makeNext(GeoJsonFeature fs){
-          }
+    GeoJsonFeature<GeoJsonMultiPoint> pt = fs  as GeoJsonFeature<GeoJsonMultiPoint>;
-          else{
+
-            currentFeature.add(locations[0].collection[i - 1] as GeoJsonFeature);
+    for(int i=0; i<= locations[0].collection.length - 1; i++){
-          }
+      GeoJsonMultiPoint p = locations[0].collection[i].geometry as GeoJsonMultiPoint;
-      }
+
-    }
+      if(p.geoSerie!.geoPoints[0].latitude == pt.geometry!.geoSerie!.geoPoints[0].latitude && p.geoSerie!.geoPoints[0].longitude  == pt.geometry!.geoSerie!.geoPoints[0].longitude ){
-
+          
-  }
+          if(currentFeature.length > 0){
-
+            currentFeature.clear();
-
+          }
-  
+          if(i >= locations[0].collection.length - 1 ){
+            currentFeature.add(locations[0].collection[0] as GeoJsonFeature);
+          }
+          else{
+            currentFeature.add(locations[0].collection[i + 1] as GeoJsonFeature);
+          }
+      }
+    }
+
+  }
+
+  void makePrevious(GeoJsonFeature fs){
+    GeoJsonFeature<GeoJsonMultiPoint> pt = fs  as GeoJsonFeature<GeoJsonMultiPoint>;
+
+    for(int i=0; i<= locations[0].collection.length - 1; i++){
+      GeoJsonMultiPoint p = locations[0].collection[i].geometry as GeoJsonMultiPoint;
+
+      if(p.geoSerie!.geoPoints[0].latitude == pt.geometry!.geoSerie!.geoPoints[0].latitude && p.geoSerie!.geoPoints[0].longitude  == pt.geometry!.geoSerie!.geoPoints[0].longitude ){
+          
+          if(currentFeature.length > 0){
+            currentFeature.clear();
+          }
+          if(i == 0 ){
+            currentFeature.add(locations[0].collection[locations[0].collection.length -1] as GeoJsonFeature);
+          }
+          else{
+            currentFeature.add(locations[0].collection[i - 1] as GeoJsonFeature);
+          }
+      }
+    }
+
+  }
+
+
+
+
 }

lib/index/index_page.dart

@@ -0,0 +1,74 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:rogapp/index/index_controller.dart';
+import 'package:rogapp/pages/drawer/drawer_page.dart';
+import 'package:rogapp/widgets/bread_crum_widget.dart';
+import 'package:rogapp/widgets/list_widget.dart';
+import 'package:rogapp/widgets/map_widget.dart';
+
+class IndexPage extends GetView<IndexController> {
+  IndexPage({Key? key}) : super(key: key);
+
+  final IndexController indexController = Get.find<IndexController>();
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      drawer: const DrawerPage(),
+        appBar: AppBar(
+          title: Text("app_title".tr),
+          actions: [
+            IconButton(
+              icon: const Icon(Icons.map),
+              onPressed: () => {},
+            )
+        ],
+      ),
+      bottomNavigationBar: BottomAppBar(
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: <Widget>[
+            Expanded(child: IconButton(icon: const Icon(Icons.camera_enhance), onPressed: (){},),),
+            const Expanded(child:  Text('')),
+            Expanded(child: IconButton(icon: const Icon(Icons.travel_explore), onPressed: (){}),),
+          ],
+        ),
+      ),
+      floatingActionButton: FloatingActionButton(
+        onPressed: (){
+          indexController.toggleMode();
+        },
+        tooltip: 'Increment',
+        child: const Icon(Icons.document_scanner),
+        elevation: 4.0,
+      ),
+      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
+      body: SafeArea(
+        child: Column(
+          children: [
+            Container(
+              padding: const EdgeInsets.symmetric(horizontal: 16.0),
+              alignment: Alignment.centerLeft,
+              height: 50.0,
+              child: SingleChildScrollView(
+                scrollDirection: Axis.horizontal,
+                child: BreadCrumbWidget(),
+              ),
+            ),
+            Expanded(
+              child: Obx(() => 
+                indexController.mode == 0 ?
+                MapWidget() :
+                ListWidget(),
+              )
+
+            )
+          ],
+        ),
+      ),
+    );
+  }
+
+}

lib/main.dart

@@ -1,10 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:google_fonts/google_fonts.dart';
-import 'package:rogapp/pages/home/home_binding.dart';
+import 'package:rogapp/index/index_binding.dart';
 import 'package:rogapp/routes/app_pages.dart';
 import 'package:rogapp/utils/string_values.dart';
-import 'package:rogapp/utils/util_controller.dart';
 
 void main() {
   //WidgetsFlutterBinding.ensureInitialized();
@@ -18,7 +17,6 @@ class MyApp extends StatelessWidget {
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
-    UtilController utilController = Get.put(UtilController());
     return GetMaterialApp(
       translations: StringValues(),
       locale: const Locale('ja', 'JP'),
@@ -33,9 +31,9 @@ class MyApp extends StatelessWidget {
       defaultTransition: Transition.cupertino,
       opaqueRoute: Get.isOpaqueRouteDefault,
       popGesture: Get.isPopGestureEnable,
-      transitionDuration: Duration(milliseconds: 230),
+      transitionDuration: const Duration(milliseconds: 230),
-      initialBinding: HomeBinding(),
+      initialBinding: IndexBinding(), //HomeBinding(),
-      initialRoute: AppPages.MAP,
+      initialRoute: AppPages.INITIAL,
       getPages: AppPages.routes,
     );
   }

lib/pages/drawer/drawer_controller.dart

@@ -2,19 +2,4 @@ import 'package:get/get.dart';
 
 class LayerDrawerController extends GetxController {
 
-
-  @override
-  void onInit() {
-    super.onInit();
-  }
-
-  @override
-  void onReady() {
-    super.onReady();
-  }
-
-  @override
-  void onClose() {
-    super.onClose();
-  }
 }

lib/pages/drawer/drawer_page.dart

@@ -13,56 +13,54 @@ class DrawerPage extends StatelessWidget {
         // Add a ListView to the drawer. This ensures the user can scroll
         // through the options in the drawer if there isn't enough vertical
         // space to fit everything.
-        child: Container(
+        child: Column(
-              child: Column(
+          children: [
-                children: [
+            Container(
-                  Container(
+              height: 100,
-                    height: 100,
+              color: Colors.amber,
-                    color: Colors.amber,
-                  ),
-                  ListTile(
-                    leading: Icon(Icons.login),
-                    title: Text("login".tr),
-                    onTap: (){},
-                  ),
-                  ListTile(
-                    leading: Icon(Icons.password),
-                    title: Text("change_password".tr),
-                    onTap: (){},
-                  ),
-                  ListTile(
-                    leading: Icon(Icons.person),
-                    title: Text("profile".tr),
-                    onTap: (){},
-                  ),
-                  ListTile(
-                    leading: Icon(Icons.route),
-                    title: Text("recommended_route".tr),
-                    onTap: (){},
-                  ),
-                  ListTile(
-                    leading: Icon(Icons.favorite_rounded),
-                    title: Text("point_rank".tr),
-                    onTap: (){},
-                  ),
-                  ListTile(
-                    leading: Icon(Icons.featured_video),
-                    title: Text("game_rank".tr),
-                    onTap: (){},
-                  ),
-                  ListTile(
-                    leading: Icon(Icons.router),
-                    title: Text("my_route".tr),
-                    onTap: (){},
-                  ),
-                  ListTile(
-                    leading: Icon(Icons.history_sharp),
-                    title: Text("visit_history".tr),
-                    onTap: (){},
-                  ),
-                ],
-              ),
             ),
+            ListTile(
+              leading: const Icon(Icons.login),
+              title: Text("login".tr),
+              onTap: (){},
+            ),
+            ListTile(
+              leading: const Icon(Icons.password),
+              title: Text("change_password".tr),
+              onTap: (){},
+            ),
+            ListTile(
+              leading: const Icon(Icons.person),
+              title: Text("profile".tr),
+              onTap: (){},
+            ),
+            ListTile(
+              leading: const Icon(Icons.route),
+              title: Text("recommended_route".tr),
+              onTap: (){},
+            ),
+            ListTile(
+              leading: const Icon(Icons.favorite_rounded),
+              title: Text("point_rank".tr),
+              onTap: (){},
+            ),
+            ListTile(
+              leading: const Icon(Icons.featured_video),
+              title: Text("game_rank".tr),
+              onTap: (){},
+            ),
+            ListTile(
+              leading: const Icon(Icons.router),
+              title: Text("my_route".tr),
+              onTap: (){},
+            ),
+            ListTile(
+              leading: const Icon(Icons.history_sharp),
+              title: Text("visit_history".tr),
+              onTap: (){},
+            ),
+          ],
+        ),
       ),
     );
   }

lib/pages/home/home_binding.dart

@@ -1,12 +0,0 @@
-import 'package:get/get_core/src/get_main.dart';
-import 'package:get/get_instance/src/bindings_interface.dart';
-import 'package:get/get_instance/src/extension_instance.dart';
-import 'package:rogapp/pages/home/home_controller.dart';
-
-
-class HomeBinding extends Bindings {
-  @override
-  void dependencies() {
-    Get.put<HomeController>(HomeController());
-  }
-}

lib/pages/home/home_binding_t.dart

@@ -0,0 +1,13 @@
+// import 'package:flutter_map/flutter_map.dart';
+// import 'package:get/get_core/src/get_main.dart';
+// import 'package:get/get_instance/src/bindings_interface.dart';
+// import 'package:get/get_instance/src/extension_instance.dart';
+// import 'package:rogapp/pages/home/home_controller.dart';
+
+
+// class HomeBinding extends Bindings {
+//   @override
+//   void dependencies() {
+//     Get.put<HomeController>(HomeController());
+//   }
+// }

lib/pages/home/home_controller_t.dart

@@ -0,0 +1,199 @@
+
+
+// import 'package:flutter_map/plugin_api.dart';
+// import 'package:geojson/geojson.dart';
+// import 'package:get/get.dart';
+// import 'package:latlong2/latlong.dart';
+// import 'package:meta/meta.dart';
+// import 'package:rogapp/pages/map/map_page.dart';
+// import 'package:rogapp/services/location_service.dart';
+// import 'package:rogapp/services/perfecture_service.dart';
+
+// class HomeController extends GetxController {
+
+//   List<GeoJsonFeatureCollection> locations = <GeoJsonFeatureCollection>[].obs;
+//   List<GeoJsonFeature> currentFeature = <GeoJsonFeature>[].obs;
+//   List<dynamic> perfectures = <dynamic>[].obs;
+//   List<LatLngBounds> currentBound = <LatLngBounds>[].obs;
+//   List<dynamic> subPerfs = <dynamic>[].obs;
+
+//   String SubDropdownValue = "-1";
+
+
+//   @override
+//   void onInit() {
+//     super.onInit();
+
+//     if(locations.length == 0){
+//       LocationService.loadLocations().then((value){
+//         locations.add(value!);
+//       //print(value);
+//       });
+//     }
+//     if(perfectures.length == 0){
+//       PerfectureService.loadPerfectures().then((value){
+//         perfectures.add(value);
+//         loadSubPerfFor("9");
+//       });
+//     }
+//   }
+
+//    void getBoundFromLatLng(List<LatLng> list) {
+//     double? x0, x1, y0, y1;
+//     for (LatLng latLng in list) {
+//       if (x0 == null) {
+//         x0 = x1 = latLng.latitude;
+//         y0 = y1 = latLng.longitude;
+//       } else {
+//         if (latLng.latitude > x1!) x1 = latLng.latitude;
+//         if (latLng.latitude < x0) x0 = latLng.latitude;
+//         if (latLng.longitude > y1!) y1 = latLng.longitude;
+//         if (latLng.longitude < y0!) y0 = latLng.longitude;
+//       }
+//     }
+//     currentBound.clear();
+//     if(x0 != null && x1 != null && y0 != null && y1 != null ){
+//       currentBound.add(LatLngBounds(LatLng(x1, y1), LatLng(x0, y0)));
+//     }
+//   }
+
+//   void setBounds(){
+//     List<LatLng> lts = [];
+//     if(locations.length > 0){
+//           for(GeoJsonFeature i in locations[0].collection){
+//             GeoJsonMultiPoint p = i.geometry as GeoJsonMultiPoint;
+//             LatLng lt = LatLng(p.geoSerie!.geoPoints[0].latitude , p.geoSerie!.geoPoints[0].longitude) ;
+//             lts.add(lt);
+//         }
+//       }
+//       else{
+//         LatLng lt = LatLng(37.15319600454702, 139.58765950528198);
+//         lts.add(lt);
+//       }
+//       getBoundFromLatLng(lts);
+//   }
+
+//   void zoomtoMainPerf(String id, MapController mapController){
+    
+//     PerfectureService.getMainPerfExt(id).then((value){
+//       print(value);
+//       LatLng lat1 = LatLng(value![1], value[0]);
+//       LatLng lat2 = LatLng(value[3], value[2]);
+//       LatLngBounds bound = LatLngBounds(lat1, lat2);
+//       mapController.fitBounds(bound);
+//     });
+    
+//   }
+
+//   void zoomtoSubPerf(String id, MapController mapController){
+    
+//     PerfectureService.getSubExt(id).then((value){
+//       LatLng lat1 = LatLng(value![1], value[0]);
+//       LatLng lat2 = LatLng(value[3], value[2]);
+//       LatLngBounds bound = LatLngBounds(lat1, lat2);
+//       mapController.fitBounds(bound);
+//     });
+    
+//   }
+
+//   void loadLocationforPerf(String perf, MapController mapController) async {
+//     locations.clear();
+//     LocationService.loadLocationsFor(perf).then((value){
+//       locations.add(value!);
+//        setBounds();
+//        mapController.fitBounds(currentBound[0]);
+//     });
+//   }
+
+//     void loadLocationforSubPerf(String subperf, MapController mapController) async {
+//     locations.clear();
+//     LocationService.loadLocationsSubFor(subperf).then((value){
+//       locations.add(value!);
+//        //setBounds();
+//        //mapController!.fitBounds(currentBound[0]);
+//     });
+//   }
+
+//   void loadSubPerfFor(String perf){
+//     subPerfs.clear();
+//     dynamic initVal = {'id':'-1', 'adm2_ja':'----'};
+//     PerfectureService.loadSubPerfectures(perf).then((value){
+//       value!.add(initVal);
+//       subPerfs.add(value);
+//       SubDropdownValue = getSubInitialVal();
+//       //print(subPerfs[0]);
+//     });
+//   }
+
+//   String getSubInitialVal(){
+//     int min = 0;
+//     if(subPerfs.length > 0){
+//       min = subPerfs[0][0]['id'] as int;
+//       for(var sub in subPerfs[0]){
+//         int x = int.parse(sub['id'].toString()); // as int;
+//         if(x < min){
+//           min = x;
+//         }
+//       }
+//     }
+//     return min.toString();
+//   }
+
+//   GeoJsonFeature? getFeatureForLatLong(double lat, double long){
+//       if(locations.length > 0){
+//           for(GeoJsonFeature i in locations[0].collection){
+//             GeoJsonMultiPoint p = i.geometry as GeoJsonMultiPoint;
+//             if(p.geoSerie!.geoPoints[0].latitude == lat && p.geoSerie!.geoPoints[0].longitude  == long){
+//               return i;
+//           }
+//         }
+//       }
+//   }
+
+//   void makeNext(GeoJsonFeature fs){
+//     GeoJsonFeature<GeoJsonMultiPoint> pt = fs  as GeoJsonFeature<GeoJsonMultiPoint>;
+
+//     for(int i=0; i<= locations[0].collection.length - 1; i++){
+//       GeoJsonMultiPoint p = locations[0].collection[i].geometry as GeoJsonMultiPoint;
+
+//       if(p.geoSerie!.geoPoints[0].latitude == pt.geometry!.geoSerie!.geoPoints[0].latitude && p.geoSerie!.geoPoints[0].longitude  == pt.geometry!.geoSerie!.geoPoints[0].longitude ){
+          
+//           if(currentFeature.length > 0){
+//             currentFeature.clear();
+//           }
+//           if(i >= locations[0].collection.length - 1 ){
+//             currentFeature.add(locations[0].collection[0] as GeoJsonFeature);
+//           }
+//           else{
+//             currentFeature.add(locations[0].collection[i + 1] as GeoJsonFeature);
+//           }
+//       }
+//     }
+
+//   }
+
+//   void makePrevious(GeoJsonFeature fs){
+//     GeoJsonFeature<GeoJsonMultiPoint> pt = fs  as GeoJsonFeature<GeoJsonMultiPoint>;
+
+//     for(int i=0; i<= locations[0].collection.length - 1; i++){
+//       GeoJsonMultiPoint p = locations[0].collection[i].geometry as GeoJsonMultiPoint;
+
+//       if(p.geoSerie!.geoPoints[0].latitude == pt.geometry!.geoSerie!.geoPoints[0].latitude && p.geoSerie!.geoPoints[0].longitude  == pt.geometry!.geoSerie!.geoPoints[0].longitude ){
+          
+//           if(currentFeature.length > 0){
+//             currentFeature.clear();
+//           }
+//           if(i == 0 ){
+//             currentFeature.add(locations[0].collection[locations[0].collection.length -1] as GeoJsonFeature);
+//           }
+//           else{
+//             currentFeature.add(locations[0].collection[i - 1] as GeoJsonFeature);
+//           }
+//       }
+//     }
+
+//   }
+
+
+  
+// }

lib/pages/home/home_page.dart

@@ -1,122 +0,0 @@
-
-import 'dart:ui';
-
-import 'package:flutter/material.dart';
-import 'package:geojson/geojson.dart';
-import 'package:get/get.dart';
-import 'package:rogapp/pages/drawer/drawer_page.dart';
-import 'package:rogapp/pages/home/home_controller.dart';
-import 'package:rogapp/routes/app_pages.dart';
-import 'package:rogapp/services/perfecture_service.dart';
-import 'package:rogapp/widgets/bottom_sheet_widget.dart';
-import 'package:flutter_breadcrumb/flutter_breadcrumb.dart';
-
-class HomePage extends GetView<HomeController> {
-
-  final HomeController homeController = Get.find<HomeController>();
-
-
-  void changeCurrentFeature(GeoJsonFeature fs){
-    if(homeController.currentFeature.length > 0){
-      homeController.currentFeature.clear();
-    }
-    homeController.currentFeature.add(fs);
-  }
-
-  Image getImage(int index){
-    if(homeController.locations[0].collection[index].properties!["photos"] == null || homeController.locations[0].collection[index].properties!["photos"] == ""){
-      return Image(image: AssetImage('assets/images/empty_image.png'));
-    }
-    else{
-      return Image(image: NetworkImage(homeController.locations[0].collection[index].properties!["photos"]));
-    }
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      drawer: DrawerPage(),
-      appBar: AppBar(
-        title: Text("app_title".tr),
-        centerTitle: true,
-        actions: [
-          IconButton(
-            icon: const Icon(Icons.map),
-            onPressed: (){
-                //print(homeController.locations.length);
-              },
-          )
-        ],
-      ),
-            floatingActionButton: new FloatingActionButton(
-        onPressed: (){
-           Get.toNamed(AppPages.MAP);
-        },
-        tooltip: 'Increment',
-        child: new Icon(Icons.document_scanner),
-        elevation: 4.0,
-      ),
-      bottomNavigationBar: BottomAppBar(
-        child: new Row(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: <Widget>[
-            Expanded(child: IconButton(icon: Icon(Icons.camera_enhance), onPressed: (){},),),
-            Expanded(child: new Text('')),
-            Expanded(child: IconButton(icon: Icon(Icons.travel_explore), onPressed: (){}),),
-          ],
-        ),
-      ),
-      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
-      body:Column(
-        children: [
-          Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 8.0),
-            child: Container(
-              alignment: Alignment.centerLeft,
-              height: 50.0,
-              child: BreadCrumb(
-                items: <BreadCrumbItem>[
-                  BreadCrumbItem(
-                    content: ElevatedButton(child: Text("Press"), onPressed: (){
-                      print("-----");
-                      print(homeController.perfectures[0][0]);
-                    },)
-                    ),
-		              BreadCrumbItem(content: Text('Item2', style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),)),
-                ],
-                divider: Icon(Icons.chevron_right),
-              ),
-            ),
-          ),
-          Expanded(
-            child: Obx(() =>
-              homeController.locations.length > 0 ?
-              ListView.builder(
-              itemCount: homeController.locations[0].collection.length,
-              shrinkWrap: true,
-              itemBuilder: (_, index){
-                return Card(
-                  child: ListTile(
-                    onTap: (){
-                      GeoJsonFeature gf = homeController.locations[0].collection[index];
-                      changeCurrentFeature(gf);
-                      showModalBottomSheet(
-                          isScrollControlled: true,
-                          context: context,
-                          builder: (context) => BottomSheetWidget(),
-                        );
-                    },
-                    leading: getImage(index),
-                    title: Text(homeController.locations[0].collection[index].properties!['location_name'].toString()),
-                    subtitle: Text(homeController.locations[0].collection[index].properties!['category']),
-                  ),
-                );
-              },
-            ) : Container(width: 0, height: 0,),
-            )
-          )
-        ],
-      )
-    );
-  }
-}

lib/pages/home/home_page_t.dart

@@ -0,0 +1,129 @@
+
+// import 'dart:ui';
+
+// import 'package:flutter/material.dart';
+// import 'package:flutter_map/plugin_api.dart';
+// import 'package:geojson/geojson.dart';
+// import 'package:get/get.dart';
+// import 'package:rogapp/pages/drawer/drawer_page.dart';
+// import 'package:rogapp/pages/home/home_controller.dart';
+// import 'package:rogapp/routes/app_pages.dart';
+// import 'package:rogapp/services/perfecture_service.dart';
+// import 'package:rogapp/widgets/bottom_sheet_widget.dart';
+// import 'package:flutter_breadcrumb/flutter_breadcrumb.dart';
+// import 'package:rogapp/widgets/perfecture_widget.dart';
+
+// class HomePage extends GetView<HomeController> {
+
+//   final HomeController homeController = Get.find<HomeController>();
+//   MapController mapController = Get.arguments[0];
+
+//   void changeCurrentFeature(GeoJsonFeature fs){
+//     if(homeController.currentFeature.length > 0){
+//       homeController.currentFeature.clear();
+//     }
+//     homeController.currentFeature.add(fs);
+//   }
+
+//   Image getImage(int index){
+//     if(homeController.locations[0].collection[index].properties!["photos"] == null || homeController.locations[0].collection[index].properties!["photos"] == ""){
+//       return Image(image: AssetImage('assets/images/empty_image.png'));
+//     }
+//     else{
+//       return Image(image: NetworkImage(homeController.locations[0].collection[index].properties!["photos"]));
+//     }
+//   }
+
+// Widget getBreadCurms(){
+//     return Obx(() =>
+//                   homeController.perfectures.length > 0 ?
+//                   BreadCrumb.builder(
+//                   itemCount: homeController.perfectures.length,
+//                   builder: (index) {
+//                     return BreadCrumbItem(
+//                       content: PerfectureWidget(homeController: homeController, mapController: mapController) //Text('Item$index')
+//                       );
+//                   },
+//                   divider: Icon(Icons.chevron_right),
+//                 ) : 
+//                 Container(width: 0, height: 0,), 
+//                 );
+//   }
+
+//   @override
+//   Widget build(BuildContext context) {
+//     return Scaffold(
+//       drawer: DrawerPage(),
+//       appBar: AppBar(
+//         title: Text("app_title".tr),
+//         centerTitle: true,
+//         actions: [
+//           IconButton(
+//             icon: const Icon(Icons.map),
+//             onPressed: (){
+//                 //print(homeController.locations.length);
+//               },
+//           )
+//         ],
+//       ),
+//             floatingActionButton: new FloatingActionButton(
+//         onPressed: (){
+//            Get.toNamed(AppPages.MAP);
+//         },
+//         tooltip: 'Increment',
+//         child: new Icon(Icons.document_scanner),
+//         elevation: 4.0,
+//       ),
+//       bottomNavigationBar: BottomAppBar(
+//         child: new Row(
+//           mainAxisAlignment: MainAxisAlignment.center,
+//           children: <Widget>[
+//             Expanded(child: IconButton(icon: Icon(Icons.camera_enhance), onPressed: (){},),),
+//             Expanded(child: new Text('')),
+//             Expanded(child: IconButton(icon: Icon(Icons.travel_explore), onPressed: (){}),),
+//           ],
+//         ),
+//       ),
+//       floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
+//       body:Column(
+//         children: [
+//           Padding(
+//             padding: const EdgeInsets.symmetric(horizontal: 8.0),
+//             child: Container(
+//               alignment: Alignment.centerLeft,
+//               height: 50.0,
+//               child: getBreadCurms(),
+//             ),
+//           ),
+//           Expanded(
+//             child: Obx(() =>
+//               homeController.locations.length > 0 ?
+//               ListView.builder(
+//               itemCount: homeController.locations[0].collection.length,
+//               shrinkWrap: true,
+//               itemBuilder: (_, index){
+//                 return Card(
+//                   child: ListTile(
+//                     onTap: (){
+//                       GeoJsonFeature gf = homeController.locations[0].collection[index];
+//                       changeCurrentFeature(gf);
+//                       showModalBottomSheet(
+//                           isScrollControlled: true,
+//                           context: context,
+//                           builder: (context) => BottomSheetWidget(),
+//                         );
+//                     },
+//                     leading: getImage(index),
+//                     title: Text(homeController.locations[0].collection[index].properties!['location_name'].toString()),
+//                     subtitle: Text(homeController.locations[0].collection[index].properties!['category']),
+//                   ),
+//                 );
+//               },
+//             ) : Container(width: 0, height: 0,),
+//             )
+//           )
+//         ],
+//       )
+//     );
+//   }
+// }

lib/pages/map/map_binding_t.dart

@@ -0,0 +1,14 @@
+// import 'package:flutter_map/flutter_map.dart';
+// import 'package:get/get_core/src/get_main.dart';
+// import 'package:get/get_instance/src/bindings_interface.dart';
+// import 'package:get/get_instance/src/extension_instance.dart';
+// import 'package:rogapp/pages/home/home_controller.dart';
+
+
+// class MapBinding extends Bindings {
+//   @override
+//   void dependencies() {
+//     Get.put<HomeController>(HomeController());
+//     Get.put<MapController>(MapController());
+//   }
+// }

lib/pages/map/map_page_t.dart

@@ -0,0 +1,181 @@
+// import 'package:flutter/material.dart';
+// import 'package:flutter/rendering.dart';
+// import 'package:flutter_breadcrumb/flutter_breadcrumb.dart';
+// import 'package:flutter_map/plugin_api.dart';
+// import 'package:flutter_map_location_marker/flutter_map_location_marker.dart';
+// import 'package:geojson/geojson.dart';
+// import 'package:get/get.dart';
+// import 'package:get/get_state_manager/get_state_manager.dart';
+// import 'package:latlong2/latlong.dart';
+// import 'package:rogapp/pages/drawer/drawer_page.dart';
+// import 'package:rogapp/pages/home/home_controller.dart';
+// import 'package:flutter_map_marker_cluster/flutter_map_marker_cluster.dart';
+// import 'package:rogapp/routes/app_pages.dart';
+// import 'package:rogapp/widgets/base_layer_widget.dart';
+// import 'package:rogapp/widgets/bottom_sheet_widget.dart';
+// import 'package:rogapp/widgets/perfecture_widget.dart';
+
+
+// class MapPage extends GetView<HomeController> {
+//   MapPage({ Key? key }) : super(key: key);
+
+//   final HomeController homeController = Get.find<HomeController>();
+//   final MapController mapController = MapController();
+
+
+//   Widget getBreadCurms(){
+//     return Obx(() =>
+//                   homeController.perfectures.length > 0 ?
+//                   BreadCrumb.builder(
+//                   itemCount: homeController.perfectures.length,
+//                   builder: (index) {
+//                     return BreadCrumbItem(
+//                       content: PerfectureWidget(homeController: homeController, mapController: mapController) //Text('Item$index')
+//                       );
+//                   },
+//                   divider: Icon(Icons.chevron_right),
+//                 ) : 
+//                 Container(width: 0, height: 0,), 
+//                 );
+//   }
+
+
+//   @override
+//   Widget build(BuildContext context) {
+    
+//     final PopupController _popupController = PopupController();
+
+//     return Scaffold(
+//       drawer: DrawerPage(),
+//       appBar: AppBar(
+//         title: Text("app_title".tr),
+//         actions: [
+//           IconButton(
+//             icon: const Icon(Icons.map),
+//             onPressed: () => {print("action")},
+//           )
+
+//         ],
+//       ),
+//       bottomNavigationBar: BottomAppBar(
+//         child: new Row(
+//           mainAxisAlignment: MainAxisAlignment.center,
+//           children: <Widget>[
+//             Expanded(child: IconButton(icon: Icon(Icons.camera_enhance), onPressed: (){},),),
+//             Expanded(child: new Text('')),
+//             Expanded(child: IconButton(icon: Icon(Icons.travel_explore), onPressed: (){}),),
+//           ],
+//         ),
+//       ),
+//       floatingActionButton: new FloatingActionButton(
+//         onPressed: (){
+//           Get.toNamed(AppPages.INITIAL, arguments: [mapController]);
+//         },
+//         tooltip: 'Increment',
+//         child: new Icon(Icons.document_scanner),
+//         elevation: 4.0,
+//       ),
+//       floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
+//       body: SafeArea(
+//         child: Column(
+//           children: [
+//             Container(
+//               padding: EdgeInsets.symmetric(horizontal: 16.0),
+//               alignment: Alignment.centerLeft,
+//               height: 50.0,
+//               child: SingleChildScrollView(
+//                 scrollDirection: Axis.horizontal,
+//                 child: 
+//                 getBreadCurms(),
+//               ),
+//             ),
+//             Expanded(
+//               child: Obx(() => 
+//                 Stack(
+//                   children: [
+//                     FlutterMap(
+//                       mapController: mapController,
+//                       options: MapOptions(
+                          
+//                           //center: LatLng(37.15319600454702, 139.58765950528198),
+//                           bounds: homeController.currentBound.length > 0 ? homeController.currentBound[0]: LatLngBounds.fromPoints([LatLng(37.15319600454702, 139.58765950528198)]),
+//                           zoom: 6,
+//                           maxZoom: 20,
+//                           plugins: [
+//                             MarkerClusterPlugin(),
+//                           ],
+//                           onTap: (_, __) =>
+//                               _popupController
+//                                   .hideAllPopups(), // Hide popup when the map is tapped.
+//                         ),
+//                         children: [
+//                           BaseLayer(),
+//                           LocationMarkerLayerWidget(),
+//                           homeController.locations.length > 0 ?
+//                           MarkerClusterLayerWidget(
+//                             options: MarkerClusterLayerOptions(
+//                               spiderfyCircleRadius: 80,
+//                               spiderfySpiralDistanceMultiplier: 2,
+//                               circleSpiralSwitchover: 12,
+//                               maxClusterRadius: 20,
+//                               rotate: true,
+//                               onMarkerTap: (marker){
+//                                 GeoJsonFeature? fs = homeController.getFeatureForLatLong(marker.point.latitude, marker.point.longitude);
+//                                 print(fs);
+//                                 if(fs != null){
+//                                   if(homeController.currentFeature.length > 0) {
+//                                     homeController.currentFeature.clear();
+//                                   }
+//                                   homeController.currentFeature.add(fs);
+            
+//                                   showModalBottomSheet(context: context, isScrollControlled: true, 
+//                                     builder:((context) => BottomSheetWidget())
+//                                   );
+//                                 }
+                                
+//                               },
+            
+//                               size: Size(40, 40),
+//                               anchor: AnchorPos.align(AnchorAlign.center),
+//                               fitBoundsOptions: const FitBoundsOptions(
+//                                 padding: EdgeInsets.all(50),
+//                                 maxZoom: 265,
+//                               ),
+//                               markers:homeController.locations[0].collection.map((i) {
+//                                 GeoJsonMultiPoint p = i.geometry as GeoJsonMultiPoint;
+//                                 return Marker(
+//                                   anchorPos: AnchorPos.align(AnchorAlign.center),
+//                                   height: 70.0,
+//                                   width: 70.0,
+//                                   point: LatLng(p.geoSerie!.geoPoints[0].latitude, p.geoSerie!.geoPoints[0].longitude),
+//                                   builder: (ctx) => Icon(Icons.pin_drop),
+//                                 );
+//                               }).toList(),
+//                               builder: (context, markers) {
+//                                 return Container(
+//                                   decoration: BoxDecoration(
+//                                       borderRadius: BorderRadius.circular(20.0),
+//                                       color: Colors.blue),
+//                                   child: Center(
+//                                     child: Text(
+//                                       markers.length.toString(),
+//                                       style: TextStyle(color: Colors.white),
+//                                     ),
+//                                   ),
+//                                 );
+//                               },
+//                             ),
+//                           ): Container(height:0,width: 0),
+//                         ],
+//                     )
+//                   ],
+//                 )
+//               ),
+//             ),
+//           ],
+//         ),
+//       ),
+//     );
+//   }
+// }
+

lib/routes/app_pages.dart

@@ -1,24 +1,38 @@
 import 'package:get/get_navigation/src/routes/get_route.dart';
-import 'package:rogapp/pages/home/home_binding.dart';
+import 'package:rogapp/index/index_binding.dart';
-import 'package:rogapp/pages/home/home_page.dart';
+import 'package:rogapp/index/index_page.dart';
-import 'package:rogapp/pages/map/map_page.dart';
+import 'package:rogapp/spa/spa_binding.dart';
+import 'package:rogapp/spa/spa_page.dart';
 
 
 part 'app_routes.dart';
 
 class AppPages {
-  static const INITIAL = Routes.HOME;
+  // ignore: constant_identifier_names
-  static const MAP = Routes.MAP;
+  static const INITIAL = Routes.INDEX;
+  // ignore: constant_identifier_names
+  static const SPA = Routes.SPA;
 
   static final routes = [
+    // GetPage(
+    //   name: Routes.HOME,
+    //   page: () => HomePage(),
+    //   binding: HomeBinding(),
+    // ),
+    // GetPage(
+    //   name: Routes.MAP,
+    //   page: () => MapPage(),
+    //   binding: MapBinding(),
+    // )
     GetPage(
-      name: Routes.HOME,
+      name: Routes.INDEX,
-      page: () => HomePage(),
+      page: () => IndexPage(),
-      binding: HomeBinding(),
+      binding: IndexBinding(),
     ),
     GetPage(
-      name: Routes.MAP,
+      name: Routes.SPA,
-      page: () => MapPage()
+      page: () => const SpaPage(),
+      binding: SpaBinding(),
     )
   ];
 }

lib/routes/app_routes.dart

@@ -2,6 +2,10 @@ part of 'app_pages.dart';
 
 abstract class Routes {
   // Main Menu Route
-  static const HOME = '/';
+  // static const HOME = '/';
-  static const MAP = '/map';
+  // static const MAP = '/map';
+  // ignore: constant_identifier_names
+  static const INDEX = '/';
+  // ignore: constant_identifier_names
+  static const SPA = '/spa';
 }

lib/services/location_service.dart

@@ -6,8 +6,6 @@ import 'package:http/http.dart' as http;
 class LocationService{
 
    static Future<GeoJsonFeatureCollection?> loadLocations() async {
-    final geo = GeoJson();
-    GeoJsonFeatureCollection? fs;
     String url = 'http://localhost:8100/api/location/';
     final response = await http.get(Uri.parse(url),
       headers: <String, String>{
@@ -19,11 +17,10 @@ class LocationService{
 
     return featuresFromGeoJson(utf8.decode(response.bodyBytes));
     }
+    return null;
   }
 
   static Future<GeoJsonFeatureCollection?> loadLocationsFor(String perfecture) async {
-    final geo = GeoJson();
-    GeoJsonFeatureCollection? fs;
     String url = 'http://localhost:8100/api/inperf/?perf=' + perfecture;
     final response = await http.get(Uri.parse(url),
       headers: <String, String>{
@@ -33,8 +30,27 @@ class LocationService{
 
     if (response.statusCode == 200) {
       GeoJsonFeatureCollection cc =  await featuresFromGeoJson(utf8.decode(response.bodyBytes));
+      //print(cc);
       return cc; //featuresFromGeoJson(utf8.decode(response.bodyBytes));
     }
+    return null;
+  }
+
+
+  static Future<GeoJsonFeatureCollection?> loadLocationsSubFor(String subperfecture) async {
+    String url = 'http://localhost:8100/api/insubperf?subperf=' + subperfecture;
+    final response = await http.get(Uri.parse(url),
+      headers: <String, String>{
+        'Content-Type': 'application/json; charset=UTF-8',
+      },
+    );
+
+    if (response.statusCode == 200) {
+      GeoJsonFeatureCollection cc =  await featuresFromGeoJson(utf8.decode(response.bodyBytes));
+      //print(cc);
+      return cc; //featuresFromGeoJson(utf8.decode(response.bodyBytes));
+    }
+    return null;
   }
 
 

lib/services/perfecture_service.dart

@@ -22,7 +22,8 @@ class PerfectureService{
 
   static Future<List<dynamic>?> loadSubPerfectures(String sub) async {
     List<dynamic> perfs = [];
-    String url = 'http://localhost:8100/api/insubperf/?perf=' + sub;
+    String url = 'http://localhost:8100/api/subperfinmain/?perf=' + sub;
+    //String url = 'http://container.intranet.sumasen.net:8100/api/insubperf/?perf=' + sub;
     final response = await http.get(Uri.parse(url),
       headers: <String, String>{
         'Content-Type': 'application/json; charset=UTF-8',
@@ -37,5 +38,40 @@ class PerfectureService{
   }
 
 
+  static Future<List<dynamic>?> getMainPerfExt(String id) async {
+    List<dynamic> perfs = [];
+    String url = 'http://localhost:8100/api/mainperfext/?perf=' + id;
+    final response = await http.get(Uri.parse(url),
+      headers: <String, String>{
+        'Content-Type': 'application/json; charset=UTF-8',
+      },
+    );
+
+    if (response.statusCode == 200) {
+
+      perfs = json.decode(utf8.decode(response.bodyBytes));
+    }
+    return perfs;
+  }
+
+
+  static Future<List<dynamic>?> getSubExt(String id) async {
+    List<dynamic> perfs = [];
+    String url = 'http://localhost:8100/api/perfext/?sub_perf=' + id;
+    final response = await http.get(Uri.parse(url),
+      headers: <String, String>{
+        'Content-Type': 'application/json; charset=UTF-8',
+      },
+    );
+
+    if (response.statusCode == 200) {
+
+      perfs = json.decode(utf8.decode(response.bodyBytes));
+    }
+    return perfs;
+  }
+
+
+
 }
 

lib/spa/spa_binding.dart

@@ -0,0 +1,10 @@
+
+import 'package:get/get.dart';
+import 'package:rogapp/spa/spa_controller.dart';
+
+class SpaBinding extends Bindings {
+  @override
+  void dependencies() {
+    Get.put<SpaController>(SpaController());
+  }
+}

lib/spa/spa_controller.dart

@@ -0,0 +1,7 @@
+
+
+import 'package:get/get.dart';
+
+class SpaController extends GetxController {
+
+}

lib/spa/spa_page.dart

@@ -0,0 +1,13 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:rogapp/spa/spa_controller.dart';
+
+class SpaPage extends GetView<SpaController> {
+  const SpaPage({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    throw UnimplementedError();
+  }
+
+}

lib/utils/string_values.dart

@@ -2,7 +2,6 @@ import 'package:get/get.dart';
 
 class StringValues extends Translations{
   @override
-  // TODO: implement keys
   Map<String, Map<String, String>> get keys => {
     'en_US': {
       'app_title': '- Rogaining -',

lib/widgets/bottom_sheet_controller.dart

@@ -8,11 +8,4 @@ class BottomSheetController extends GetxController{
   List<GeoJsonFeature>? currentFeature = <GeoJsonFeature>[];
 
   BottomSheetController({this.currentFeature});
-
-   @override
-  void onInit() {
-    super.onInit();
-  }
-
-
 }

lib/widgets/bottom_sheet_widget.dart

@@ -1,13 +1,13 @@
 import 'package:flutter/material.dart';
 import 'package:geojson/geojson.dart';
 import 'package:get/get.dart';
-import 'package:rogapp/pages/home/home_controller.dart';
+import 'package:rogapp/index/index_controller.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 class BottomSheetWidget extends StatelessWidget {
   //const BottomSheetWidget({ Key? key }, GeoJsonFeature? pt) : super(key: key);
 
-  final HomeController homeController = Get.find<HomeController>();
+  final IndexController indexController = Get.find<IndexController>();
 
   Image getImage(GeoJsonFeature? gf){
     if(gf!.properties!["photos"] == null || gf.properties!["photos"] == ""){
@@ -47,7 +47,7 @@ class BottomSheetWidget extends StatelessWidget {
             children: [
               MaterialButton(
                 onPressed: () {
-                  homeController.makePrevious(homeController.currentFeature[0]);
+                  indexController.makePrevious(indexController.currentFeature[0]);
                 },
                 color: Colors.blue,
                 textColor: Colors.white,
@@ -62,7 +62,7 @@ class BottomSheetWidget extends StatelessWidget {
                 child: Container(
                   alignment: Alignment.center,
                   child:  Obx(() => 
-                    Text(homeController.currentFeature[0].properties!["location_name"], style: TextStyle(
+                    Text(indexController.currentFeature[0].properties!["location_name"], style: TextStyle(
                     fontSize: 15.0,
                     fontWeight: FontWeight.bold,
                   ),
@@ -72,7 +72,7 @@ class BottomSheetWidget extends StatelessWidget {
               ),
               MaterialButton(
                 onPressed: () {
-                   homeController.makeNext(homeController.currentFeature[0]);
+                   indexController.makeNext(indexController.currentFeature[0]);
                 },
                 color: Colors.blue,
                 textColor: Colors.white,
@@ -90,7 +90,7 @@ class BottomSheetWidget extends StatelessWidget {
               Expanded(
                 child: SizedBox(
                   height: 360.0,
-                  child: Obx(() => getImage(homeController.currentFeature[0])),
+                  child: Obx(() => getImage(indexController.currentFeature[0])),
                 )
               ),
             ],
@@ -102,7 +102,7 @@ class BottomSheetWidget extends StatelessWidget {
                   padding: const EdgeInsets.symmetric(horizontal: 24.0),
                   child: Column(
                     children: [
-                      homeController.currentFeature[0].properties!["address"] != null ?
+                      indexController.currentFeature[0].properties!["address"] != null ?
                       Row(
                         mainAxisAlignment: MainAxisAlignment.center,
                         children: [
@@ -115,7 +115,7 @@ class BottomSheetWidget extends StatelessWidget {
                           Expanded(
                             child: Container(
                               alignment: Alignment.topLeft,
-                              child: Obx(() => Text(homeController.currentFeature[0].properties!["address"] ?? '',
+                              child: Obx(() => Text(indexController.currentFeature[0].properties!["address"] ?? '',
                               style: TextStyle(color: Colors.blue,),
                               softWrap: true,
                               overflow: TextOverflow.ellipsis,)
@@ -124,7 +124,7 @@ class BottomSheetWidget extends StatelessWidget {
                           )
                         ],
                       ): Container(width: 0.0, height: 0,),
-                      homeController.currentFeature[0].properties!["phone"] != null ?
+                      indexController.currentFeature[0].properties!["phone"] != null ?
                       Row(
                         mainAxisAlignment: MainAxisAlignment.center,
                         children: [
@@ -135,7 +135,7 @@ class BottomSheetWidget extends StatelessWidget {
                           Expanded(
                             child: Container(
                               alignment: Alignment.topLeft,
-                              child: Obx(() => Text(homeController.currentFeature[0].properties!["phone"] ?? '',
+                              child: Obx(() => Text(indexController.currentFeature[0].properties!["phone"] ?? '',
                               style: TextStyle(color: Colors.blue,),
                               overflow: TextOverflow.ellipsis,)
                               ),
@@ -143,7 +143,7 @@ class BottomSheetWidget extends StatelessWidget {
                           )
                         ],
                       ): Container(width: 0, height: 0,),
-                      homeController.currentFeature[0].properties!["email"] != null ?
+                      indexController.currentFeature[0].properties!["email"] != null ?
                       Row(
                         mainAxisAlignment: MainAxisAlignment.center,
                         children: [
@@ -154,7 +154,7 @@ class BottomSheetWidget extends StatelessWidget {
                           Expanded(
                             child: Container(
                               alignment: Alignment.topLeft,
-                              child: Obx(() => Text(homeController.currentFeature[0].properties!["email"] ?? '',
+                              child: Obx(() => Text(indexController.currentFeature[0].properties!["email"] ?? '',
                               style: TextStyle(color: Colors.blue,),
                               overflow: TextOverflow.ellipsis,)
                               ),
@@ -162,7 +162,7 @@ class BottomSheetWidget extends StatelessWidget {
                           )
                         ],
                       ): Container(width: 0, height: 0,),
-                      homeController.currentFeature[0].properties!["webcontents"] != null ?
+                      indexController.currentFeature[0].properties!["webcontents"] != null ?
                       Row(
                         mainAxisAlignment: MainAxisAlignment.center,
                         children: [
@@ -176,9 +176,9 @@ class BottomSheetWidget extends StatelessWidget {
                               alignment: Alignment.topLeft,
                               child: Obx(() => InkWell(
                               onTap: (){
-                                _launchURL(homeController.currentFeature[0].properties!["webcontents"]);
+                                _launchURL(indexController.currentFeature[0].properties!["webcontents"]);
                               },
-                              child: Text(homeController.currentFeature[0].properties!["webcontents"] ?? '',
+                              child: Text(indexController.currentFeature[0].properties!["webcontents"] ?? '',
                               style: TextStyle(color: Colors.blue,),
                               softWrap: false,
                               overflow: TextOverflow.fade,),
@@ -187,7 +187,7 @@ class BottomSheetWidget extends StatelessWidget {
                           )
                         ],
                       ): Container(width: 0.0, height: 0.0,),
-                      homeController.currentFeature[0].properties!["videos"] != null ?
+                      indexController.currentFeature[0].properties!["videos"] != null ?
                       Row(
                         mainAxisAlignment: MainAxisAlignment.center,
                         children: [
@@ -198,7 +198,7 @@ class BottomSheetWidget extends StatelessWidget {
                           Expanded(
                             child: Container(
                               alignment: Alignment.topLeft,
-                              child: Obx(() => Text(homeController.currentFeature[0].properties!["videos"] ?? '',
+                              child: Obx(() => Text(indexController.currentFeature[0].properties!["videos"] ?? '',
                               style: TextStyle(color: Colors.blue,),
                               overflow: TextOverflow.ellipsis,)
                               ),

lib/widgets/bread_crum_widget.dart

@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_map/flutter_map.dart';
+import 'package:get/get.dart';
+import 'package:flutter_breadcrumb/flutter_breadcrumb.dart';
+import 'package:rogapp/index/index_controller.dart';
+import 'package:rogapp/widgets/perfecture_widget.dart';
+
+class BreadCrumbWidget extends StatelessWidget {
+  BreadCrumbWidget({Key? key}) : super(key: key);
+
+  final IndexController indexController = Get.find<IndexController>();
+
+  @override
+  Widget build(BuildContext context) {
+    return Obx(()=> indexController.perfectures.isNotEmpty ?
+      BreadCrumb.builder(
+         itemCount: indexController.perfectures.length, 
+         builder: (index){
+           return BreadCrumbItem(
+             content: PerfectureWidget(indexController: indexController, mapController: indexController.mapController!) //Text('Item$index')
+            );
+         }
+      ): 
+      const Text("Empty"));
+  }
+}

lib/widgets/list_widget.dart

@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+import 'package:geojson/geojson.dart';
+import 'package:get/get.dart';
+import 'package:rogapp/index/index_controller.dart';
+import 'package:rogapp/widgets/bottom_sheet_widget.dart';
+
+class ListWidget extends StatelessWidget {
+  ListWidget({ Key? key }) : super(key: key);
+
+  final IndexController indexController = Get.find<IndexController>();
+
+  Image getImage(int index){
+    if(indexController.locations[0].collection[index].properties!["photos"] == null || indexController.locations[0].collection[index].properties!["photos"] == ""){
+      return Image(image: AssetImage('assets/images/empty_image.png'));
+    }
+    else{
+      return Image(image: NetworkImage(indexController.locations[0].collection[index].properties!["photos"]));
+    }
+  }
+
+  void changeCurrentFeature(GeoJsonFeature fs){
+    if(indexController.currentFeature.length > 0){
+      indexController.currentFeature.clear();
+    }
+    indexController.currentFeature.add(fs);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Obx(() =>
+              indexController.locations.length > 0 ?
+              ListView.builder(
+              itemCount: indexController.locations[0].collection.length,
+              shrinkWrap: true,
+              itemBuilder: (_, index){
+                return Card(
+                  child: ListTile(
+                    onTap: (){
+                      GeoJsonFeature gf = indexController.locations[0].collection[index];
+                      changeCurrentFeature(gf);
+                      showModalBottomSheet(
+                          isScrollControlled: true,
+                          context: context,
+                          builder: (context) => BottomSheetWidget(),
+                        );
+                    },
+                    leading: getImage(index),
+                    title: Text(indexController.locations[0].collection[index].properties!['location_name'].toString()),
+                    subtitle: Text(indexController.locations[0].collection[index].properties!['category']),
+                  ),
+                );
+              },
+            ) : Container(width: 0, height: 0,),
+            );
+  }
+}

lib/widgets/map_widget.dart

@@ -1,107 +1,34 @@
 import 'package:flutter/material.dart';
-import 'package:flutter/rendering.dart';
-import 'package:flutter_breadcrumb/flutter_breadcrumb.dart';
 import 'package:flutter_map/plugin_api.dart';
 import 'package:flutter_map_location_marker/flutter_map_location_marker.dart';
+import 'package:flutter_map_marker_cluster/flutter_map_marker_cluster.dart';
 import 'package:geojson/geojson.dart';
 import 'package:get/get.dart';
 import 'package:get/get_state_manager/get_state_manager.dart';
 import 'package:latlong2/latlong.dart';
-import 'package:rogapp/pages/drawer/drawer_page.dart';
+import 'package:rogapp/index/index_controller.dart';
-import 'package:rogapp/pages/home/home_controller.dart';
-import 'package:flutter_map_marker_cluster/flutter_map_marker_cluster.dart';
-import 'package:rogapp/routes/app_pages.dart';
 import 'package:rogapp/widgets/base_layer_widget.dart';
 import 'package:rogapp/widgets/bottom_sheet_widget.dart';
-import 'package:rogapp/widgets/perfecture_widget.dart';
 
+class MapWidget extends StatelessWidget {
 
-class MapPage extends StatelessWidget {
+  final IndexController indexController = Get.find<IndexController>();
-  MapPage({ Key? key }) : super(key: key);
-
-  final HomeController homeController = Get.find<HomeController>();
-
-  static final MapController mapController = MapController();
-
-
-  Widget getBreadCurms(){
-    print("---------map-------------");
-    return Obx(() =>
-                  homeController.perfectures.length > 0 ?
-                  BreadCrumb.builder(
-                  itemCount: homeController.perfectures.length,
-                  builder: (index) {
-                    return BreadCrumbItem(
-                      content: PerfectureWidget(homeController: homeController,) //Text('Item$index')
-                      );
-                  },
-                  divider: Icon(Icons.chevron_right),
-                ) : 
-                Container(width: 0, height: 0,), 
-                );
-  }
 
+  MapWidget({ Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     final PopupController _popupController = PopupController();
-
+    return Stack(
-
-    return Scaffold(
-      drawer: DrawerPage(),
-      appBar: AppBar(
-        title: Text("app_title".tr),
-        actions: [
-          IconButton(
-            icon: const Icon(Icons.map),
-            onPressed: () => {print("action")},
-          )
-
-        ],
-      ),
-      bottomNavigationBar: BottomAppBar(
-        child: new Row(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: <Widget>[
-            Expanded(child: IconButton(icon: Icon(Icons.camera_enhance), onPressed: (){},),),
-            Expanded(child: new Text('')),
-            Expanded(child: IconButton(icon: Icon(Icons.travel_explore), onPressed: (){}),),
-          ],
-        ),
-      ),
-      floatingActionButton: new FloatingActionButton(
-        onPressed: (){
-          Get.toNamed(AppPages.INITIAL);
-        },
-        tooltip: 'Increment',
-        child: new Icon(Icons.document_scanner),
-        elevation: 4.0,
-      ),
-      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
-      body: SafeArea(
-        child: Column(
-          children: [
-            Container(
-              padding: EdgeInsets.symmetric(horizontal: 16.0),
-              alignment: Alignment.centerLeft,
-              height: 50.0,
-              child: SingleChildScrollView(
-                scrollDirection: Axis.horizontal,
-                child: 
-                getBreadCurms(),
-              ),
-            ),
-            Expanded(
-              child: Obx(() => 
-                Stack(
                   children: [
-                    FlutterMap(
+                    Obx(() => 
-                      mapController: mapController,
+                      FlutterMap(
+                      //mapController: mapController,
                       options: MapOptions(
-                          
+                          onMapCreated: (c){indexController.mapController = c;},
                           //center: LatLng(37.15319600454702, 139.58765950528198),
-                          bounds: homeController.currentBound.length > 0 ? homeController.currentBound[0]: LatLngBounds.fromPoints([LatLng(37.15319600454702, 139.58765950528198)]),
+                          bounds: indexController.currentBound.length > 0 ? indexController.currentBound[0]: LatLngBounds.fromPoints([LatLng(35.03999881162295, 136.40587119778962), LatLng(36.642756778706904, 137.95226720406063)]),
-                          zoom: 6,
+                          zoom: 1,
                           maxZoom: 20,
                           plugins: [
                             MarkerClusterPlugin(),
@@ -113,7 +40,7 @@ class MapPage extends StatelessWidget {
                         children: [
                           BaseLayer(),
                           LocationMarkerLayerWidget(),
-                          homeController.locations.length > 0 ?
+                          indexController.locations.length > 0 ?
                           MarkerClusterLayerWidget(
                             options: MarkerClusterLayerOptions(
                               spiderfyCircleRadius: 80,
@@ -122,13 +49,13 @@ class MapPage extends StatelessWidget {
                               maxClusterRadius: 20,
                               rotate: true,
                               onMarkerTap: (marker){
-                                GeoJsonFeature? fs = homeController.getFeatureForLatLong(marker.point.latitude, marker.point.longitude);
+                                GeoJsonFeature? fs = indexController.getFeatureForLatLong(marker.point.latitude, marker.point.longitude);
                                 print(fs);
                                 if(fs != null){
-                                  if(homeController.currentFeature.length > 0) {
+                                  if(indexController.currentFeature.length > 0) {
-                                    homeController.currentFeature.clear();
+                                    indexController.currentFeature.clear();
                                   }
-                                  homeController.currentFeature.add(fs);
+                                  indexController.currentFeature.add(fs);
             
                                   showModalBottomSheet(context: context, isScrollControlled: true, 
                                     builder:((context) => BottomSheetWidget())
@@ -143,7 +70,7 @@ class MapPage extends StatelessWidget {
                                 padding: EdgeInsets.all(50),
                                 maxZoom: 265,
                               ),
-                              markers:homeController.locations[0].collection.map((i) {
+                              markers:indexController.locations[0].collection.map((i) {
                                 GeoJsonMultiPoint p = i.geometry as GeoJsonMultiPoint;
                                 return Marker(
                                   anchorPos: AnchorPos.align(AnchorAlign.center),
@@ -170,14 +97,8 @@ class MapPage extends StatelessWidget {
                           ): Container(height:0,width: 0),
                         ],
                     )
+                    )
                   ],
-                )
+                );
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
   }
-}
+}
-

lib/widgets/perfecture_widget.dart

@@ -1,27 +1,29 @@
 import 'package:flutter/material.dart';
-import 'package:geojson/geojson.dart';
+import 'package:flutter_map/flutter_map.dart';
 import 'package:get/get.dart';
-import 'package:rogapp/pages/home/home_controller.dart';
+import 'package:rogapp/index/index_controller.dart';
 
 
+class PerfectureWidget  extends StatefulWidget {
 
-class PerfectureWidget extends StatefulWidget {
+  IndexController indexController;
+  MapController mapController;
 
-  HomeController homeController;
+  PerfectureWidget({Key? key, required this.indexController, required this.mapController}) : super(key: key){
-
+     //indexController.zoomtoMainPerf("9", mapController);
-  PerfectureWidget({required this.homeController});
+  }
 
   @override
   State<PerfectureWidget> createState() => _PerfectureWidgetState();
 }
 
 class _PerfectureWidgetState extends State<PerfectureWidget> {
-  String dropdownValue = "1";  
+  String dropdownValue = "9";  
 
   List<DropdownMenuItem<String>> getDropdownItems() {
     List<DropdownMenuItem<String>> dropDownItems = [];
 
-    for (Map<String, dynamic> currency in widget.homeController.perfectures[0]) {
+    for (Map<String, dynamic> currency in widget.indexController.perfectures[0]) {
       //print(currency["id"].toString());
       var newDropdown = DropdownMenuItem(
         child: Text(currency["adm1_ja"].toString()),
@@ -35,22 +37,21 @@ class _PerfectureWidgetState extends State<PerfectureWidget> {
 
   List<DropdownMenuItem<String>> getSubDropdownItems() {
     List<DropdownMenuItem<String>> dropDownItems = [];
-    if(widget.homeController.subPerfs.length > 0){
-      for (Map<String, dynamic> currency in widget.homeController.subPerfs[0]) {
-      //print(currency["id"].toString());
-      var newDropdown = DropdownMenuItem(
-        child: Text(currency["adm2_l"].toString()),
-        value: currency["id"].toString(),
-      );
 
-      dropDownItems.add(newDropdown);
+    if(widget.indexController.subPerfs.isNotEmpty){
-    }
+
+      for (Map<String, dynamic> currency in widget.indexController.subPerfs[0]) {
+        var newDropdown = DropdownMenuItem(
+          child: Text(currency["adm2_ja"].toString()),
+          value: currency["id"].toString(),
+        );
+
+        dropDownItems.add(newDropdown);
+      }
     }
     return dropDownItems;
   }
 
-
-
   @override
   Widget build(BuildContext context) {
     return Obx(() =>
@@ -66,39 +67,164 @@ class _PerfectureWidgetState extends State<PerfectureWidget> {
         color: Colors.deepPurpleAccent,
       ),
       onChanged: (String? newValue) {
-        setState(() {
+        //setState(() {
-          dropdownValue = newValue!;
+          if(newValue != null){
-          print(newValue);
+            dropdownValue = newValue;
-          widget.homeController.loadLocationforPerf(newValue);
+            widget.indexController.populateForPerf(newValue, widget.mapController);
-          widget.homeController.loadSubPerfFor(newValue);
+          }
-        });
+        //});
       },
-      items:getDropdownItems()),
+        items: getDropdownItems()
+      ),
       
-      widget.homeController.subPerfs.length > 0 ?
+      widget.indexController.subPerfs.isNotEmpty ?
 
       DropdownButton<String>(
-      value: widget.homeController.getSubInitialVal(),
+      value: widget.indexController.subDropdownValue,
       icon: const Icon(Icons.arrow_downward),
       elevation: 16,
       style: const TextStyle(color: Colors.deepPurple),
+      hint: const Text("select"),
       underline: Container(
         height: 2,
         color: Colors.deepPurpleAccent,
       ),
       onChanged: (String? newValue) {
         setState(() {
-          dropdownValue = newValue!;
+          if(newValue != null){
-          print(newValue);
+            widget.indexController.populateForSubPerf(newValue, widget.mapController);
-          //widget.homeController.loadLocationforPerf(newValue);
+            //widget.indexController.loadLocationforSubPerf(newValue, widget.mapController);
+            //widget.indexController.subDropdownValue = newValue;
+          }
         });
       },
-      items:getSubDropdownItems()) :
+      items:
-      Text("--")
+        getSubDropdownItems()
+      ) :
+      const Text("")
 
         ],
-      )
+      ),
     );
   }
 }
 
+
+
+// class PerfectureWidget extends StatefulWidget {
+
+//   HomeController homeController;
+//   MapController mapController;
+
+//   PerfectureWidget({required this.homeController, required this.mapController});
+
+//   @override
+//   State<PerfectureWidget> createState() => _PerfectureWidgetState();
+// }
+
+// class _PerfectureWidgetState extends State<PerfectureWidget> {
+//   String dropdownValue = "9";  
+
+//   List<DropdownMenuItem<String>> getDropdownItems() {
+//     List<DropdownMenuItem<String>> dropDownItems = [];
+
+//     for (Map<String, dynamic> currency in widget.homeController.perfectures[0]) {
+//       //print(currency["id"].toString());
+//       var newDropdown = DropdownMenuItem(
+//         child: Text(currency["adm1_ja"].toString()),
+//         value: currency["id"].toString(),
+//       );
+
+//       dropDownItems.add(newDropdown);
+//     }
+//     return dropDownItems;
+//   }
+
+//   List<DropdownMenuItem<String>> getSubDropdownItems() {
+//     List<DropdownMenuItem<String>> dropDownItems = [];
+
+//     if(widget.homeController.subPerfs.length > 0){
+
+//       for (Map<String, dynamic> currency in widget.homeController.subPerfs[0]) {
+//         var newDropdown = DropdownMenuItem(
+//           child: Text(currency["adm2_ja"].toString()),
+//           value: currency["id"].toString(),
+//         );
+
+//         dropDownItems.add(newDropdown);
+//       }
+//     }
+//     return dropDownItems;
+//   }
+
+//   @override
+//   void initState() {
+//     super.initState();
+//     widget.homeController.loadSubPerfFor("9");
+//     widget.homeController.zoomtoMainPerf("9", widget.mapController);
+//   }
+  
+//   @override
+//   Widget build(BuildContext context) {
+
+//     return Obx(() =>
+//       Row(
+//         children: [
+//           DropdownButton<String>(
+//       value: dropdownValue,
+//       icon: const Icon(Icons.arrow_downward),
+//       elevation: 16,
+//       style: const TextStyle(color: Colors.deepPurple),
+//       underline: Container(
+//         height: 2,
+//         color: Colors.deepPurpleAccent,
+//       ),
+//       onChanged: (String? newValue) {
+//         //setState(() {
+//           if(newValue != null){
+//             dropdownValue = newValue;
+//             widget.homeController.loadLocationforPerf(newValue, widget.mapController);
+//             widget.homeController.loadSubPerfFor(newValue);
+//             //SubDropdownValue = widget.homeController.getSubInitialVal();
+//             //widget.mapController.fitBounds(widget.homeController.currentBound[0]);
+//             widget.homeController.zoomtoMainPerf(newValue, widget.mapController);
+//           }
+//         //});
+//       },
+//         items: getDropdownItems()
+//       ),
+      
+//       widget.homeController.subPerfs.length > 0 ?
+
+//       DropdownButton<String>(
+//       value: widget.homeController.SubDropdownValue,
+//       icon: const Icon(Icons.arrow_downward),
+//       elevation: 16,
+//       style: const TextStyle(color: Colors.deepPurple),
+//       hint: Container(
+//                   child: Text("select"),
+//                 ),
+//       underline: Container(
+//         height: 2,
+//         color: Colors.deepPurpleAccent,
+//       ),
+//       onChanged: (String? newValue) {
+//         //setState(() {
+//           if(newValue != null){
+//             widget.homeController.loadLocationforSubPerf(newValue, widget.mapController);
+//             widget.homeController.SubDropdownValue = newValue;
+//             widget.homeController.zoomtoSubPerf(newValue, widget.mapController);
+//           }
+//         //});
+//       },
+//       items:
+//         getSubDropdownItems()
+//       ) :
+//       Text("")
+
+//         ],
+//       ),
+//     );
+//   }
+// }
+