-#new-area-section{background-color:white}#new-area-section .input-container{margin-bottom:0;padding:0 10px 0 10px}#new-area-section .input-container input.area-name{margin:10px 10px 0 0px}#new-area-section .input-container input.area-name+label{top:15px !important}#new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child){line-height:1;min-height:20px}#new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) span,#new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) a{line-height:1;padding:2px 10px}#new-area-section .map-color-selection{margin-top:20px}#new-area-section .map-color-selection label{margin-left:15px;font-size:16px}#list-header{padding:5px;background-color:#003366;color:white}#list-header .area-header{color:inherit}#area-list .record-container{margin-bottom:2px}#area-list .record-container .area-record{padding:5px;background-color:white}#area-list .record-container .area-record:hover{cursor:pointer}#area-list .record-container .area-record .area-record-delete{position:relative;right:15px}#area-list .record-container .area-record .area-record-delete:hover{cursor:pointer}.edit-field{background-color:rgba(30,202,162,0.3) !important}.error-field{background-color:rgba(244,67,54,0.3) !important}
+#map-area-container{padding:10px}#map-area-container #new-area-section{max-width:800px;background-color:white}#map-area-container #new-area-section .input-container{margin-bottom:0;padding:0 10px 0 10px}#map-area-container #new-area-section .input-container input.area-name{margin:10px 10px 0 0px}#map-area-container #new-area-section .input-container input.area-name+label{top:15px !important}#map-area-container #new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child){line-height:1;min-height:20px}#map-area-container #new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) span,#map-area-container #new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) a{line-height:1;padding:2px 10px}#map-area-container #new-area-section .map-color-selection{margin-top:20px}#map-area-container #new-area-section .map-color-selection label{margin-left:15px;font-size:16px}#map-area-container #list-header{padding:5px;background-color:#003366;color:white}#map-area-container #list-header .area-header{color:inherit}#map-area-container #area-list .record-container{margin-bottom:2px}#map-area-container #area-list .record-container .area-record{padding:5px;background-color:white}#map-area-container #area-list .record-container .area-record:hover{cursor:pointer}#map-area-container #area-list .record-container .area-record .area-record-delete{position:relative;right:15px}#map-area-container #area-list .record-container .area-record .area-record-delete:hover{cursor:pointer}#area-update{margin-top:10px;float:right}.edit-field{background-color:rgba(30,202,162,0.3) !important}.error-field{background-color:rgba(244,67,54,0.3) !important}
// Translation table for [glm-contacts-list] "show" options to configuration parameters
-// Load Contacts data abstract
-
+require_once GLM_MEMBERS_COUNTY_MAP_PLUGIN_CLASS_PATH.'/data/dataMapSettings.php';
/*
* This class performs the work for the default action of the "Contacts" menu
* option, which is to display the contacts dashboard.
*
*/
-class GlmMembersFront_map_display
+class GlmMembersFront_map_display extends GlmDataMapSettings
{
/**
*/
public function modelAction ($actionData = false)
{
+ $sql = "SELECT * FROM " . GLM_MEMBERS_COUNTY_MAP_PLUGIN_DB_PREFIX . 'areas';
+ $areas = $this->wpdb->get_results($sql);
+
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/'
+ 'assets' => GLM_MEMBERS_COUNTY_MAP_PLUGIN_URL . 'assets/',
+ 'areas' => $areas
);
// Return status, any suggested view, and any data to controller
-#new-area-section{
- background-color: white;
- .input-container{
- margin-bottom: 0;
- padding: 0 10px 0 10px;
- input.area-name{
- margin: 10px 10px 0 0px;
- }
- input.area-name + label{
- top: 15px !important;
+#map-area-container{
+ padding: 10px;
+ #new-area-section{
+ max-width: 800px;
+ background-color: white;
+ .input-container{
+ margin-bottom: 0;
+ padding: 0 10px 0 10px;
+ input.area-name{
+ margin: 10px 10px 0 0px;
+ }
+ input.area-name + label{
+ top: 15px !important;
+ }
}
- }
- .map-page-selection{
- .select-wrapper{
- .dropdown-content.select-dropdown{
- li:not(:first-child){
- line-height: 1;
- min-height: 20px;
- span,a{
+ .map-page-selection{
+ .select-wrapper{
+ .dropdown-content.select-dropdown{
+ li:not(:first-child){
line-height: 1;
- padding: 2px 10px;
+ min-height: 20px;
+ span,a{
+ line-height: 1;
+ padding: 2px 10px;
+ }
}
}
}
}
- }
- .map-color-selection{
- margin-top: 20px;
- label{
- margin-left: 15px;
- font-size: 16px;
+ .map-color-selection{
+ margin-top: 20px;
+ label{
+ margin-left: 15px;
+ font-size: 16px;
+ }
}
}
-}
-#list-header{
- padding: 5px;
- background-color: #003366;
- color: white;
- .area-header{
- color: inherit;
+ #list-header{
+ padding: 5px;
+ background-color: #003366;
+ color: white;
+ .area-header{
+ color: inherit;
+ }
}
-}
-#area-list{
- .record-container{
- margin-bottom: 2px;
- .area-record{
- padding: 5px;
- background-color: white;
- &:hover{
- cursor: pointer;
- }
- .area-record-delete{
- position: relative;
- right: 15px;
+ #area-list{
+ .record-container{
+ margin-bottom: 2px;
+ .area-record{
+ padding: 5px;
+ background-color: white;
&:hover{
cursor: pointer;
}
+ .area-record-delete{
+ position: relative;
+ right: 15px;
+ &:hover{
+ cursor: pointer;
+ }
+ }
}
}
}
}
+#area-update{
+ margin-top: 10px;
+ float: right;
+}
.edit-field{
background-color: rgba(30, 202, 162, 0.3) !important;
}
-<button id="area-update" class="btn" data-option="add">Add Area</button>
-<div id="new-area-section">
- <div class="row">
- <div class="s12 l4 col">
- <div class="row input-container">
- <div class="input-field col s12 l8">
- <input id="area-name" class="area-name validate" type="text" value="" required="" aria-required="">
- <label for="area-name">Area Name</label>
- <span data-error="required">Required</span>
+<div id="map-area-container">
+ <h5>Map Areas</h5>
+ <div id="new-area-section">
+ <div class="row">
+ <div class="s12 l8 col">
+ <div class="row input-container">
+ <div class="input-field col s12 l8">
+ <input id="area-name" class="area-name validate" type="text" value="" required="" aria-required="">
+ <label for="area-name">Area Name</label>
+ <span data-error="required">Required</span>
+
+ </div>
+ </div>
+
+ <div class="row input-container">
+ <div class="input-field col s12 l6 map-page-selection">
+ <select>
+ <option class="select-placeholder" value="">Select a page</option>
+ {foreach $pages as $id=>$name}
+ <option class="map-page-option" value="{$id}">{$name}</option>
+ {/foreach}
+ </select>
+
+ </div>
</div>
- </div>
-
- <div class="row input-container">
- <div class="input-field col s12 l6 map-page-selection">
- <select>
- <option class="select-placeholder" value="">Select a page</option>
- {foreach $pages as $id=>$name}
- <option class="map-page-option" value="{$id}">{$name}</option>
- {/foreach}
- </select>
+
+ <div class="row input-container">
+ <div class="input-field col s12 l6 map-color-selection">
+ <div id="map-hover-color">
+ <input type="color" name="hover_color" id="map-color" value="#003366">
+ <label for="map-color">Map Hover Color</label>
+ </div>
+ </div>
</div>
</div>
- </div>
- <div class="s12 l8 col">
- <div class="row input-container">
- <div class="col s12 m6 l5 map-color-selection">
- <input type="color" name="hover_color" id="map-color" value="#003366">
- <label for="map-color">Map Hover Color</label>
+ <div class="s12 l4 col">
+ <div class="row input-container">
+ <button id="area-update" class="btn" data-option="add">Add Area</button>
+ <div class="col s12 map-color-selection">
+
+ </div>
</div>
</div>
</div>
</div>
-</div>
-<div id="list-header" style="display: flex;">
- <div class="aread-header" id="area-name-header" style="flex: 1; font-weight: bold;">Area Name</div>
- <div class="aread-header" id="area-page-header" style="flex: 1; font-weight: bold;">Attached Page</div>
- <div class="aread-header" id="area-color-header" style="flex: 1; font-weight: bold;">Hover Color</div>
- <div class="aread-header" id="area-delete-header" style="flex: 0; font-weight: bold;"></div>
- </div>
-<div id="area-list"></div>
-
+ <div id="list-header" style="display: flex;">
+ <div class="aread-header" id="area-name-header" style="flex: 1; font-weight: bold;">Area Name</div>
+ <div class="aread-header" id="area-page-header" style="flex: 1; font-weight: bold;">Attached Page</div>
+ <div class="aread-header" id="area-color-header" style="flex: 1; font-weight: bold;">Hover Color</div>
+ <div class="aread-header" id="area-delete-header" style="flex: 0; font-weight: bold;"></div>
+ </div>
+ <div id="area-list"></div>
+</div>
<script type="text/javascript">
jQuery(function($){
var pages = {$pages|json_encode};
* 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 upperMI = {
- 'Alger': {literal} {latOffset: -0.10, lonOffset: -0.40, url: 'county=Alger'},{/literal}
+ 'Alger': {literal} {latOffset: -0.10, lonOffset: -0.40, url: 'county=Alger'},{/literal}
'Baraga': {literal} {latOffset: -0.10, lonOffset: -0.10, url: 'county=Baraga'},{/literal}
'Chippewa': {literal} {latOffset: -0.02, lonOffset: -0.50, url: 'county=Cheppewa'},{/literal}
'Delta': {literal} {latOffset: 0.20, lonOffset: 0.00, url: 'county=Delta'},{/literal}
'Ontonagon': {literal} {latOffset: 0.00, lonOffset: -0.15, url: 'county=Ontonagon'},{/literal}
'Schoolcraft': {literal} {latOffset: 0.00, lonOffset: 0.00, url: 'county=Schoolcraft'}{/literal}
};
- console.log(upperMI)
+
// Base URL for building links to county pages
var baseCountyUrl = 'Highlight_Michigan_Counties.php?';
// For each UP county
var countyLayer;
$.each(upperMI, function(county, countyData) {
- console.log(countiesDirectory)
+
// Get the GeoJson file for this county
$.get(countiesDirectory + county + '.GeoJson', function(countyFile) {
projects / WP-Plugins / glm-member-db-county-map.git / commitdiff