Working with Geopedia Widget
Before starting using widget, you need a valid widget ID. Just fill in a form on the right and we will provide you with a
valid widget ID.
You can use our widget configurator where you can easily set desired settings, from
size, sidebar position, 2D/3D mode, layers and many more. Use your own widget ID or test widget functionalities with
our testing widget ID.
";
output += layers;
if($('#cbStyle').is(':checked')) {
$('#preview').append(style);
output += style;
}
}
$("#output").val(output);
}
function addMessageListener(listener) {
messageListeners.push(listener);
}
function messageListener(data) {
if ((data.command == "status") && (data.status == "INITIALIZED")) {
}
if (data.command == "features" && isExternalResult) {
//showFeatureResults(data);
//$("#results").dialog("open");
}
}
function refreshGui() {
if (!hasWidgetId) { return; }
if ($("#coordX, #coordY, #scale").is(":focus")) {
gp_postMessage({command:"setPosition", "x":$("#coordX").val(), "y":$("#coordY").val(), "zoomLevel":$("#scale").val()})
} else {
gp_postMessage({"command":"getInfo"});
}
checkConf();
}
var tempParams = "";
function setParams() {
params = "?widgetId=" + $("#idInput").val().trim() + "&" ;
var sideP = $("input[name='sidebar']:checked").val();
if (sideP == "left" || sideP == "right") {
params += "sidebar=" + sideP + "&";
} else if(sideP == "external") {
params += "getResults=true&";
}
tempParams = $("#panZoomPosition").attr('id') + "=" + $("#panZoomPosition").val();
setSettings("panZoomPosition", $("#panZoomPosition").val());
params += tempParams;
tempParams = "&" + $("#panZoomMode").attr('id') + "=" + $("#panZoomMode").val();
setSettings("panZoomMode", $("#panZoomMode").val());
params += tempParams;
tempParams = "&showStatusBar=" + $("#cbStatus").prop('checked');
setSettings("showStatusBar", $("#cbStatus").prop('checked'));
params += tempParams;
}
function refreshIframe(is3d) {
isWaiting = false;
checkMainBtn();
if (is3d) {
$("#geopediaWidget").attr('src', baseUrl + "?widgetId=" + $("#idInput").val().trim() + "&3d");
} else {
setParams();
$("#geopediaWidget").attr('src', baseUrl + params);
}
$("#geopediaWidget").attr('name', Date.now());
$("#settingsPanel").slideDown();
}
function checkMainBtn() {
if (!isWaiting) {
$("#setWidgetId").html("
Loading ...");
} else {
$("#setWidgetId").html("
Refresh");
}
}
$(document).ready(function(){
setInterval(function() {
refreshGui();
}, 250);
$("#idInput").keypress(function(e) {
if(e.which == 13) {
$("#setWidgetId").click();
}
});
$( "#osveziConfirm" ).dialog({
resizable: false,
height:230,
width: 500,
autoOpen: false,
modal: true,
title: "Refresh iframe",
buttons: {
"Osveži": function() {
$( this ).dialog( "close" );
refreshIframe(do3d);
},
"Prekliči": function() {
$( this ).dialog( "close" );
}
}
});
$('abbr').tooltip();
$("#settingsPanel").hide();
$("#build").click(function() {
buildSource();
$("#outputWrap").fadeIn();
});
$("#sidebarWrap input").prop('disabled', this.checked);
$("#cb3d").change(function() {
$("#sidebarWrap input").prop('disabled', this.checked);
});
$("#console").click(function() {
$("#outputWrap").fadeOut();
});
$("#output").focus(function(e) {
$(this).select();
e.stopPropagation();
});
$("#getLayers").click(function() {
getLayers();
});
$("input, select").change(function() {
refreshGui();
checkConf();
});
/*$("#settingsPanel input, #settingsPanel select").keypress(function() {
refreshGui();
checkConf();
});*/
$("#idInput, #output").val("");
$("#geopediaWidget").attr("src","");
$("#panZoomPosition, #panZoomMode").change(function() {
setParams();
});
$("#cb3d, #sidebarWrap input").change(function() {
//refreshIframe(do3d);
if (!hasWidgetId) {
return;
} else {
$( "#osveziConfirm" ).dialog("open");
}
});
$("#setWidgetId").click(function() {
if (!isWaiting) {
return;
}
hasLayers = false;
$('#groupsHolder').hide();
if ($("#idInput").val() == "") {
alert("Vpišite widgetID!");
$("#settingsPanel").hide();
$("#iframNotif").show();
return;
}
$(this).html("
Osveži");
$("#iframNotif").hide();
refreshIframe(do3d);
hasWidgetId = true;
});
if (typeof window.addEventListener !== 'undefined') {
window.addEventListener('message', gp_onMessage, false);
} else if (typeof window.attachEvent !== 'undefined') {
window.attachEvent('onmessage', gp_onMessage);
}
addMessageListener(messageListener);
});
})(jQuery)
Once you have your widgetId, you can start configuring the lab to fit your needs.
Widget settings