webdev/index.html at master · CodeForCary/webdev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<html>
<body>
  <head>
    <title>Development in Cary and Apex</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #map {
        height: 80%;
        margin: 0px;
    pading: 0px;
      }
    </style>
  </head>
<div id="map"></div>
<img src="../res/CodeForCaryBanner.png" /><br><center>Cary data 26 January 2015 / Apex data 04 September 2014</center>

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDjF4Rue-wRz5uvVM8bG1NPTwqt3kVw9R0&sensor=TRUE">
</script>
<script>
 // This is the minimum zoom level that we'll allow
 var minZoomLevel = 10;

 var map = new google.maps.Map(document.getElementById('map'), {
     zoom: minZoomLevel,
     center: new google.maps.LatLng(35.789471, -78.781168),
     mapTypeId: google.maps.MapTypeId.ROADMAP
 });
 // Add a layer for Cary's Site/Subdivision Plans
 var devLayer = new google.maps.KmlLayer({
           url: 'http://codeforcary.org/res/sitesubplans-20150126.kml'
         });
 devLayer.setMap(map);
 // Add a layer for Cary's Rezoning Data
 var rezLayer = new google.maps.KmlLayer({
               url: 'http://codeforcary.org/res/rezoning-20150126.kml'
         });
 rezLayer.setMap(map);
 // Add a layer for Apex Development
 var apexDevLayer = new google.maps.KmlLayer({
               url: 'http://codeforcary.org/res/ApexDevelopment07172014.kml'
         });
 apexDevLayer.setMap(map);
 // Bounds for Cary, North Carolina
 var strictBounds = new google.maps.LatLngBounds(
 new google.maps.LatLng(35.639,-78.968),
 new google.maps.LatLng(35.919,-78.698));

 // Listen for the dragend event
 google.maps.event.addListener(map, 'dragend', function () {
     if (strictBounds.contains(map.getCenter())) return;

     // We're out of bounds - Move the map back within the bounds

     var c = map.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = strictBounds.getNorthEast().lng(),
         maxY = strictBounds.getNorthEast().lat(),
         minX = strictBounds.getSouthWest().lng(),
         minY = strictBounds.getSouthWest().lat();

     if (x < minX) x = minX;
     if (x > maxX) x = maxX;
     if (y < minY) y = minY;
     if (y > maxY) y = maxY;

     map.setCenter(new google.maps.LatLng(y, x));
 });

 // Limit the zoom level
 google.maps.event.addListener(map, 'zoom_changed', function () {
     if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
 });
 // Try HTML5 geolocation
 if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
    var pos = new google.maps.LatLng(position.coords.latitude,
                                     position.coords.longitude);

    var urhereMarker = new google.maps.Marker({
        content: "Your Location"
    });

    var myLocation = new google.maps.Marker({
        position: pos,
        map: map,
        animation: google.maps.Animation.DROP,
        title: 'Current Location'
        });
        map.setCenter(pos);
        }, function() {
             handleNoGeolocation(true);
           });
        } else {
           // Browser doesn't support Geolocation
           handleNoGeolocation(false);
        }

       function handleNoGeolocation(errorFlag) {
         if (errorFlag) {
           var content = 'Error: The Geolocation service failed.';
         } else {
           var content = 'Error: Your browser doesn\'t support geolocation.';
         };

         var options = {
           map: map,
           position: new google.maps.LatLng(35.789471, -78.781168),
           content: content
         };

         var infowindow = new google.maps.InfoWindow(options);
         map.setCenter(options.position);
       };

</script>
</body>
</html>