ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

simplyfied jquery mobile example

Browse Source
This commit is contained in:
fbuchinger
2012-05-03 17:47:54 +03:00
parent 743dc9a738
commit 678bf86337
1 changed files with 95 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
examples/mobile-jq.js
View File

@@ -3,101 +3,108 @@ window.location.replace(window.location.href.split("#")[0] + "#mappage");
var selectedFeature = null;
$(document).ready(function() {
// fix height of content
function fixContentHeight() {
var footer = $("div[data-role='footer']:visible"),
content = $("div[data-role='content']:visible:visible"),
viewHeight = $(window).height(),
contentHeight = viewHeight - footer.outerHeight();
// fix height of content
function fixContentHeight() {
var footer = $("div[data-role='footer']:visible"),
content = $("div[data-role='content']:visible:visible"),
viewHeight = $(window).height(),
contentHeight = viewHeight - footer.outerHeight();
if ((content.outerHeight() + footer.outerHeight()) !== viewHeight) {
contentHeight -= (content.outerHeight() - content.height() + 1);
content.height(contentHeight);
}
if (window.map && window.map instanceof OpenLayers.Map) {
map.updateSize();
} else {
// initialize map
init(function(feature) {
selectedFeature = feature;
$.mobile.changePage("#popup", "pop");
});
initLayerList();
}
if ((content.outerHeight() + footer.outerHeight()) !== viewHeight) {
contentHeight -= (content.outerHeight() - content.height() + 1);
content.height(contentHeight);
}
$(window).bind("orientationchange resize pageshow", fixContentHeight);
document.body.onload = fixContentHeight;
// Map zoom
$("#plus").click(function(){
map.zoomIn();
});
$("#minus").click(function(){
map.zoomOut();
});
$("#locate").click(function(){
var control = map.getControlsBy("id", "locate-control")[0];
if (control.active) {
control.getCurrentLocation();
} else {
control.activate();
}
});
$('#popup').live('pageshow',function(event, ui){
var li = "";
for(var attr in selectedFeature.attributes){
li += "<li><div style='width:25%;float:left'>" + attr + "</div><div style='width:75%;float:right'>"
+ selectedFeature.attributes[attr] + "</div></li>";
}
$("ul#details-list").empty().append(li).listview("refresh");
});
$('#searchpage').live('pageshow',function(event, ui){
$('#query').bind('change', function(e){
$('#search_results').empty();
if ($('#query')[0].value === '') {
return;
}
$.mobile.showPageLoadingMsg();
// Prevent form send
e.preventDefault();
var searchUrl = 'http://ws.geonames.org/searchJSON?featureClass=P&maxRows=10';
searchUrl += '&name_startsWith=' + $('#query')[0].value;
$.getJSON(searchUrl, function(data) {
$.each(data.geonames, function() {
var place = this;
$('<li>')
.hide()
.append($('<h2 />', {
text: place.name
}))
.append($('<p />', {
html: '<b>' + place.countryName + '</b> ' + place.fcodeName
}))
.appendTo('#search_results')
.click(function() {
$.mobile.changePage('#mappage');
var lonlat = new OpenLayers.LonLat(place.lng, place.lat);
map.setCenter(lonlat.transform(gg, sm), 10);
})
.show();
});
$('#search_results').listview('refresh');
$.mobile.hidePageLoadingMsg();
});
if (window.map && window.map instanceof OpenLayers.Map) {
map.updateSize();
} else {
// initialize map
init(function(feature) {
selectedFeature = feature;
$.mobile.changePage("#popup", "pop");
});
// only listen to the first event triggered
$('#searchpage').die('pageshow', arguments.callee);
});
initLayerList();
}
}
// one-time initialisation of button handlers
$("#plus").live('click', function(){
map.zoomIn();
});
$("#minus").live('click', function(){
map.zoomOut();
});
$("#locate").live('click',function(){
var control = map.getControlsBy("id", "locate-control")[0];
if (control.active) {
control.getCurrentLocation();
} else {
control.activate();
}
});
//fix the content height AFTER jQuery Mobile has rendered the map page
$('#mappage').live('pageshow',function (){
fixContentHeight();
});
$(window).bind("orientationchange resize pageshow", fixContentHeight);
$('#popup').live('pageshow',function(event, ui){
var li = "";
for(var attr in selectedFeature.attributes){
li += "<li><div style='width:25%;float:left'>" + attr + "</div><div style='width:75%;float:right'>"
+ selectedFeature.attributes[attr] + "</div></li>";
}
$("ul#details-list").empty().append(li).listview("refresh");
});
$('#searchpage').live('pageshow',function(event, ui){
$('#query').bind('change', function(e){
$('#search_results').empty();
if ($('#query')[0].value === '') {
return;
}
$.mobile.showPageLoadingMsg();
// Prevent form send
e.preventDefault();
var searchUrl = 'http://ws.geonames.org/searchJSON?featureClass=P&maxRows=10';
searchUrl += '&name_startsWith=' + $('#query')[0].value;
$.getJSON(searchUrl, function(data) {
$.each(data.geonames, function() {
var place = this;
$('<li>')
.hide()
.append($('<h2 />', {
text: place.name
}))
.append($('<p />', {
html: '<b>' + place.countryName + '</b> ' + place.fcodeName
}))
.appendTo('#search_results')
.click(function() {
$.mobile.changePage('#mappage');
var lonlat = new OpenLayers.LonLat(place.lng, place.lat);
map.setCenter(lonlat.transform(gg, sm), 10);
})
.show();
});
$('#search_results').listview('refresh');
$.mobile.hidePageLoadingMsg();
});
});
// only listen to the first event triggered
$('#searchpage').die('pageshow', arguments.callee);
});
function initLayerList() {
$('#layerspage').page();
$('<li>', {