IGN Maps and Firefox

**ALD2355** · 09/09/2009, 09h09

Problem with click control code at: https://api.ign.fr/geoportail/api/do...er/center.html.

OpenLayers click control does not work e.g. www.system.co.uk/igntest.html

It only works with a reference to OpenLayers as at www.system.co.uk/igntestb.html including

<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>

Is there a simple reason?

Also the click control and API do not always seem to work in Firefox.

Any suggestions in French or English?

**gfilliere** · 09/09/2009, 10h09

Hi,

If your problem is the error message "OpenLayers is not defined" then it's completely normal.

On your page, if you remove the reference to <script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script> then firefox does not have any reference to OpenLayers when it reaches the line "ClickControl= OpenLayers.Class( OpenLayers.Control, {" because the OpenLayers API is not yet loaded.

When you use the GeoportalApi with <script type="text/javascript" src="http://api.ign.fr/geoportail/api?v=1.0beta4-e&key=MY_KEY&instance=myMap"> you first load a small javascript file that will then load the full GeoportalExtended script containing OpenLayers.

What you have to do is "delay" the javascript analysis of ClickControl creation, maybe using a function like this http://pastie.org/610755. You will see in that code the function "initClickControlClass()" wrapping your ClickControl creation, and the call to this new function inside the "initGeoportalMap" function.

Note : The funny thing in your current page using http://openlayers.org/api/OpenLayers.js is that this script is never used. It is loaded on the browser, preventing the error message, but all his code will be overloaded when GeoportalExtended.js will be downloaded by the browser.

**dgrichard** · 09/09/2009, 12h41

A workaround is as follows :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script
        type="text/javascript"
        src="http://api.ign.fr/geoportail/api?v=VERSION&amp;key=YOUR_LICENSE&amp;instance=myMap&amp;">
    <!--
      -->
    </script>
    <script type="text/javascript">
    <!--
        function initGeoportalMap() {
            // call on body's onLoad
            OpenLayers.Control.Click= OpenLayers.Class( OpenLayers.Control, {
                defaultHandlerOptions:{
                    'single': true,
                    'double': false,
                    'pixelTolerance': 0,
                    'stopSingle': false,
                    'stopDouble': false
                },

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

                /**
                 * APIMethod: trigger
                 */
                trigger: function(e) {
                    var lonlat= this.map.getLonLatFromViewPortPx(e.xy).transform(
                        this.map.getProjection(), OpenLayers.Projection.CRS84
                    );
                    alert("You clicked near " + lonlat.lon + "N, " + lonlat.lat + " E");
                }
            });

            // the map must be created and configured here
            geoportalLoadmyMap("layerDiv", "normal" );
            myMap.addGeoportalLayers(myMap.allowedGeoportalLayers);
            // creating and inserting the new control
            var myClick= new OpenLayers.Control.Click();
            myMap.getMap().addControl(myClick);
            myClick.activate();
        }
      -->
    </script>
  </head>
  <body>
    <div id="layerDiv" style="width:800px;height:600px;"></div>
  </body>
</html>

Including the class definition in the callback seems to prevent "OpenLayers is not defined" (especially with IE)

**ALD2355** · 09/09/2009, 20h41

Thanks for response. I have changed the code at www.system.co.uk/igntestb.html. The error stops in firefox but still does not work. The control works fine in Safari, IE and Chrome.

**dgrichard** · 09/09/2009, 21h20

Just tested with FF2, FF3 and FF3.5 works pretty weel on all of them ...

**ALD2355** · 10/09/2009, 13h33

Thanks for your help again. I wrote programmes for astro navigation 20 years ago for old-fashioned Basic and Excel and script seems much more complicated.

The full map with gps etc is at www.system.co.uk/sysmaps_ign.html which is one of four maps (UK OS, CloudMade/OpenStreetMap, IGN and BKG Germany). This IGN one still does not work in Firefox but I will look at it later

IGN Maps and Firefox

IGN API Géoportail

Discussions similaires

Partager

Partager