<?xml version="1.0" encoding="utf-8"?>
<MainColumnInsertComponent ID="x149496" Name="DistrictFilterInsert" IsComponent="true" Changed="20250618T18:38:19" Created="20230627T20:59:30" Published="20260605T22:03:52" SiteBaseUrl="" Locale="" XPowerPath="/Seattle Gov/Seattle.Gov Home   /Departments/Transportation/Projects and Programs/Completed Projects/DistrictFilterInsert" Expanded="20260608T07:20:27">
  <IGX_Categories Count="0" CategoryIds="" />
  <LingualMaps />
  <Title type="string" UID="bf78693d542d4f708f45222cf2cfbf4f" label="Title" readonly="false" hidden="false" required="false" indexable="false" openByDefault="false" CIID=""></Title>
  <MainColumnInsert Type="Insert" _EXID_="x149496_bd8f6e43b9404ece89450db56e387e78" Name="MainColumnInsert" label="Main Column Insert" UID="bd8f6e43b9404ece89450db56e387e78"><![CDATA[<!-- FOR DEBUG ------------------------------->
  <!-- INSERT JQUERY TOO
  <div id="topicFilterContainer"></div>
  <select id="additionalFilters" class="form-control" >
    <option id="additionalFilterDefault">Filter by</option>
    <option id="categoryInput2769" value="2769">Ballard/Northwest</option>
    <option id="categoryInput2770" value="2770">Capitol Hill/Central</option>
    <option id="categoryInput2772" value="2772">Duwamish/Rainier/Southeast</option>
    <option id="categoryInput2771" value="2771">Magnolia/Queen Anne/Downtown</option>
    <option id="categoryInput2780" value="2780">Northgate</option>
    <option id="categoryInput2782" value="2782">Outside Seattle</option>
    <option id="categoryInput2768" value="2768">University/Lake Union/Northeast</option>
    <option id="categoryInput2773" value="2773">West Seattle/Delridge</option>
  </select> -->
<!-- END DEBUG ------------------------------->

<div class="hidden">
    <div id="districtMapFilter" tabindex="-1" role="form" aria-label="Filter by project location">
      <h3 class="topicSubhead2">Filter by region</h3>
	  <label for="districtMap" class="topicSubTitle">Select a region on the map to filter</label>
      <div id="districtMap">
        <div id="districtName"></div>
        <img src="/prebuilt/img/districtMapPlain.jpg" tabindex="-1" alt="District map"></img>
  
        <svg id="districtMapRegions" x="0px" y="0px" width="237px" height="387px" viewBox="0 0 237 387" enable-background="new 0 0 237 387" xml:space="preserve">
          <a xlink:href="#district5">
            <path id="district5" d="M186.833,76.333L180.917,58.5l-3.959-20.25l-1.812-9.042l-1.49-10.187l-1.328-3.344L169.167,14H77v4v8l-2.75,13.667l-2.542,10.667l1.062,0.5l6.864,5l12.849,1.5c0,0,2.007-0.667,3.674-0.5s1.504,19.75,1.504,19.75L103.833,80H173l9.333-3.25l4.5,0.375"></path>
          </a>
          <a xlink:href="#district6">
            <path id="district6" d="M97.663,76.583c0,0,0.163-19.583-1.504-19.75s-3.674,0.5-3.674,0.5l-12.849-1.5l-6.864-5l-1.062-0.5c0,0-11.71,13.667-20.377,13.667s-9.5,9-7.833,10.667s5,17-5.333,21.833s0.167,5.667,3.333,9.333s1.5,8.833,20.667,14.833S91.498,138.333,103.998,145c0.824,0.44,1.543,0.828,2.179,1.175l0.321-26.675l25.834-0.5l1-26.833L125.146,80h-21.312L97.663,76.583z"></path>
          </a>
          <a xlink:href="#district4">
            <path id="district4" d="M199.334,81.5c-6.965-1.413-10.198-3.009-12.334-4.456v0.081l-4.584-0.375L173,80h-47.854l8.187,12.167l-1,26.833l-25.834,0.5l-0.321,26.675c0,0,13.991,4.492,15.157,4.992s8-12.667,10.833-12.5s5.667,7.517,10.667,7.508s35.833,0,35.833,0s1.001-8.841,5.167-12.341S187,120.5,202.667,109.667S210.834,83.833,199.334,81.5z"></path>
          </a>
          <a xlink:href="#district7">
            <path id="district7" d="M132.167,138.667c-2.833-0.167-9.667,13-10.833,12.5s-15.157-4.992-15.157-4.992c-0.635-0.347-1.354-0.735-2.179-1.175c-12.5-6.667-22.667-18.333-41.833-24.333s-17.5-11.167-20.667-14.833c-2.222-2.573-8.047-3.752-7.758-5.896l-0.125-0.041c0,0-2.511,7.25-7.511,9.75s-7.469,13.344-15.636,14.177s7.683,9.171,11.849,13.671s6.507,7.003,6.674,12.003s1.504,10.501,16.171,19.501s15.81,6.656,28.835,9.001c8.335,1.5,14.372,9.803,18.001,14.25C97.202,198.625,112.333,205,112.5,218H124l1.667-40.167c0,0-13.833-1,0.667-8.667c6.815-3.603,7.105-21.1,7.05-30.023C132.975,138.871,132.57,138.69,132.167,138.667z"></path>
          </a>
          <a xlink:href="#district3">
            <path id="district3" d="M142.834,146.175c-4.288,0.007-6.982-5.387-9.45-7.031c0.056,8.923-0.234,26.42-7.05,30.023c-14.5,7.667-0.667,8.667-0.667,8.667l-1.594,38.411c2.867-0.571,9.848-1.833,11.427-0.911c2,1.167-1.5,7.334,2.667,9.667s5.167,12.166,7.167,13.333s7.751,8.167,13.542,8.167s7.958,2.5,7.958,2.5s3-10,2.833-14.5s1.833-7.155,2.5-19.494s3.999-27.173,1.833-31.339s5.5-6.333,5.667-14.167c0.135-6.341,0.051-16.5-1.047-23.325C177.636,146.175,147.752,146.167,142.834,146.175z"></path>
          </a>
          <a xlink:href="#district1">
            <path id="district1" d="M144.834,330.334c-2.567-2.322-4.999-5.677-7.051-8.993c-1.372,0.101-2.283,0.181-2.283,0.181s-16-15.73-18-18.73s-13-27.957-11.25-33.207s2.5-38.418,2.5-38.418l0.24-1.554c-4.434,1.923-14.325,6.038-26.24,9.888c-3.583,1.834-8.083-9-10.917-15.166s-8.5-7.667-11.5-4s-16.333,25.001-29,31.334c-6.167,2.833-2.167,6.834,0,9s14.5,14.667,17.167,29.833s4,21.334,5.333,23s-3.167,6.332-4,7.166s0.833,7.667,3.833,10.167s-0.333,9.501-1.5,11.167s16.333,34.667,22.833,33s3.5-6.833,6.833-10.5S80.167,344.334,81,342.834s31.167-0.001,34.167,0.833s-1,5.001,6,4.834s4.5-5,4-7s4.833-0.668,8.333-0.834s2.501-5.166,3.834-5.166S151.834,336.667,144.834,330.334z"></path>
          </a>
          <a xlink:href="#district2">
          <path id="district2" d="M211.25,355.834l11.625-0.167c0,0-3.405-3.832-14.572-8.166s-8.984-7.834-10.651-15.667
            s-5.325-9.167-5.325-13.5s7.838-19.501,11.504-22.167s10.168-7.832,1.835-21.666c-7.956-13.207-7.859,6.383-7.834,7.316
            c-0.049-1.001-4.678-2.544-7.165-13.817c-2.5-11.333-9.166-2.5-15.166-13c-3.51-6.143-4.453-16.558-5.398-24.85
            c-0.3,1.531-0.49,2.839-0.435,4.35c0.167,4.5-2.833,14.5-2.833,14.5s-2.167-2.5-7.958-2.5s-11.542-7-13.542-8.167
            s-3-11-7.167-13.333s-0.667-8.5-2.667-9.667c-1.579-0.922-8.56,0.34-11.427,0.911l0.275-6.635l0,0L124,218h-11.5
            c-0.023-1.781-0.334-3.434-0.855-4.982l-0.098,0.049l-2.797,18.1c0,0-0.75,33.168-2.5,38.418s9.25,30.207,11.25,33.207
            s18,18.73,18,18.73s14.25-1.262,15-0.012s4,7.163,3.167,9.33s8.667,2.163,8.667,2.163s0.499,19.832,1.166,20.166
            s12.334,2.498,14.667,4.498s5.167-2.167,6.167-1.833s0,21.166,0,21.166H195v-12c0,0,8.334,0.5,8.667,1.666
            c0.333,1.168,0.667,5.334,2.167,5.334s8.166,0,8.166,0v-8l-3.666-1.333L211.25,355.834z"/>
          </a>
        </svg>
      </div>
      <div class="checkbox">
        <input type="checkbox" onclick="triggerOutsideRegion(this)" id="outsideSeattle">
        <label for="outsideSeattle">
            Outside of Seattle
        </label>
      </div>
    </div>

  </div>
  
  <script>
    // Map districts to categories & names
    var districtMap = {
      district1: {
        name: 'West Seattle / Delridge',
        category: '1511',
        center: [80, 300]
      },
      district2: {
        name: 'Duwamish / Rainier / Southeast',
        category: '1530',
        center: [160, 300]
      },
      district3: {
        name: 'Capitol Hill / Central',
        category: '1553',
        center: [150, 200]
      },
      district4: {
        name: 'University / Lake Union / Northeast',
        category: '1572',
        center: [160, 115]
      },
      district5: {
        name: 'Northgate',
        category: '1595',
        center: [130, 50]
      },
      district6: {
        name: 'Ballard / Northwest',
        category: '1615',
        center: [85, 100]
      },
      district7: {
        name: 'Magnolia / Queen Anne / Downtown',
        category: '1630',
        center: [70, 160]
      },
      outsideSeattle: {
        name: 'Outside Seattle',
        category: '2782',
        center: [0, 0]
      },
    };
  
    $(function() {
      // Move map filter into sidebar
      $('#topicFilterContainer').append($('#districtMapFilter'))
  
      // Append District IDs
      $('#districtMapRegions path').each(function(){
        var districtID =  $(this).attr('id'),
            district = districtMap[districtID],
            $text = $(document.createElementNS("http://www.w3.org/2000/svg", "text")),
            $srText = $(document.createElementNS("http://www.w3.org/2000/svg", "text"));
  
         $text.attr({
            'x' : district.center[0],
            'y' : district.center[1],
            'aria-hidden' : true
          })
          .text(districtID.split('district')[1])
          .insertAfter($(this));

         $srText.attr({
            'class' : 'sr-only',
          })
          .text('Council District ' + districtID.split('district')[1] + ' - ' + district.name)
          .insertAfter($(this));

      });
  
      // Bind clicks
      $('#districtMapRegions a').click(function(e) {
        e.preventDefault();
        console.log('yo')
        var $path = $(this).find('path'),
            district =  $path.attr('id'),
            category = districtMap[district].category;

        // console.log($path, district, category)

        if($path.attr('class') == 'active') {
          //active > not active
          $('#districtMapRegions path').attr('class','');
          setTimeout(function() {
            $('.additionalFilterInput[value="'+category+'"]').trigger('click');
          }, 200)
          $('#districtMapRegions path').attr('class','');
          $path.attr('class','');
          //remove class attribute
          $path.removeAttr( "class" )
        } else {
          //not active > active
          setTimeout(function() {
                $('.additionalFilterInput[value="'+category+'"]').trigger('click');
            }, 200)
            $('#districtMapRegions path').attr('class','');
            $path.attr('class','active');
        }
     
  
        // Uncheck Outside Seattle Filter
        $('#outsideSeattle').prop("checked", false);
  
        return false      
      });
  
      // Show Name
      $('#districtMapRegions a').on({
        focus: function(e) {
          console.log('focus', e.target)
          console.dir(e.target)
          var offset = $(this).offset(),
              id = e.target.children[0].id,
              district = districtMap[id],
              name = (typeof(district) !== 'undefined') ? district.name : null;
  
          console.log(offset, district, name)

          if (name) {
            $('#districtName')
            .text(name)
            .show()
            .css({
              left : district.center[0] + 20,
              top : district.center[1] - 10
            })
          } else {
            $('#districtName').hide();
          }
        },
        blur: function(e) {
          console.log('blur', e.target)
          $('#districtName').hide();
        },
        keydown: function(e) {
            if (e.key == "Escape") {
              console.log('escape', e.target)
              $('#districtName').hide();
            }
        }



        
        // mousemove: function(e) {
        //   var offset = $(this).offset(),
        //       district = districtMap[e.target.id],
        //       name = (typeof(district) !== 'undefined') ? district.name : null;
  
        //   if (name) {
        //     $('#districtName')
        //     .text(name)
        //     .show()
        //     .css({
        //       left : e.pageX - offset.left + 50,
        //       top : e.pageY - offset.top
        //     })
        //   } else {
        //     $('#districtName').hide();
        //   }
        // },
        // mouseleave: function() {
        //   $('#districtName').hide();
        // }
      });

      // Clear All Filters Button
      $('.clearFilters').on('click', function(){
        $('#districtMapRegions path').attr('class','');
      })

      // Change Label to Projects
      $('#topicFilterContainer .topicSubhead2').text('Filter by project location');
      $('.topicLabel').text('Projects');
    });
  
    function triggerOutsideRegion(checkbox) {
      var category = districtMap.outsideSeattle.category;
      
      // Clear Map Selections
      $('#districtMapRegions path').attr('class','');
   
      setTimeout(function() {
          //$('.appliedFilterButton[value="categoryInput' + category + '"]').trigger('click');
          $('.additionalFilterInput[value="'+category+'"]').trigger('click');
        }, 200)

      // // Clear active state when applied filter button cleared
      // $('.appliedFilterButton.additionalFilter').click(function() {
      //   $(checkbox).prop('checked', false)
      // });

    }
  </script>
    
  <style>


	#topicFilterContainer .form-group {
		margin-top: 10px;
	}
	
	#topicFilterContainer .topicSubTitle {
		margin-left: 0;
	}
	
	#topicFilterContainer .clearFilters {
		margin: 20px 0;
	}
	
	#topicFilterContainer button.btn.refine {
		margin: -2px 0px 0px -5px;
	}
	
    #districtMap {
      position: relative;
    }
    #districtName {
      font-family: 'Open Sans', sans-serif;
      display: none;
      position: absolute;
      z-index: 3;
      background: #fff;
      box-shadow: 2px 2px 10px rgba(0, 0, 0, .5);
      max-width: 100px;
      padding: 10px;
    }
    #districtName:before {
      position: absolute;
      top: 0;
      left: -10px;
      content: '';
      width: 0; 
      height: 0; 
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent; 
      border-right: 10px solid #000; 
    }
    #districtMapRegions {
      position: absolute;
      left: 0px;
      top: 0px;
    }
    #districtMapRegions path {
      cursor: pointer;
      stroke: #000;
      stroke-width: 1px;
      fill: transparent;
    }

    #districtMapRegions path.active {
      stroke-width: 3px;
    }
    #districtMapRegions a:focus {
      outline: none;
    }

    #district1:hover, #district1.active, a:focus #district1 { fill: rgba(64, 164, 59, .5) }
    #district2:hover, #district2.active, a:focus #district2 { fill: rgba(86,  90, 92, .5) }
    #district3:hover, #district3.active, a:focus #district3 { fill: rgba(192, 110, 81, .5) }
    #district4:hover, #district4.active, a:focus #district4 { fill: rgba(8, 132, 144, .5) }
    #district5:hover, #district5.active, a:focus #district5 { fill: rgba(102, 5, 13, .5) }
    #district6:hover, #district6.active, a:focus #district6 { fill: rgba(4, 69, 27, .5) }
    #district7:hover, #district7.active, a:focus #district7 { fill: rgba(240, 171, 0, .5) } 

