ui-leaflet Heat Plugin conflicts with ui-leaflet-draw for microsoft browsers

267 Views Asked by At

I have an AngularJS (1.58) webapp showing some maps with ui-leaflet. I have integrated the Leaflet.Heat Plugin, successfully. Also, I have integrated the Leaflet.Draw Plugin successfully.

Problem: The moment Im using both Plugin, Heat and Draw, my webapp is not showing any maps anymore on microsoft browsers (Microsoft Edge, Internet Explorer 11). I have tried to use different combinations of release versions of these plugins to get it to work on every of the common browers. When I bring the leaflet maps back to working on Microsoft Edge, the Heat Plugin is not anymore working (not only ME, also not Opera, Firefox, GChrome).

Summed up: The latest versions of ui-leaflet, Leaflet, ui-leaflet-draw and Leaflet.Heat are working fine together on Google Chrome, Firefox, Opera. But the maps are totally disappearing for Microsoft Edge. Older versions are showing maps again for Microsoft Edge, but the Heat Plugin is not anymore working on any browser.

Question: Is there a working combination of versions of these tools for all these browsers (speaking of Google Chrome, Firefox, Opera, Microsoft Edge) together? If so, which versions are them? If not, are there recommended workarounds? Maybe other plugins, which I can use instead for drawing or showing well-looking heatmaps?

Steps to reproduce: Download the Leaflet.Heat example. Integrate ui-leaflet-draw as Librarys (e.g. via bower). Test it with Google Chrome, Firefox, or Opera. Depending on your versions, you gonna either see the working Heatmap but tested with Microsoft Edge you dont see any map OR you dont see any heatmap, and microsoft edge shows u a map (also without heat).

1

There are 1 best solutions below

0
On BEST ANSWER

Alright, I was focusing my issue and find a solution.

I replaced ui-leaflet-draw with leaflet.Draw plugin and the combination of all 3 worked for all browsers (as long as I am using the correct versions). So here they are from my bower.json project file:

"dependencies": {
    "angular": "1.5.8",
    "angular-simple-logger": "~0.1.7",
    "ui-leaflet": "1.0.3",
    "Leaflet.heat": "https://github.com/Leaflet/Leaflet.heat/archive/gh-pages.tar.gz",
    "angular-material": "~1.1.1",
    "leaflet.draw": "*"
  },
  "resolutions": {
    "angular-material": "~1.1.1",
    "angular": "1.5.8",
    "leaflet": "1.0.3"
  }

Update: Leaflet 1.0.3 working too and has better user expierence controls then 0.7.x

Enjoy developing nice maps with Heat layers and Draw controls now working for GChrome, Opera, FireFox, and Microsoft Edge! (havent tested IE 11 cuz of lots of other conflicts with angular-material)