From 0386eb0e59ada0fc228145812ea51a635d1497ba Mon Sep 17 00:00:00 2001
From: Anthony Talarico <talarico@gaslightmedia.com>
Date: Tue, 13 Nov 2018 09:56:55 -0500
Subject: [PATCH] pages now associate with the links on the map

---
 models/front/map/display.php | 19 ++++++++++++++++---
 views/front/map/display.html | 31 +++++++++++++++++++++++++------
 2 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/models/front/map/display.php b/models/front/map/display.php
index e254248..8bdc7ba 100644
--- a/models/front/map/display.php
+++ b/models/front/map/display.php
@@ -101,14 +101,27 @@ class GlmMembersFront_map_display extends GlmDataMapSettings
     {
         $sql        = "SELECT * FROM " . GLM_MEMBERS_COUNTY_MAP_PLUGIN_DB_PREFIX . 'areas';
         $areas =  $this->wpdb->get_results($sql); 
+        $args = array(
+            'sort_order'    => 'asc',
+            'sort_column'   => 'post_title',
+            'hierarchical'  => 0,
+            'post_type'     => 'page',
+            'post_status'   => 'publish'
+        ); 
 
+        $results = get_pages($args); 
+        foreach($results as $page){
+            $pages[$page->ID]['name'] = $page->post_title;
+            $pages[$page->ID]['url'] = get_permalink($page->ID);
+        }
         wp_enqueue_style('admin-css', GLM_MEMBERS_COUNTY_MAP_PLUGIN_URL . 'css/front.min.css');
         // Compile template data
         $templateData = array(
-            'assets' => GLM_MEMBERS_COUNTY_MAP_PLUGIN_URL . 'assets/',
-            'areas' => $areas
+            'assets'    => GLM_MEMBERS_COUNTY_MAP_PLUGIN_URL . 'assets/',
+            'areas'     => $areas,
+            'pages'     => $pages
         );
-
+        
         // Return status, any suggested view, and any data to controller
         return array(
                 'status' => true,
diff --git a/views/front/map/display.html b/views/front/map/display.html
index 7cef206..65a3197 100644
--- a/views/front/map/display.html
+++ b/views/front/map/display.html
@@ -9,6 +9,7 @@
 
 <script>
     jQuery(function($){
+
         // Create map with default center and size
         var countyMap = L.map('area-map').setView([46.5, -87.0], 8);
         var countiesDirectory = '{$assets}/counties/';
@@ -32,8 +33,9 @@
             *    for Longitude to move link to the left.
             * "url" is added to the baseCountyUrl to generate the link address for a county
             */
-           var areas = {$areas|json_encode};
-           console.log(areas);
+            var areas = {$areas|json_encode};
+            var pages = {$pages|json_encode};
+
             var upperMI = {
                 'Alger':         {literal}  {latOffset: -0.10,   lonOffset: -0.40,   url: 'county=Alger'},{/literal}
                 'Baraga':        {literal}  {latOffset: -0.10,   lonOffset: -0.10,   url: 'county=Baraga'},{/literal}
@@ -90,6 +92,7 @@
                 if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
                     layer.bringToFront();
                 }
+                
             }
 
             // Mouse out event handler
@@ -107,7 +110,14 @@
             // For each UP county
             var countyLayer;
             $.each(upperMI, function(county, countyData) {
-
+                var page = "#";
+                var location = areas.filter( function(area){
+                    return area.area_name == county;
+                })
+                location = location[0];
+                if(parseInt(location.page_id)){
+                    page = pages[location.page_id]['url'];
+                }
                 // Get the GeoJson file for this county
                 $.get(countiesDirectory + county + '.GeoJson', function(countyFile) {
 
@@ -129,11 +139,11 @@
                     // Get center of the county and add offsets
                     var center = countyLayer.getBounds().getCenter();
                     var center = new L.LatLng(center.lat + countyData.latOffset, center.lng + countyData.lonOffset);
-
+              
                     // Create Div type icom for county names
                     var countyNameIcon = L.divIcon({
                         className: 'county-name',
-                        html: '<a href="' + baseCountyUrl + countyData.url + '">' + county + '</a>'
+                        html: '<a class="area-label ' + county +'" href="' + page + '">' + county + '</a>'
                     });
 
                     // use county name icon as marker using center location calculated above.
@@ -159,4 +169,13 @@
                 }
             });
     });
-</script>
\ No newline at end of file
+</script>
+<style>
+    /* .area-label{
+        position: relative;
+    }
+    .area-label.Houghton{
+        right: 40px;
+        bottom: 25px;
+    } */
+</style>
\ No newline at end of file
-- 
2.17.1