[Assigned] Open Street Maps custom layers

[Author]

Posts

[umbertoZ]

Hi, I'm very exited with the last Toolset Maps update. I want to use Open Street Maps, but I would like to load custom layers, styles and also offer the satellite images. Is it possible?

I don't see any option to do it. Is is possible to load them by JS?

For example I would like to display images from this service:

Esri World Imagery
hidden link{z}/{y}/{x}

I also want to load a custom GeoJSON.

Can you help me?

thanks

[Minesh]

Hello. Thank you for contacting the Toolset support.

As you know we just have release the OpenStreetMap integration and we are yet in very early phase of this integration.

Right now, Toolset Maps supports basic integration with OSM via Leaflet, but we haven’t yet exposed UI options for adding custom tile layers (like Esri World Imagery) or loading additional GeoJSON data directly through the GUI.

That said, yes — it's absolutely possible to load custom tile layers and GeoJSON by using JavaScript, hooking into the map once it’s rendered on the front end. We initialize the map using Leaflet.js, so you can tap into that and extend it as needed.

For example, to add the Esri World Imagery layer, you could do something like this:

// Wait for the map to be ready
jQuery(document).on('toolset_maps_api_ready', function(event, map) {
  // Add custom tile layer
  L.tileLayer('<em><u>hidden link</u></em>{z}/{y}/{x}', {
    attribution: 'Tiles © Esri'
  }).addTo(map);
});


jQuery(document).on('toolset_maps_api_ready', function(event, map) {
  var geojsonData = {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": { "name": "Custom Area" },
        "geometry": {
          "type": "Polygon",
          "coordinates": [
            [
              [lon1, lat1],
              [lon2, lat2],
              [lon3, lat3],
              [lon1, lat1]
            ]
          ]
        }
      }
    ]
  };

  L.geoJSON(geojsonData).addTo(map);
});

[umbertoZ]

Hi Minesh, thanks for the quick response.

I tested your code, but I don't see any changes on the map. Should it directly load the Esri satellite imagery? Would it add a "satellite" button to switch the map style?

Also, how can I load the JSON layer stored in /wp-content/uploads/DemarcHidrograficas_mayo2023.json?

[Minesh]

As I already shared - we just release the OpenStreetMap integration and we are yet in very early phase of this integration.

If the sample code shared does not work then it will require improvements but that come by time and there is no ETA on that. I do not have any other workaround or soluition at the moment and this is pure custom requirement.

if you need help with such custom requirement, you're welcome to contact any of our certified partners:
- https://toolset.com/contractors/

[umbertoZ]

Hi, I hope the integration will be improved soon.

In the meantime, could you give me a hint?

I've tried different approaches, but the main issue is that I can't access the map instance. I tested these examples, but none of them seem to retrieve the map:

// Verificar si Toolset Maps está disponible
                if (typeof WPViews !== "undefined" && WPViews.view_addon_maps) {
                    console.log("Toolset Maps detectado.");

                    // Obtener la instancia del primer mapa
                    var map = WPViews.view_addon_maps.maps[0]; 

----------------------------

// Buscar el mapa con ID "map-1"
                    var mapInstance = null;
                    Object.values(WPViews.view_addon_maps.maps).forEach(function (m) {
                        if (m.map_id === "map-1") {
                            mapInstance = m;
                        }
                    });
----------------------------
var mapElement = document.getElementById("js-wpv-addon-maps-render-map-1");

                if (mapElement && mapElement._leaflet_id !== undefined) {
                    var leafletMap = mapElement._leaflet_map;

...
----------------------------
// Buscar el mapa de Leaflet manualmente
                var leafletMap = null;
                for (var key in L) {
                    if (L.hasOwnProperty(key) && L[key] instanceof L.Map) {
                        leafletMap = L[key];
                        break;
                    }
                }

----------------------------
function getToolsetMapInstance() {
        // Buscar el mapa de Toolset Maps en el div con data-map
        const mapElement = document.querySelector('[data-map="map-1"]');
        if (!mapElement) {
            console.warn("No se encuentra el elemento del mapa. Esperando...");
            return null;
        }
        if (!mapElement._leaflet_id) {
            console.warn("El mapa no ha sido inicializado aún.");
            return null;
        }
        
        const mapId = mapElement._leaflet_id;
        const leafletMap = L.map._layers[mapId];
        
        if (!leafletMap) {
            console.warn("No se encontró el mapa con ID:", mapId);
            return null;
        }

        return leafletMap;
    }

thanks