Shows where you are

Here I tried to show all the State Senate and Assembly districts for the state of California. Plus if you click on a given district the district number and name of the representative shows up in the info box. And if you give your browser permission a green circle should show up where you are. Plus I have the circle move where the map does. Had to change up the zoom function to hangle moving more than just paths.

The dot also changes color a little with a css animation.

Now to see if I can implement a better way to zoom than I'm currently utilizing.

This looks like a promising example /mbostock/2374239

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <link rel="stylesheet" href="./map.css">
​
​
</head>
​
<body>
​
​
​
      <h2 class="bigtitle">California State <span class="chatit">Assembly</span> Districts</h2>
      <div class="houseseler">
        <select class="houseslect" onchange="housech(value)">
          <option value="lower"> State Assembly </option>
          <option value="upper" selected> Senate </options>
        </select>
      </div>
​
​
​
<script src="https://d3js.org/d3.v3.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
   <script src="/mpmckenna8/f43a842a8953e87f5b3c/63d5445b60d94813c85acd7fa02227d2f253f41e/d3.geo.zoom.js"></script>
​
        <script src="./twomap.js"></script>
​
    </body>
​
    

Modified http://d3js.org/d3.v3.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Updated missing url http://bl.ocks.org/mpmckenna8/raw/f43a842a8953e87f5b3c/63d5445b60d94813c85acd7fa02227d2f253f41e/d3.geo.zoom.js to /mpmckenna8/f43a842a8953e87f5b3c/63d5445b60d94813c85acd7fa02227d2f253f41e/d3.geo.zoom.js

https://d3js.org/d3.v3.js

https://d3js.org/topojson.v1.min.js

https://bl.ocks.org/mpmckenna8/raw/f43a842a8953e87f5b3c/63d5445b60d94813c85acd7fa02227d2f253f41e/d3.geo.zoom.js