0

This is a cross-post from SO. I am trying to use Leaflet.VectorGrid.Slicer, but I am getting error:

Input data is not a valid GeoJSON object

codesandbox

VectorGrid.js

import { useEffect } from "react";
import { useLeafletContext } from "@react-leaflet/core";
import L from "leaflet";
import geojsonvt from "geojson-vt";
import "leaflet.vectorgrid";
import { featureCollection, feature } from "@turf/helpers";

export default function VectorGrid({ assets }) {
  const { layerContainer, map } = useLeafletContext();

  const geoJsons = assets
    .filter((asset) => asset.mapPolygon)
    .map((asset) => feature(asset.mapPolygon.geometry));

  const slicerInput = featureCollection(geoJsons);

  console.log(slicerInput);

  const data = geojsonvt(slicerInput);

  const vectorGrid = L.vectorGrid.slicer(data, {
    rendererFactory: L.canvas.tile,
    vectorTileLayerStyles: {
      sliced: {
        fillColor: "transparent",
        color: "blue",
        weight: 0.5,
      },
    },
    maxZoom: 22,
    indexMaxZoom: 5, // max zoom in the initial tile index
    interactive: true,
  });

  const container = layerContainer || map;

  useEffect(() => {
    container.addLayer(vectorGrid);
    return () => {
      container.removeLayer(vectorGrid);
    };
  }, [container, vectorGrid]);

  return null;
}

temp_data.js

export const dat = [
  {
    assetid: 1,
    id: 1,
    mapPolygon: {
      type: "Feature",
      geometry: {
        type: "Polygon",
        coordinates: [
          [
            [-104.98948, 39.64244],
            [-104.98953, 39.64244],
            [-104.98953, 39.64236],
            [-104.98918, 39.64236],
            [-104.98918, 39.64247],
            [-104.98948, 39.64247],
            [-104.98948, 39.64244],
          ],
        ],
      },
    },
    latitude: null,
    longitude: null,
  }, {
    assetid: 3,
    id: 3,
    mapPolygon: {
      type: "Feature",
      geometry: {
        type: "Polygon",
        coordinates: [
          [
            [-104.98793, 39.6444],
            [-104.98816, 39.64439],
            [-104.98816, 39.64438],
            [-104.98825, 39.64437],
            [-104.98825, 39.64432],
            [-104.98826, 39.64431],
            [-104.98826, 39.64429],
            [-104.98828, 39.64429],
            [-104.98827, 39.64422],
            [-104.988, 39.64422],
            [-104.98799, 39.64429],
            [-104.98793, 39.64429],
            [-104.98793, 39.6444],
          ],
        ],
      },
    },
    latitude: null,
    longitude: null,
  }]
2
  • 2
    I've closed the cross-post as a duplicate of stackoverflow.com/questions/28480206/… - to quote the answer there, «That Leaflet's L.GeoJSON accepts just an array of features, doesn't make it a valid GeoJSON object, so you shouldn't call it a GeoJSON object. It's an array of GeoJSON feature objects. In a valid GeoJSON featurecollection object the feature array is contained like this: [...]» – IvanSanchez Apr 10 at 13:11
  • Yes, geojsonlint.com was very helpful, thanks – Matt Apr 10 at 17:38
0

geojsonlint helped me to find out that FeatureCollection wasn't valid.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.