sdf

jshtaway · Sep 20, 2018 · c07cf63 · c07cf63
1 parent 7ef9fce
commit c07cf63
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 3 deletions.
diff --git a/WebsiteStructure/app.py b/WebsiteStructure/app.py
@@ -54,15 +54,15 @@ def artist():
 def api(artist):
     artist_events = Base.classes.artist_events
     results = session.query(artist_events.artist_name, artist_events.city, artist_events.consert_name, artist_events.date, artist_events.lat, artist_events.lng, artist_events.popularity).filter(artist_events.artist_name == artist).all()
-    return jsonify(results)
+    return render_template('artist.html',jsonify(geojson))
 
 @app.route('/api_geojson/<artist>')
 def api_geojson(artist):
     artist_events = Base.classes.artist_events
     results = session.query(artist_events.artist_name, artist_events.city, artist_events.consert_name, artist_events.date, artist_events.lat, artist_events.lng, artist_events.popularity).filter(artist_events.artist_name == artist).all()
     geojson = to_geojson(results)
     print("Loading GeoJSON...")
-    return render_template('artist.html',jsonify(geojson))
+    return jsonify(geojson)
 
 
 if __name__ == '__main__':

diff --git a/WebsiteStructure/static/js/artist_logics.js b/WebsiteStructure/static/js/artist_logics.js
@@ -0,0 +1,117 @@
+function createMap (conserts) {
+    var basemap = L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
+        attribution: "Map data &copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap </a> contributors, <a href=\"https://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA</a>, Imagery © <a href=\"https://www.mapbox.com/\">Mapbox </a>",
+        maxZoom: 18,
+        id: "mapbox.outdoors",
+        accessToken: API_KEY
+    });
+    var darkmap = L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
+        attribution: "Map data &copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors, <a href=\"https://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA</a>, Imagery © <a href=\"https://www.mapbox.com/\">Mapbox</a>",
+        maxZoom: 18,
+        id: "mapbox.dark",
+        accessToken: API_KEY
+    });
+    var baseMaps = {
+        "Street Map": basemap,
+        "Dark Map": darkmap
+    };
+    var overlayMaps = {
+        Artist: conserts
+    };
+    var map = L.map("map", {
+                center: [37.09, -95.71],
+                zoom: 5,
+                layers: [basemap, conserts]
+    });
+    L.control.layers(baseMaps, overlayMaps, {
+        collapsed: false
+    }).addTo(map);
+}
+
+function createFeatures(data) {
+    function onEachFeature(feature, layer) {
+        layer.bindPopup("<h3>" + feature.properties.name + "</h3>");
+    }
+    var events = L.geoJSON(data, {
+        onEachFeature: onEachFeature        
+    });
+    createMap(events);
+};
+
+var slider = 
+{
+    'type': "FeatureCollection",
+    'features': 
+    [
+        {
+            'geometry': 
+            {
+                'coordinates': [-116.19518, 33.72221],
+                'type': 'Point'
+            },
+            'properties': 
+            {
+                'City': 'Indio, CA, US',
+                'Date': '2018-07-21',
+                'Name': 'Pitbull at Special Events Center, Fantasy Springs Resort & Casino (July 21, 2018)',
+                'Popularity': 0.500202
+            },
+            'type': 'Feature'
+        },
+        {
+            'geometry': 
+            {
+                'coordinates': [-117.124, 33.5033],
+                'type': 'Point'
+            },
+            'properties': 
+            {
+                'City': 'Temecula, CA, US',
+                'Date': '2018-07-20',
+                'Name': 'Pitbull at Pechanga Summit (July 20, 2018)',
+                'Popularity': 0.500201
+            },
+            'type': 'Feature'
+        },
+        {
+            'geometry': 
+            {
+                'coordinates': [-118.7995455, 45.6700263],
+                'type': 'Point'
+            },
+            'properties': 
+            {
+                'City': 'Pendleton, OR, US',
+                'Date': '2018-07-14',
+                'Name': 'Pendleton Whisky Music Fest 2018',
+                'Popularity': 0.500222
+            },
+            'type': 'Feature'
+        }
+    ]
+};
+
+var geojsonMarkerOptions = {
+    radius: 8,
+    fillColor: "#ff7800",
+    color: "#000",
+    weight: 1,
+    opacity: 1,
+    fillOpacity: 0.8
+};
+
+console.log("HERE");
+var artistName
+var EventData = function () {
+    artistName = d3.select('input').property('value')
+    console.log(artistName)
+};
+
+var link = "/api_geojson/" + artistName;
+
+d3.json(link, function (data) {
+    // console.log(error);
+    console.log(data);
+    // Creating a GeoJSON layer with the retrieved data
+    createFeatures(data);
+});
diff --git a/WebsiteStructure/templates/artist.html b/WebsiteStructure/templates/artist.html
@@ -10,7 +10,7 @@ <h1 class="display-3">Artist</h1>
         <p>
             Doing something that has to do with artist. :)
         </p>
-        <p>{{artist_name}}</p>
+        <!-- <p>{{artist_name}}</p> -->
         <form class="form-inline my-2 my-lg-0 ">
             <input id='inputbox' class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="artistName">
             <button class="btn btn-outline-success my-2 my-sm-0 text-dark" type="button" onclick="EventData()">Search Artist</button>