0

this is my initmap.js 

OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
defaultHandlerOptions: {
},

initialize: function (options) {
    this.handlerOptions = OpenLayers.Util.extend(
        {}, this.defaultHandlerOptions
    );
    OpenLayers.Control.prototype.initialize.apply(
        this, arguments
    );
    this.handler = new OpenLayers.Handler.Click(
        this, {
            'click': this.trigger
        }, this.handlerOptions
    );
},

trigger: function (e) {
    var lonlat = map.getLonLatFromPixel(e.xy).transform("EPSG:4326", "EPSG:900913");
    alert("You clicked near " + lonlat.lat + " N, " +
                              +lonlat.lon + " E");
    //document.getElementById("TextBox1").value = lonlat.lat;
    //document.getElementById("TextBox2").value = lonlat.lon;

}

});
function init() {
size = new OpenLayers.Size(26, 30);

var mapOptions = {
    projection: new OpenLayers.Projection("EPSG:900913"),
    displayProjection: new OpenLayers.Projection("EPSG:4326"),
    //units: "m",
    //maxResolution: 156543.0339,
    //numZoomLevels: 18,
    controls: [
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.NavToolbar(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.LayerSwitcher({ 'ascending': false }),
                    //new OpenLayers.Control.Permalink(),
                    new OpenLayers.Control.ScaleLine(),
                    //new OpenLayers.Control.Permalink('Refresh'),
                    new OpenLayers.Control.MousePosition(),
                    new OpenLayers.Control.LayerSwitcher(),
                    new OpenLayers.Control.OverviewMap({
                        mapOptions: mapOptions,
                        maximized: true,

                    }),
                ]
};

map = new OpenLayers.Map('map', mapOptions);

nav = new OpenLayers.Control.NavigationHistory();
map.addControl(nav);
panel = new OpenLayers.Control.Panel(
    { div: document.getElementById("panel") }
);
panel.addControls([nav.next, nav.previous]);
map.addControl(panel);


//Ajouter les couche google
var gphy = new OpenLayers.Layer.Google(
    "Google Physical",
    { type: google.maps.MapTypeId.TERRAIN }
);
var gmap = new OpenLayers.Layer.Google(
    "Google Streets", // the default
    {numZoomLevels: 20 }
);
var ghyb = new OpenLayers.Layer.Google(
    "Google Hybrid",
    { type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20, isBaseLayer: true }
);
var gsat = new OpenLayers.Layer.Google(
    "Google Satellite",
    { type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 20}
);
map.addLayers([gsat, ghyb, gmap, gphy]);


map.addControl(new OpenLayers.Control.MousePosition({ div: document.getElementById("LabelCoords"), numDigits: 5, prefix: "", separator: ",", mapOptions: mapOptions }));
map.setCenter(new OpenLayers.LonLat(-9.2, 31.9).transform("EPSG:4326", "EPSG:900913"), 7);
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();

 }
Improve this question
19
  • I note that the getCoordsClick function is not running even though I called I want to know why not?
    – wissam
    Commented Apr 19, 2014 at 17:19
  • I want to be sure I understand. When user clicks on map, you want to display coordinates in the textbox called "LabelCoords"? And in place of "show x" and "show y" you want to show real coordinates, for example -12.21 and 31.54 ?
    – afaf12
    Commented Apr 19, 2014 at 19:09
  • yes exactely thats what i want to do
    – wissam
    Commented Apr 19, 2014 at 19:57
  • Is this code available to see online? You can try using Google Chrome, press F12, see "console". i.imgur.com/cdQpMMw.png Do you see any error here, when you click on the map?
    – afaf12
    Commented Apr 19, 2014 at 20:06
  • i have some errore but i don understand what to do i.imgur.com/Nu8WeJs.jpg
    – wissam
    Commented Apr 19, 2014 at 20:38

1 Answer 1

Reset to default
1

You can try using OpenLayers click, and not jquery click. Here are examples: OpenLayers-2.13.1/examples/click.html, getting-the-coordinates-of-a-click-in-openlayers-map/

I created an example and uploaded to my website, it is available here: http://xerocode.com/gis/Openlayers.html

Fragments from my html file. Pay attention to the START/END blocks.

<!DOCTYPE html>
<html>
<head>
    <script src="js/OpenLayers.js"></script>
        <script type="text/javascript">
        // START
        OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
        defaultHandlerOptions: {
            'single': true,
            'double': false,
            'pixelTolerance': 0,
            'stopSingle': false,
            'stopDouble': false
        },

        initialize: function(options) {
            this.handlerOptions = OpenLayers.Util.extend(
                {}, this.defaultHandlerOptions
            );
            OpenLayers.Control.prototype.initialize.apply(
                this, arguments
            ); 
            this.handler = new OpenLayers.Handler.Click(
                this, {
                    'click': this.trigger
                }, this.handlerOptions
            );
        }, 

        trigger: function(e){
            var lonlat = map.getLonLatFromPixel(e.xy);
            document.getElementById("siteX").value = lonlat.lat;
            document.getElementById("siteY").value = lonlat.lon;
        }

        });
        // END

        var lon = 5;
        var lat = 40;
        var zoom = 5;
        var map, layer;

        function init()
        {
            map = new OpenLayers.Map( 'map' );
            layer = new OpenLayers.Layer.MapServer( "OpenLayers WMS", 
                    "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'},
                    {gutter: 15});
            map.addLayer(layer);

            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
            map.addControl( new OpenLayers.Control.LayerSwitcher() );

            // START
            var click = new OpenLayers.Control.Click();
            map.addControl(click);
            click.activate();
           // END
        }
    </script>
</head>
 <body onload="init()">
    <div id="map" class="smallmap"></div>
    <!-- START -->
    <input type="textbox" id="siteX" />
    <input type="textbox" id="siteY" />
    <!-- END -->
</body>
</html>
Improve this answer
6
  • after using this code i have after I click on the map I get this i.imgur.com/Vjx9wgx.jpg
    – wissam
    Commented Apr 19, 2014 at 20:57
  • I think the function getCoordsClick is not in a state of reading I use a master page it may be its the problem!!!
    – wissam
    Commented Apr 19, 2014 at 21:02
  • @wissam I edited my answer. I don't know your HTML structure. You only showed small part of HTML. But I think problem is conflict between jquery and openlayers. When user clicks in the map, openlayers click event happens.
    – afaf12
    Commented Apr 19, 2014 at 21:13
  • it work for <input type="textbox" id="siteX" /> but not for <asp:TextBox ID="siteX" runat="server"></asp:TextBox> whene i try to call the inpute in my classe map.aspx.cs it doesnt called
    – wissam
    Commented Apr 19, 2014 at 22:59
  • Edit your question, show map.aspx code. I use ASP.NET at work, don't know why you have a problem. Do you have Iframe in your page?
    – afaf12
    Commented Apr 19, 2014 at 23:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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