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();

 }
  • I note that the getCoordsClick function is not running even though I called I want to know why not? – wissam Apr 19 '14 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 Apr 19 '14 at 19:09
  • yes exactely thats what i want to do – wissam Apr 19 '14 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 Apr 19 '14 at 20:06
  • i have some errore but i don understand what to do i.imgur.com/Nu8WeJs.jpg – wissam Apr 19 '14 at 20:38
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>
  • after using this code i have after I click on the map I get this i.imgur.com/Vjx9wgx.jpg – wissam Apr 19 '14 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 Apr 19 '14 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 Apr 19 '14 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 Apr 19 '14 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 Apr 19 '14 at 23:08

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.