/* 
    a:focus path  {
      fill: pink;
      stroke: red;
      stroke-width: 1;
    } */




    #districtMapRegions text {
      font: bold 16px 'sans-serif';
      text-anchor: middle;
      width: 100px;
      fill: #000;
      pointer-events: none;
    }
  
    /* 
    Style Guide Chart Colors 

    Cool Palette to RGBA
      #0046AD rgba(0, 70, 173, .75)   Cobalt
      #589E7E rgba(88, 158, 126, .75) Aqua Forest
      #021F22 rgba(2, 31, 34, .75)    Daintree
      #199BCE rgba(25, 155, 206, .75) Curious Blue
      #315C31 rgba(49, 92, 49, .75)   Killarney
      #C87E5D rgba(200, 126, 93, .75) Antique Brass
      #007749 rgba(0, 119, 73, .75)   Fun Green

    Warm Palette to RGBA
      #F0AB00 rgba(240, 171, 0, .5)   Web Orange
      #088490 rgba(8, 132, 144, .5)   Blue Chill
      #04451B rgba(4, 69, 27, .5)     Zuccini
      #C06E51 rgba(192, 110, 81, .5)  Fuzzy Wuzzy Brown
      #40A43B rgba(64, 164, 59, .5)   Apple Apple
      #66050D rgba(102, 5, 13, .5)    Red Oxide
      #565A5C rgba(86,  90, 92, .5)   Abbey
    */
  
  


  
    @media (max-width: 991px) {
      /* Hide Map Filter on Mobile */
      #districtMapFilter {
        display: none;
      }
    }
    @media (min-width: 992px) {
      /* Hide Select Box on Desktop */
      //#additionalFiltersTitle, #additionalFilters  {
        //height: 1px;
        //width: 1px;
        //overflow: hidden;
      //}
    #additionalFilters.form-control{display:none}    
  }
  </style>

    ]]></MainColumnInsert>
  
  <MoreInformationLinkText type="string" UID="aa198601535645d7956ba65527b0ab4a" label="More Information Link Text" readonly="false" hidden="false" required="false" indexable="false" openByDefault="false" CIID=""></MoreInformationLinkText>
  <BackgroundColorClass type="multiselect" UID="3ca8468a623e40e6b3591b3648f2091f" label="Background Color" readonly="false" hidden="false" required="false" indexable="false" openByDefault="false" MaxChoices="1" PageSize="" CIID=""></BackgroundColorClass>
</MainColumnInsertComponent>