Skip to content

Instantly share code, notes, and snippets.

@danswick

danswick/index.html

Last active April 13, 2017 21:32
Show Gist options
  • Save danswick/3a86273154e55ba5d440a9044d520711 to your computer and use it in GitHub Desktop.
Save danswick/3a86273154e55ba5d440a9044d520711 to your computer and use it in GitHub Desktop.
Download ZIP
POPOS ranking map
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.css' rel='stylesheet' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="script.js"></script>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
#rankMenu {
position: absolute;
top: 0;
width: 100%;
background-color: #fff;
padding: 1em;
}
</style>
</head>
<body>
<div id='map'></div>
<div id='rankMenu'>
<p>Please choose a rank for <span id='poposNameRank'></span>:</p>
<form id='rankForm'>
<input type="radio" name="rank" value="1" checked> 1
<input type="radio" name="rank" value="2"> 2
<input type="radio" name="rank" value="3"> 3
<input type="radio" name="rank" value="4"> 4
<input type="radio" name="rank" value="5"> 5
<input type="submit">
</form>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZGFuc3dpY2siLCJhIjoiY2l1dTUzcmgxMDJ0djJ0b2VhY2sxNXBiMyJ9.25Qs4HNEkHubd4_Awbd8Og';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/dark-v9', //stylesheet location
center: [-122.40891794350478,37.78426957450074], // starting position
zoom: 14 // starting zoom
});
var datasetId = "cj1csj7op005j32no9v0c0s6c";
var rawGeoJSON;
map.on('load', function(){
map.addSource('my-dataset', {
type: 'geojson',
data: {
"type": "FeatureCollection",
"features": []
}
});
map.addLayer({
"id": "dataset-point",
"type": "circle",
"source": "my-dataset",
"layout": {},
"paint": {
"circle-color": {
"property": "rank",
"stops": [
[0, "#e2e2da"],
[1, "#edf8e9"],
[2, "#bae4b3"],
[3, "#74c476"],
[4, "#31a354"],
[5, "#006d2c"]
]
},
"circle-stroke-width": 2,
"circle-stroke-color": "#FFFFFF",
"circle-radius": 7
},
"filter": [
"all",
["==", "$type", "Point"]
]
});
getData(datasetId);
});
// Change the cursor to a pointer when the it enters a feature in the 'dataset-point' layer.
map.on('mouseenter', 'dataset-point', function () {
map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
map.on('mouseleave', 'dataset-point', function () {
map.getCanvas().style.cursor = '';
});
$('#rankMenu form').submit(function(e){
e.preventDefault();
var menuElData = $("#rankMenu").data();
var rankValue = parseFloat($("input[name=rank]:checked").val());
var currentRank = parseFloat(menuElData.currentRank),
timesRated = parseFloat(menuElData.timesRated),
currentFeatureId = menuElData.featureId;
for (i = 0; i < rawGeoJSON.features.length; i++) {
if (rawGeoJSON.features[i].id == currentFeatureId) {
var totalOldScore = currentRank * timesRated;
var totalNewScore = (totalOldScore + rankValue) / (timesRated + 1);
rawGeoJSON.features[i].properties.rank = totalNewScore;
rawGeoJSON.features[i].properties["times-rated"] = timesRated + 1;
// update the dataset!
updateFeature(rawGeoJSON.features[i]);
}
}
});
function setFeatureId(){
return getData(datasetId);
}
function getData(datasetId) {
$.ajax({
url : 'https://evening-sierra-80988.herokuapp.com/dataset?datasetId=' + datasetId,
type : 'GET',
dataType: 'json'
})
.done(function(oldData){
rawGeoJSON = featureIdToProperty(oldData);
map.getSource('my-dataset').setData(rawGeoJSON);
setClickListener();
return rawGeoJSON;
});
}
function setClickListener() {
// Center the map on the coordinates of any clicked symbol from the 'dataset-point' layer.
map.on('click', 'dataset-point', function (e) {
var currentFeature = e.features[0];
map.flyTo({center: currentFeature.geometry.coordinates});
console.log(e.features);
var isRanked = currentFeature.properties["times-rated"] == 0 ? "we haven't visited yet!" : currentFeature.properties.rank + "/5";
var popupContent = "<h2>" + currentFeature.properties.Name + "</h2><div>" + currentFeature.properties.Title + "</div><div class='popos-rating'><srtong>Rank: </strong>" + isRanked + "</div>";
new mapboxgl.Popup()
.setLngLat(currentFeature.geometry.coordinates)
.setHTML(popupContent)
.addTo(map);
// Store feature ID in data attribute for the rank form
var rankMenuEl = $("#rankMenu");
var rankMenuSpan = $("#poposNameRank");
rankMenuEl.data('featureId', currentFeature.properties.featureId);
rankMenuEl.data('currentRank', currentFeature.properties.rank);
rankMenuEl.data('timesRated', currentFeature.properties['times-rated']);
rankMenuSpan.text(currentFeature.properties.Name);
});
}
function featureIdToProperty(data) {
var newDataFeatures = data.features.map(function(feature){
var newFeature = feature;
newFeature.properties.featureId = newFeature.id;
return newFeature;
});
return {type: "FeatureCollection", features: newDataFeatures };
}
function updateFeature(feature){
var xmlhttp = new XMLHttpRequest(); // new HttpRequest instance
xmlhttp.open("POST", 'https://evening-sierra-80988.herokuapp.com/dataset');
xmlhttp.setRequestHeader("Content-Type", "application/json");
xmlhttp.send(JSON.stringify({"feature":feature, "datasetId": datasetId}));
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert('upload successful!');
getData(datasetId);
} else if (xmlhttp.readyState == 4 && xmlhttp.status !== 200){
alert('looks like something went wrong');
}
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment