Load external data on Geoman with correct type

[VitorRibeiroCustodio]

Hey, probably is just a simple question, but, i've been trying to load some external data into my application that uses geoman to create objects.

This is one example:

    {
      type: 'Feature',
      properties: {
        shape: 'Rectangle',
      },
      geometry: {
        type: 'Polygon',
        coordinates: [
          [
            [-81.909315, 30.333176],
            [-81.909315, 30.37643],
            [-81.84133, 30.37643],
            [-81.84133, 30.333176],
            [-81.909315, 30.333176],
          ],
        ],
      },
    },

However, every time, this data is loaded, is been loaded as polygon, not as a Rectangle. Is there a way for me to load this as a rectangle ?

this is how i'm doing to load:

        Leaflet.geoJSON(data, {
          pmIgnore: false,
        }).addTo(this.map);

[Falke-Design]

This is because Rectangle is not existing in GeoJSON definition. You need to check if the feature is a Rectangle and then create a new shape.
I see that you have the shape property, so you can check on this if it is a Rectangle:

properties: {
shape: 'Rectangle',
},

  var removeList = [];
  var addList = [];
  // function to check if it is a Rectangle
  var onEachFeature = (feature, layer) => {
      if (feature.properties.shape === 'Rectangle') {
        console.log("Rectanlge");
        // we need to create a new Rectangle Layer and add it to an array
        addList.push(L.rectangle(layer.getBounds()));
        // we add the current layer to the remove list
        removeList.push(layer)
      }
  };
  var geo = L.geoJSON(json, {
    onEachFeature
  }).addTo(map);

  // we remove and add the rectangle layers here, because it throws an error if this happens in the onEachFeature function
  removeList.forEach((layer) => {
    layer.removeFrom(geo);
  });
  addList.forEach((layer) => {
    layer.addTo(geo);
  });

---

If you don't have the shape property you can use this code:

  var removeList = [];
  var addList = [];
  // function to check if it is a Rectangle
  var onEachFeature2 = (feature, layer) => {

    // we get all latlngs and flatten it to a single level array
    var latlngs = layer.getLatLngs().flat(999);
    // Rectangle has exact 4 latlngs
    if(latlngs.length === 4) {
      var first = latlngs[0];
      // check if similar lat / lng coords existing
      var lats = latlngs.filter((_latlng) => _latlng.lat === first.lat);
      var lngs = latlngs.filter((_latlng) => _latlng.lng === first.lng);

      // check if different lat / lng coords existing
      var secondLats = latlngs.filter((_latlng) => _latlng.lat !== first.lat);
      var secondLngs = latlngs.filter((_latlng) => _latlng.lng !== first.lng);

      // lats, lngs, secondLats, secondLngs needs to be length 2, and secondLats, secondLngs needs to have the same coords
      if (lats.length === 2 && lngs.length === 2 && secondLats.length === 2 && secondLats[0].lat === secondLats[1].lat && secondLngs.length === 2 && secondLngs[0].lng === secondLngs[1].lng) {
        console.log("Rectanlge");
        // we need to create a new Rectangle Layer and add it to an array
        addList.push(L.rectangle(layer.getBounds()));
        // we add the current layer to the remove list
        removeList.push(layer)
      }
    }
  };

  var geo = L.geoJSON(json, {
    onEachFeature
  }).addTo(map);

  // we remove and add the rectangle layers here, because it throws an error if this happens in the onEachFeature function
  removeList.forEach((layer) => {
    layer.removeFrom(geo);
  });
  addList.forEach((layer) => {
    layer.addTo(geo);
  });

[binarybaba]

THANK YOU!!

[VitorRibeiroCustodio]

@Falke-Design It worked, thanks for helping me with that.