1

I am a newbie in leaflet programming, and I have an error on showing polygons on IE 11.

My page is very simple and works on Chrome and FireFox. I just draw a point and a polyline.

Expected result is shown in the end of the post.All is fine when I just draw a marker but when I add a polyline, on IE, navigation is fine since the screen map doesn't reach the polyline (high zoom level). As soon as I zoom out to see the polyline, IE11 freezes.

An error is raised in the https://unpkg.com/leaflet@1.6.0/dist/leaflet.js script (5,61705): [Impossible to get the property "x" of a null or undefined reference] on function:

// return closest point on segment or distance to that point
function _sqClosestPointOnSegment(p, p1, p2, sqDist) {
var x = p1.x, // Error raises here
    y = p1.y,
    dx = p2.x - x,
    dy = p2.y - y,
    dot = dx * dx + dy * dy,
    t;

if (dot > 0) {
    t = ((p.x - x) * dx + (p.y - y) * dy) / dot;

    if (t > 1) {
        x = p2.x;
        y = p2.y;
    } else if (t > 0) {
        x += dx * t;
        y += dy * t;
    }
}

dx = p.x - x;
dy = p.y - y;

return sqDist ? dx * dx + dy * dy : new Point(x, y);

}

My code is:

function init() {
  var Produit4 = {
    lat: 52,
    lon: 0,
  };
  var ZoomLevel = 7;
  var mymap = L.map("mapid").setView([Produit4.lat, Produit4.lon], ZoomLevel);
  var MainLayer = L.tileLayer(
    "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=sk.eyJ1IjoiYnJ1bm9nYXJuaWVyIiwiYSI6ImNrYmFzam9hdzA5OW0ycnB2Z2JxeXEwYmcifQ.m0w2z_IIm_M2JdO0W7mJBA",
    {
      attribution:
        "Map data © OpenStreetMap contributors, " +
        "CC-BY-SA, " +
        "Imagery © Mapbox",
      maxZoom: 18,
      id: "mapbox/streets-v11",
      tileSize: 512,
      zoomOffset: -1,
    }
  );
  L.Browser.touch = false;
  MainLayer.addTo(mymap);
  var rectangle = L.polyline([
    [46, -16],
    [62.75, -16],
    [62.75, 13],
    [46, 13],
  ]).addTo(mymap);
  var marker = L.marker([51.5, -0.09]).addTo(mymap);
}

Expected result:

enter image description here"

  • 1
    Please use leaflet-src.js instead of leaflet.js when debugging in order to get a more readable stack trace. – IvanSanchez Jun 12 at 9:33
  • Merci !! The error raises in function _sqClosestPointOnSegment(p, p1, p2, sqDist) // return closest point on segment or distance to that point – Bruno Garnier Jun 12 at 10:57
  • in first line of the function : var x = p1.x, – Bruno Garnier Jun 12 at 10:57
  • 1
    I couldn't reproduce described behavior. Can you place your code in JSFiddle or CodePen, so exact replica of your non-working code can be tested. – TomazicM Jun 12 at 15:23
  • 1
    I couldn't run your code in IE11 directly from CodePen, since it doesn't support IE11. When copied to may local IIS server on Windows 7 Enterprise SP1, it works without any problem in IE11. – TomazicM Jun 13 at 9:35
2

I have found the solution. IE11 considers my application as an intranet (as it is located on my computer) And for intranet sites, IE11 works in IE7 compatibility mode (why ???). So, just by disabling compatibility mode for intranet sites (in tools/display compatibility modes), it solved my problem. Thank you for all your answers who helped me progressing on the solution.

| improve this answer | |
  • BTW, how do I close the subject ? – Bruno Garnier Jun 16 at 7:47
  • Mark your own answer as "solved" ✅ – Stefan Jun 16 at 7:49
  • Thank you Stefan ! – Bruno Garnier Jun 16 at 8:05

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.