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/[email protected]/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"

7
  • 1
    Please use leaflet-src.js instead of leaflet.js when debugging in order to get a more readable stack trace. Commented Jun 12, 2020 at 9:33
  • Merci !! The error raises in function _sqClosestPointOnSegment(p, p1, p2, sqDist) // return closest point on segment or distance to that point Commented Jun 12, 2020 at 10:57
  • in first line of the function : var x = p1.x, Commented Jun 12, 2020 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
    Commented Jun 12, 2020 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
    Commented Jun 13, 2020 at 9:35

1 Answer 1

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.

3
  • BTW, how do I close the subject ? Commented Jun 16, 2020 at 7:47
  • Mark your own answer as "solved" ✅ Commented Jun 16, 2020 at 7:49
  • Thank you Stefan ! Commented Jun 16, 2020 at 8:05

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.