0

As a response to the community's requests to be more specific about my issue and submit all the code, I took the liberty of editing the previous post hoping that this time the problem will be explained clearer and if a solution is found, it can help others who stumble upon a situation such as mine.

In my project, I created a map which contains a couple of overlays, out of which 4 belong to Google Maps (Terrain, Sattelite, Roads and Hybrid).

My goal was to create a function that calls the OpenLayers.Control.DrawFeature to define a layer in which the end user can draw a polygon. The function is triggered when a button is pressed.

I listened to Thomas's suggestion and inserted an alert line to make sure that by pressing the button the function is working. The result is that I got the message displayed on my screen when I clicked the button but nothing more than that.

My question is: What kind of adjustments should I make to the function to be able to make it work? Where did I go wrong?

I inspired myself from: http://dev.openlayers.org/examples/draw-feature.html but since I am pretty new in the Internet GIS business (most likely because of the lack of experience), my custom function did not work.

If I copy the code from the upper presented link, it works perfectly but my goal is to understand its logic and be able to create something independent.

Here is my HTML code:

     <html lang="en">

Myproject body { width: 960px; height: 500px; position: relative; } #map { width: 100%; height: 100%; } div.fill { width: 100%; height: 100%; } div.ol-mouse-position { width:50px; height:50px; position=relative; color:red; } .layersDiv { background-color: red; }

scaleline-id

{ background: green; margin:10px; font:Times New Roman; width:50px; font-color:red; }

Coordinates

{ background: pink; margin: 10px; position:absolute; font-color:blue; }

  <script src="OL2.js" type="text/javascript"></script>
<script type="text/javascript">
var map = new OpenLayers.Map('map', {
    projection: 'EPSG:3857',
    layers: [
        new OpenLayers.Layer.Google(
            "Google Physical",
            {type: google.maps.MapTypeId.TERRAIN}
        ),
        new OpenLayers.Layer.Google(
            "Google Streets", // the default
            {numZoomLevels: 22}
        ),
        new OpenLayers.Layer.Google(
            "Google Hybrid",
            {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
        ),
        new OpenLayers.Layer.Google(
            "Google Satellite",
            {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
        )
    ],
    center: new OpenLayers.LonLat(13.17, 55.70)
                   .transform('EPSG:4326', 'EPSG:3857'),
    zoom: 6,
    scales: [5000, 10000, 25000, 30000, 50000],
    units: 'm',
    });
    function theta()
{
alert('The function is working');
var x = new OpenLayers.Layer.Vector ("one");
var p = new OpenLayers.Control.DrawFeature (x, new OpenLayers.Handler.Polygon);
map.addLayer(x);
map.addControl(p);
p.activate();
}

</script>
<center>
<center>
<div id="Coordinates"></div>
<form name="Background layer selection">Select layer<br>
<input type="checkbox" id="NBR" value="gmr">Neighbourhoods</input><br>
<input type="checkbox" id="RDS" value="gmt">Roads</input><br>
<input type="checkbox" id="CON" value="gms">Constructions</input><br>
<input type="checkbox" id="GMH" value="gmh">Google Maps Hybrid</input><br>
<input type="checkbox" id="dr" value="dr">Drawing</input><br>
</form>
<button type="button" name="Buton1" onclick="sel()">Add Layer</button>
<button type="button" name="Buton2" onclick="remove()">Remove Layer</button>
<button type="button" name="Buton3" onclick="setcenter()">Set Center</button>
<button type="button" name="Buton4" onclick="displayp()">Display Current Projection</button>
<button type="button" name="Buton5" onclick="theta()">Draw Point</button>

</body>

The OL2.js is the OpenLayers v 2.14 script copied locally.

  • 1
    Can you show us your html? Did you insert a console.log('Something happened!'); within function theta() to check if your function is really called when pressing your button. – ThomasG77 Dec 12 '14 at 20:28
  • Where is the polygon you wanted to draw? – BradHards Dec 13 '14 at 3:55
  • Please use descriptive titles for your threads otherwise they are useless for other people who might come here with the same problem – underdark Dec 13 '14 at 13:57
  • ThomasG77: I have updated my question. The function returns the alert window, so the button calls it. BradHards: I am afraid I do not understand what you mean. underdark: I have updated my question. I hope it sounds clearer. – Azar Dec 13 '14 at 19:29
1

Assuming that your theta function is being called, the issue that I see is that you are instantiating a new handler, which you don't need.

The following theta function should work:

function theta()
{
  var x = new OpenLayers.Layer.Vector ("one");
  var p = new OpenLayers.Control.DrawFeature (x, OpenLayers.Handler.Polygon);
  map.addLayer(x);
  map.addControl(p);
  p.activate();
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.