Skip to main content
Question

Leaflet Map manipulation

  • December 4, 2018
  • 0 replies
  • 133 views
I am wondering if it is possible to interact with the Leaflet map before it is initialized and apply a filter to a layer on the map?

My first problem is being able to consistently load the Leaflet package. This goes hand in hand with being able to load any additional package in QuickBase using the IOL method, what is the best practice for this?

I attempted using JQuery's getScript function, but Leaflet (L) was not consistently defined, sometimes it loaded successfully, sometimes it did not.

The times that L was successfully defined, I was able to use the  L.Map.addInitHook function to get a list of Leaflet map objects. The next goal would be to bind an event handler to the load event of the map, and then iterate through the layer list. However, when I did this the layers were empty, so maybe the "load" event is not correct. 

If I call map.eachLayer(); in the console after all loading is complete, I am able to get a list of layers with marker objects representing my data. This is what I want to filter but I am not sure how to bind my filter function to the appropriate event so that it is called at the proper time.

Any insight would be greatly appreciated!
    This topic has been closed for replies.


    Leaflet - like many JavaScript libraries today - has detection logic in it that dynamically determines the environment the script is in and loads the guts of library code (1) as a global variable, (2) as an AMD module, (3) as a CommonJS module or (4) as a ES6 module.  You have to unminify the Leaflet library to see this code and since it is machine generated as part of the build process it can be very difficult to read and understand:
    ! function(t, i) {
      "object" == typeof exports && "undefined" != typeof module ? i(exports) : "function" == typeof define && define.amd ? define(["exports"], i) : i(t.L = {})
    }(this, function(t) {
      // .... lots of code ...
    });
    Since QuickBase uses requirejs to load AMD modules onto its pages, Leaflet will detect this condition and load as an AMD module if properly configured.
    require.config({
      paths: {
        "leaflet": "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet";
      }
    });
    require(['leaflet'], function(L) {
      console.dir(L);
    });
    Terms & ConditionsAccessibility statement