toolkit-map-template

<!-- Define first query for states to highlight on the map -->

<?php if($query):?>
  <?php $states = array();  // create an empty array to store states to highlight on the map
        $region = array();  // create an empty associative array to create place states in a defined region
  ?>
    // Look through query to create $state array
    <?php while( $query->have_posts() ) : $query->the_post();?>
      <?php 
          $title = get_the_title();
		  $inRegion = get_field('region'); // an ACF relationship field
	   ?>
	<?php array_push($states, $title); // Adds state to the $state array ?>
	<?php if($inRegion):?>
        <!-- Loop through query to create $regions array -->
		<?php foreach( $inRegion as $post): setup_postdata($post); ?>
			<?php $slug = basename( get_the_permalink()); ?>
			<?php $region[$title] = $slug;?>
		<?php endforeach; ?>
		<?php wp_reset_postdata();?>
	<?php endif;?>
	<?php endwhile;?>

   <!--  Create a dropdown selector for accessibility -->
   <select id="state-resources-selector">
     <option>Choose State or Region</option>
    <!-- Loop through query to create options for select input -->
	<?php while( $query->have_posts() ) : $query->the_post();?>
		<?php $slug = $post->post_name;?>
	    <option value="<?php echo $slug;?>"><?php the_title();?></option>
	<?php endwhile;?>
	</select>
<?php endif;?>
<?php wp_reset_query(); ?>

<!-- End first query to add highlighted states to the map and select dropdown -->

<?php endif;?>

<!-- Define second query for all the locations, states and regions -->

<div class="map-container">
<?php if( $query2->have_posts() ): ?>
	<?php while( $query2->have_posts() ) : $query2->the_post();?>
		<?php $stateSlug = $post->post_name;?>
		<div class="location-card location-<?php echo $stateSlug;?>">
			<button class="close-button">Close</button>
			<h2><?php the_title();?></h2>
		<?php if(have_rows('key_partners_listing')):?>
			<h3>Key Partners</h3>
			<ul class="partners">
			<?php while(have_rows('key_partners_listing')): the_row();?>
				<li><?php the_sub_field('partner_name');?></li>
			<?php endwhile;?>
			</ul>
		<?php endif;?>	
		<?php if(have_rows('resources_listing')):?>
			<div class="resources">
				<h3>Resources</h3>
				<ul class="resources-listing">
				<?php while(have_rows('resources_listing')): the_row();?>
					<li><a href="<?php the_sub_field('resource_link');?>"><?php the_sub_field('resource_name');?></a></li>
				<?php endwhile;?>
					<li><a href="<?php the_permalink();?>">Success Story</a></li>
				</ul>
			</div>
		<?php else:?>
			<div class="resources">
				<h3>Resources</h3>
				<ul class="resources-listing">
					<li><a href="<?php the_permalink();?>">Success Story</a></li>
				</ul>
			</div>
		<?php endif;?>
		</div>
	<?php endwhile;?>

<?php endif;?>
<?php wp_reset_query(); ?>

 <!-- SVG map -->

  <div class="map state-view" id="map">
     <svg>
     	<!-- Conditionals on the polygons and paths to see if the state is an active partnership and then another conditional to check if it is part of a defined region -->
		<polygon id="kansas" <?php if(in_array('Kansas', $states)): echo 'class="active" '; endif;?><?php if(isset($region['Kansas'])): echo 'data-region="'.$region['Kansas'].'" '; endif;?>points="..."></polygon>
     </svg>
   </div>
 </div>