Skip to content

Commit

Permalink
began testing listview on search2.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@jhawley
jhawley committed Jan 14, 2017
1 parent 2fbe23a commit 7ae189f
Showing 1 changed file with 272 additions and 0 deletions.
272 changes: 272 additions & 0 deletions search2.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,272 @@
<html>
<head>
<link rel="stylesheet" href="js/leaflet/leaflet.css" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/l.geosearch.css" />
<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
<script src="js/l.control.geosearch.js"></script>
<script src="js/l.geosearch.provider.openstreetmap.js"></script>
<script src="js/l.geosearch.provider.esri.js"></script>
<title></title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!--script src="//code.jquery.com/jquery-1.10.2.min.js"></script-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
.ui-content.mapfix {
position: absolute;
top: 40px;
right: 0;
bottom: 40px;
left: 0;
padding: 0 !important;
}
</style>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Nearest Parks</h1>
<h3>Click to see the park on a map.</h3>
</div>
<div role="main" class="ui-content">
<ul id='parkList' data-role="listview"></ul>
</div>
</div>

<div data-role="page" id="page2">
<div data-role="content" id="map" class="mapfix">
<div id='mapid' style='height:100%'></div>
</div>
</div>

<div data-role="page" id="page3">
<div role="main" class="ui-content">
<div id='infoPane' style=''><div id="parkInfo"></div><button type="buttom" id="showMap" class="btn btn-primary">Back to Map</button></div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/misc.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">

var coordinates = [37.2253366,-80.4316803 ] //latitude, longitude
var address = "";
var map;
var searchingAddress = false;
var searchingParks = false;

function finished(map) {
if(!searchingAddress && !searchingParks) {
console.log("finished");
}
}

function mapLocation (result) {
var marker = L.marker(coordinates).addTo(map);
}

function showInfo() {
$.mobile.changePage("#page3",{transition:"slide"});
console.log("showing information");
$("#infoPane").show();
$(".parkInfo").hide();
}

function hideInfo() {
console.log("showing information");
window.history.back();
}

$("#showMap").click(hideInfo);
$(document).on('click',".showInfo",function(e) {
showInfo();
console.log(e.target);
$("#info"+e.target.id).show();
});

function updateMap(map, search) {
console.log("updating map...");
$("#map").show();
map.invalidateSize();
$("#search").hide();
var getVars = getUrlVars();

for (var property in getVars) {
console.log(property);
if(property == "address") {
address = getVars[property];
} else {
// handle amenities
}
}

if(getVars['location']) {
coordinates=[getVars['lat'],getVars['lon']];
var marker = L.marker(coordinates);
marker.addTo(map).bindPopup("Your Location").openPopup();
map.parkCoordinates.push(marker);
} else {
searchAddress = true;
search.geosearch(address);
}
getParks(map, [],coordinates);
}

function getParks(map, amenities, coordinates) {
var parks = []
searchParks = true;
//$.ajax("http://parks.api.codefornrv.org/parks",{
$.ajax("parks_placeholder.json",{
dataType:"json",
success: function(data) {
data.map(function(park) {
park.popup = {};
park.popup["Directions"] = "<a target='_blank' href=\"https://www.google.com/maps/dir/'"+coordinates[0]+","+coordinates[1]+"'/37.249584,-80.429809/\">click for directions</a>";
park.popup["Name"] = park.park_name;
var names = [];
park.alternate_names.names.map(function(name) {
names.push(name.name);
});
park.popup["Alternative Names"] = names.toString();
park.popup["Description"] = park.description;
park.popup["Address"] = park.address;
park.popup["Website"] = "<a target='_blank' href='"+park.url+"'>click here</a>";
$("#parkInfo").innerHTML = park.popup;
park.popup2 = {};
park.popup2["Name"] = park.park_name;
park.popup2["Information"] = '<button type="button" class="btn btn-primary showInfo" id="'+park.id+'">Show Information</button>';
parks.push({id: park.id, name: park.park_name, center: [37.249584, -80.429809], popup: park.popup2, info: park.popup});
});
parks.map(function(park) {
var marker = L.marker(park.center).addTo(map);
var parkText = "<dl>";
Object.keys(park.popup).map(function(key) {
parkText += "<dt>"+key+"</dt>";
parkText += "<dd>"+park.popup[key]+"</dd>";
});
parkText += "</dl>";
var parkInfo = "<div class='parkInfo' id='info"+park.id+"'><dl>";
Object.keys(park.info).map(function(key) {
parkInfo += "<dt>"+key+"</dt>";
parkInfo += "<dd>"+park.info[key]+"</dd>";
});
parkInfo += "</dl></div>";
marker.bindPopup(parkText);
$("#parkInfo").append(parkInfo);
$("#parkList").append('<li><a href="#page2" data-transition="slide" rel="'+park.id+'">'+park.name+'</a></li>').listview('refresh');
map.parkCoordinates.push(marker);
});
if(getUrlVars()['location']) {
map.fireEvent('geosearch_groups_updated');
}
}
});
console.log(parks);
return parks;
}

var allParks = [
{id: 1, name: 'Brookfield Village', center: [37.249584, -80.429809]},
{id: 1, name: 'Cedar Hill Park', center: [37.2039138,-80.3943793]},
{id: 1, name: 'Crestview Tot Lot Playground', center: [37.221648, -80.396510]},
{id: 1, name: 'Dehart Street Tot Lot Park', center: [37.210059, -80.406139]},
{id: 1, name: 'Dog Park', center: [37.253124,-80.4356664]}
];

$(document).on("pageshow","#page2",function(event){
console.log("pageshow fired on map");
window.setTimeout(function(){
map.invalidateSize();
map.setView(coordinates, 13);
map.trigger('geosearch_showlocation');
},500);
});

$(document).ready(function() {
$( "#parkList" ).listview({
create: function( event, ui ) {}
});
map = L.map('mapid').setView(coordinates, 13);
map.addControl(new customControl());
map.parkCoordinates = [];
var x = document.getElementById("x");
var byLocation = document.getElementById("byLocation");
var tries = 0;
var provider = new L.GeoSearch.Provider.OpenStreetMap();
var search = new L.Control.GeoSearch({
provider: provider,
showPopup: true
});
search.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);

map.on('geosearch_showlocation', function(result) {
searchAddress = false;
coordinates = [result.Location.Y, result.Location.X]
console.log(coordinates);
map.parkCoordinates.push(result.Marker);
result.Marker.bindPopup("Your location: '"+address+"'");
setTimeout(function() {map.fireEvent('geosearch_groups_updated'); },500);
finished(map);
});

map.on('geosearch_groups_updated', function() {
searchParks = false;
console.log("fired");
var group = new L.featureGroup(map.parkCoordinates);
console.log(map.parkCoordinates);
map.fitBounds(group.getBounds(),{padding:[50,50]});
finished(map);
});

map.on('geosearch_error',function() {
searchAddress = false;
++tries;
console.log("failed searches: "+tries);
if(tries == 1){
provider = new L.GeoSearch.Provider.Esri();
updateMap(map, search)
} else {
alert("Could not find that address with any providers");
window.location = "index.html";
}
finished(map);
});

updateMap(map, search)
});

var customControl = L.Control.extend({

options: {
position: 'topleft'
},

onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
container.innerHTML = '<button type="button" class="btn btn-primary">Back to Search</button>';

container.style.backgroundColor = 'white';
container.style.width = '100px';
container.style.height = '30px';

container.onclick = function(){
console.log('buttonClicked');
window.location = 'index.html';
}
return container;
},

});
</script>
</body>
</html>

0 comments on commit 7ae189f

Please sign in to comment.