CODEWITHSUNDEEP
javascripthtml
EddyTheB
EddyTheB

Reputation: 3200

Access javascript variable outside of function

I have an init() function which creates an image overlay for a map when the html body is loaded. within the function a mapOverlay variable is created. It's basically the function under "Add overview window to map" here: http://www.ordnancesurvey.co.uk/business-and-government/products/os-openspace/api/code-playground.html (Ordnance Survey are the UK's mapping agency, this uses their mapping tool).

Now I would like to change the image overlay using a html dropdown. How do I get access to the original mapOverlay variable in order to change certain values on it?

Here's some example code which I hope will demonstrate the problem.

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Testing OS OpenSpace</title>

<script type="text/javascript" 
src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=BA08531D8339984EE0405F0AC86026A9";>
</script>

<script type="text/javascript">

// Define the osMap variable
var osMap;

// This function creates the map and is called by the div in the HTML
function init()
  {
  // Create new map  
  osMap = new OpenSpace.Map('map');     
  // Define image overlay with URL  
  var mapOverlay = new OpenSpace.Layer.MapOverlay("logo");
  mapOverlay.setHTML('<img src="Image1.jpg" style="width: 100%; height: 100%; opacity: 0.8;"/>');
  mapOverlay.setPosition(new OpenLayers.LonLat(391500, 805000));
  mapOverlay.setSize(new OpenLayers.Size(3700, 4000));
  osMap.addLayer(mapOverlay);
  // Set map centre in National Grid Eastings and Northings and select zoom level 4
  osMap.setCenter(new OpenSpace.MapPoint(393000, 807000), 6);
  // Set the mapOverlay as a document property, so that it can be changed.
  }

// This function changes the image, or I'd like it to.
function ChangeImage()
  {
    // Get the choice from the dropdown. this bit works.
    var Choice_ = document.getElementById('Choice');
    var Choice = Choice_.options[Choice_.selectedIndex].value;
    // Edit the mapOverlay, not sure how to achieve this part.
    mapOverlay.setHTML('<img src="$Choice" style="width: 100%; height: 100%; opacity: 0.8;"/>');
  }

</script>

<style>
  html, body {height: 100%;}
  #map {width: 700px; height: 500px; border:1px solid black;}
</style>
</head>  

<body onload="init()" id='Body'>

<!-- The div below holds the map -->
<div id="map"></div>

<!-- Now some options for which datasets to display. -->
<td><select id='Choice' onchange="ChangeImage()">
    <option value="Image1.jpg" selected="selected">1</option>
    <option value="Image2.jpg">2</option>
    </select>
</td>

</body>
</html>

So, what I'm hoping to achieve is to get the mapOverlay variable from the init() function, and make use of it in the ChangeImage() function. Is this feasible? Perhaps this is limited by the nature of the OS openspace API, in which case I'd be better asking on their community page. But I was hoping that situations similar to this might come up often enough in javascript that the query is relevent to a more general discussion.

Upvotes: 0

Views: 1407

Answers (1)

Thoronwen
Thoronwen

Reputation: 608

You need to declare the variable outside of the scope of your function to be able to use it in other functions.

So:

<script>
  var mapOverlay;
  function init() 
  {
    //stuff
    mapOverlay = new OpenSpace.Layer.MapOverlay("logo");
    //more stuff
  }
  function ChangeImage()
  {
    //stuff
    mapOverlay.setHTML('<img src="$Choice" style="width: 100%; height: 100%; opacity: 0.8;"/>');
  }
</script>

Upvotes: 3

Related Questions