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.
console.log('Something happened!');withinfunction theta()to check if your function is really called when pressing your button.