Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

got everything working but... #33

Open
wants to merge 1 commit into
base: 04-assignment
Choose a base branch
from
Open

got everything working but... #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion app.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,15 @@ def getData():

client.db_close()

maxPrice = 0
minPrice = 100000000000

for record in records:
if record > maxPrice:
maxPrice = record
if record < minPrice:
minPrice = record

#ITERATE THROUGH THE DATA SET TO FIND THE MINIMUM AND MAXIMUM PRICE (YOU DID THIS IN A PREVIOUS ASSIGNMENT)

output = {"type":"FeatureCollection","features":[]}
Expand All @@ -107,6 +116,7 @@ def getData():
feature["id"] = record._rid
feature["properties"]["name"] = record.title
feature["properties"]["price"] = record.price
feature["properties"]["normal"] = remap(record.price, minPrice, maxPrice, 0, 1)
#ADD THE NORMALIZED PRICE AS A PROPERTY TO THE DATA COMING BACK FROM THE SERVER
#REMEMBER TO USE THE REMAP() HELPER FUNCTION WE DEFINED EARLIER
feature["geometry"]["coordinates"] = [record.latitude, record.longitude]
Expand Down Expand Up @@ -137,7 +147,7 @@ def getData():
pos_y = int(remap(record.latitude, lat1, lat2, numH, 0))

#TRY TESTING DIFFERENT VALUES FOR THE SPREAD FACTOR TO SEE HOW THE HEAT MAP VISUALIZATION CHANGES
spread = 12
spread = 5

for j in range(max(0, (pos_y-spread)), min(numH, (pos_y+spread))):
for i in range(max(0, (pos_x-spread)), min(numW, (pos_x+spread))):
Expand Down
22 changes: 13 additions & 9 deletions static/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,17 @@ var map = L.map('map').setView([22.539029, 114.062076], 16);

//this is the OpenStreetMap tile implementation

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
// attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
// }).addTo(map);

//uncomment for Mapbox implementation, and supply your own access token

// L.tileLayer('https://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={accessToken}', {
// attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
// mapid: 'mapbox.light',
// accessToken: [INSERT YOUR TOKEN HERE!]
// }).addTo(map);
L.tileLayer('https://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
mapid: 'mapbox.light',
accessToken: 'pk.eyJ1Ijoic2t5bGFyYnIiLCJhIjoiY2lmaW84czRuYm5ybXJ5bHh5YnM5a3lzdiJ9.EFoA13UUx70WH41vhjRyuw'
}).addTo(map);

//create variables to store a reference to svg and g elements

Expand Down Expand Up @@ -60,7 +60,7 @@ function updateData(){
var lng2 = mapBounds["_northEast"]["lng"];

// TEST VARIATIONS OF CELL SIZES TO CHANGE THE RESOLUTION OF THE ANALYSIS OVERLAY
var cell_size = 25;
var cell_size = 50;
var w = window.innerWidth;
var h = window.innerHeight;

Expand Down Expand Up @@ -89,6 +89,10 @@ function updateData(){
.on("mouseout", function(){
tooltip.style("visibility", "hidden");
})

circles
.attr("fill", function(d) { return "hsl(" + Math.floor((1-d.properties.normal)*250) + ", 100%, 50%)"; });

// USING .attr("fill", ), ADD A PROPERTY FOR THE CIRCLES TO DEFINE THEIR COLOR BASED ON THE NORMALIZED PRICE
// IMPLEMENT THE PRICE NORMALIZATION ON THE SERVER AND SEND WITH THE REST OF THE DATA BACK TO THE CLIENT
// REMEMBER TO REMOVE THE FILL STYLING FOR THE CIRCLES FROM THE style.css FILE OR THIS WILL OVERRIDE THE NEW COLOR
Expand Down
2 changes: 1 addition & 1 deletion static/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ html, body, #map {

circle {
fill-opacity: .3;
fill: red;
/* fill: red;*/
stroke-width: 0px;
}
circle:hover {
Expand Down