Seattle-911-data/map.html at master · nicogonza/Seattle-911-data · 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
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
<head>
    <title>Visual analytics</title>

    <style type="text/css">
        /* Set a size for our map container, the Google Map will take up 100% of this container */
        #map {
            width: 750px;
            height: 500px;
        }
    </style>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=&libraries=visualization"></script>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

    <script>
        // When the window has finished loading create our google map below
        google.maps.event.addDomListener(window, 'load', init);

        function init() {
            // Basic options for a simple Google Map
            // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions

            var mapOptions = {
                // How zoomed in you want the map to start at (always required)
                zoom: 11,

                // The latitude and longitude to center the map (always required)
                center: new google.maps.LatLng(47.612448, -122.329732), // Seattle

                // How you would like to style the map.
                // This is where you would paste any style found on Snazzy Maps.
                styles: [{
                    "featureType": "all",
                    "elementType": "all",
                    "stylers": [{"hue": "#ff0000"}, {"saturation": -100}, {"lightness": -30}]
                }, {
                    "featureType": "all",
                    "elementType": "labels.text.fill",
                    "stylers": [{"color": "#ffffff"}]
                }, {
                    "featureType": "all",
                    "elementType": "labels.text.stroke",
                    "stylers": [{"color": "#353535"}]
                }, {
                    "featureType": "landscape",
                    "elementType": "geometry",
                    "stylers": [{"color": "#656565"}]
                }, {
                    "featureType": "poi",
                    "elementType": "geometry.fill",
                    "stylers": [{"color": "#505050"}]
                }, {
                    "featureType": "poi",
                    "elementType": "geometry.stroke",
                    "stylers": [{"color": "#808080"}]
                }, {
                    "featureType": "road",
                    "elementType": "geometry",
                    "stylers": [{"color": "#454545"}]
                }, {
                    "featureType": "transit",
                    "elementType": "labels",
                    "stylers": [{"hue": "#000000"}, {"saturation": 100}, {"lightness": -40}, {"invert_lightness": true}, {"gamma": 1.5}]
                }]
            };

            // Get the HTML DOM element that will contain your map
            // We are using a div with id="map" seen below in the <body>
            var mapElement = document.getElementById('map');


            // Create the Google Map using our element and options defined above
            var map = new google.maps.Map(mapElement, mapOptions);

            //populate map using heatmap
            heatmap = new google.maps.visualization.HeatmapLayer({
                data: getItems(),
                map: map
            });

        }

        function getItems() {
            var items = [];
            var dataApi = "https://data.seattle.gov/resource/grwu-wqtk.json";

            var json = $.getJSON(dataApi, function (data) {
                console.log("success");
                $.each(data, function (key, val) {
                    items.push((new google.maps.LatLng(val.latitude, val.longitude)));
                    console.log("something pushed to items");
                });

            });
            console.log("items");
            console.log(items.length);
            return items;
        }

        function getMarkers(map) {

            var markers=[];
            var items = getItems();
            console.log(items);

            items.forEach(function(pos){
                var image = './rectangle.png';
                var marker = new google.maps.Marker({
                    position: pos,
                    map: map,
                    title: "test",
                    //if false maker will not show
                    visible: true,
                    //icon: image
                    });
                    markers.push(marker);
                });

            console.log(markers);
            return markers;
        }

    </script>
</head>
<body>
<h1>Map visualization</h1>

<!-- The element that will contain our Google Map. This is used in both the Javascript and CSS above. -->
<div id="map"></div>
</body>
</html>