OS OpenSpace [logo]

OS OpenSpace Forum » OS OpenSpace » Newbie Area

Thread: Sidebars for OS OpenSpace Maps

Reply to this Thread Reply to this Thread Search Forum Search Forum Back to Thread List Back to Thread List

Permlink Replies: 4 - Pages: 1 - Last Post: 03-Apr-2012 18:19 by: pw240639
pw240639

Posts: 20
Registered: 07/08/08
Sidebars for OS OpenSpace Maps
Posted: 10-Feb-2012 11:34
  Click to reply to this thread Reply

I have recently made my first OS OpenSpace map which uses data from a GeoRSS feed.

So far so good but now I want to add a sidebar, similar to Google Maps,.ideally with a "pop-down" select box to cater for tens of marker names..

Can you guide me to relevant tutorials/examples using OpenSpace ?

Phil

OS OpenSpace Team

Posts: 1,117
Registered: 31/01/08
Re: Sidebars for OS OpenSpace Maps
Posted: 13-Feb-2012 08:16   in response to: pw240639
  Click to reply to this thread Reply

Hi 'pw240639'

Is this what you are after: http://demos.ordnancesurvey.co.uk/public/demos/openspace/Workshop_2/exercise_5_complete.html if so have a look at the source code.

Kind regards

Tamsyn
OS OpenSpace Team

pw240639

Posts: 20
Registered: 07/08/08
Re: Sidebars for OS OpenSpace Maps
Posted: 22-Feb-2012 20:12   in response to: OS OpenSpace Team
  Click to reply to this thread Reply

With your help I created a map with a sidebar:

http://www.sundial.pwp.blueyonder.co.uk/OpenSpace/DSHSNPmaps.html


My problem now is that I have tens of records tc add the map and I think I need with a "pop-down" select box , in the sidebar , so that the viewer can select one from many records we will be added to the GeoRSS file.

Once again, your advice and examples would be helpful,

Phil Walker

pw240639

Posts: 20
Registered: 07/08/08
Re: Sidebars for OS OpenSpace Maps
Posted: 24-Mar-2012 12:07   in response to: pw240639
  Click to reply to this thread Reply

> With your help I created a map with a sidebar:
>
> http://www.sundial.pwp.blueyonder.co.uk/OpenSpace/DSHSNPmaps.html
>
>
> My problem now is that I have tens of records tc add
> the map and I think I need with a "pop-down" select
> box , in the sidebar , so that the viewer can select
> one from many records we will be added to the GeoRSS
> file.
>
> Once again, your advice and examples would be
> helpful,
>
> Phil Walker

I have now been able to make a "pop-down" select
box , in the sidebar but I have problems with the "onchange" to get the selected item to open the particular infoWindow

Here is my webpage:
http://www.sundial.pwp.blueyonder.co.uk/OpenSpace/DSHSNPmaps-select-v1.html

and here are snippets


// ==== first part of the select box ===
var select_html = '<select style = "color:maroon; font-size: 16px; background-color:yellow;" onchange="handleSelected(this)">' +
'<option selected> - Select a SNAP ImageTitle - <\/o';
// =====================================


// ======= Add the entry to the select box =====
select_html += '<option> ' + names + '<\/o';
// ==========================================================:

// === final part of the select box ====
select_html += '<\/s';
document.getElementById("selection").innerHTML = select_html;



// ======= This function handles selections from the select box ====
// === If the dummy entry is selected, the info window is closed ==
function handleSelected(opt) {
var i = opt.selectedIndex - 1;
alert(" selectedIndex "+ i);

if (i > -1) {
var size = new OpenLayers.Size(400,400);
osMap.openInfoWindow(osmarker.icon, osmarker.lonlat, content, size);
//alert("openInfoWindow" + i);
}
else {
map.closeInfoWindow();
}
}

Clearly the problem is with the "openInfoWindow" line for the "onChange" but if I click in the icon on the map it works Ok.

Please help!

Phil


pw240639

Posts: 20
Registered: 07/08/08
Re: Sidebars for OS OpenSpace Maps
Posted: 03-Apr-2012 17:32   in response to: pw240639
  Click to reply to this thread Reply

> I have now been able to make a "pop-down" select
> box , in the sidebar but I have problems with the
> "onchange" to get the selected item to open the
> particular infoWindow
>
> Here is my webpage:
> http://www.sundial.pwp.blueyonder.co.uk/OpenSpace/DSHSNPmaps-select-v1.html
>
> and here are snippets
>
>
> // ==== first part of the select box ===
> var select_html = '<select style = "color:maroon;> font-size: 16px; background-color:yellow;"> onchange="handleSelected(this)">' + '<option selected> - Select option selected> - Select a SNAP ImageTitle - <\/o';
> // =====================================
> // ======= Add the entry to the select box =====
> select_html += '<option> ' + names + '<\/o';
> // ==========================================================:
>
> // === final part of the select box ====
> select_html += '<\/s';
>document.getElementById("selection").innerHTML = select_html;
>
>
>
> // ======= This function handles selections from the select box ====
> // === If the dummy entry is selected, the info> window is closed ==
> function handleSelected(opt) {
> var i = opt.selectedIndex - 1;
> alert(" selectedIndex "+ i);
> if (i > -1) {
> var size = new OpenLayers.Size(400,400);
> osMap.openInfoWindow(osmarker.icon, osmarker.lonlat, content, size);
> //alert("openInfoWindow" + i);
> }
> else {
> map.closeInfoWindow();
>
> }

>Clearly the problem is with the "openInfoWindow" line for
> the "onChange" but if I click in the icon on the map
> it works Ok.
>
> Please help!
>
> Phil

Good news!

By dint of using Firebug, and inspecting the DOM in detail, I find that the crucial Javascript line is:
osMap.openInfoWindow(osmarker.icon, osmarker.lonlat, osmarkers.eventObj.html, size);

I have to say that nowhere was I able to find this in the solution in the documentation but perhaps, as a relative newbie, I did'nt know where to look.

Message was edited by: pw240639

Oh dear!

I forgot to ensure that my crucial Javascript line of code was correctly transcribed with &lt &gt &#91 and &#93 etc.

Here is how it ought to be:

osMap.openInfoWindow(osmarker&#91i&#93.icon, osmarker&#91i&#93.lonlat, osmarkers&#91i&#93.eventObj.html, size);



Message was edited by: pw240639


Legend
Expert: 51 - 1000 pts
Advanced: 31 - 50 pts
Intermediate: 16 - 30 pts
Novice: 5 - 15 pts
Newbie: 0 - 4 pts
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums