-1

I am trying to figure out if Mapbox GL JS would be applicable or fit for my use case:

  1. My base map example has to be made of several components of a warehouse instead of Geospatial map
  2. I would like to display a clustering layer representing, for example, the number of products stored at a particular shelf/section in the warehouse.
  3. Each box/product in the warehouse would be represented as a pinpoint and while zooming out, collection of products/boxes would be represented as a cluster.

With that said, I'm aware 2) and 3) would be supported in case of a geospatial map but my concern is aimed at an customized non-geospatial map, if applicable.

BeffJezoz
  • 1

1 Answers1

0

Geospatial or not, it all boils down to coordinates. Mapbox GL JS expects geographic coordinates, so you just need to carve out a portion of the coordinate range (-180 thru 180 on the x axis, -90 to 90 on the y axis) that will meet your needs, and make sure you have good coordinates for the shelves or wherever you need to visualize clusters.

Here's a codepen that shows a simple mapbox style with only a background and a rectangle. No streets, no rivers, no labels...

const map = (window.map = new mapboxgl.Map({
  container: "map", // container ID
  // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
  style: {
    version: 0,
    name: "Foo",
    sources: {
      "building-outline": {
        type: "geojson",
        data: {
          type: "Feature",
          properties: {},
          geometry: {
            type: "Polygon",
            coordinates: [
              [
                [0, 0],
                [60, 0],
                [60, 30],
                [0, 30],
                [0, 0]
              ]
            ]
          }
        }
      }
    },
    layers: [
      {
        id: "background",
        type: "background",
        paint: {
          "background-color": "steelblue"
        }
      },
      {
        id: "building-fill",
        type: "fill",
        source: "building-outline",
        paint: {
          "fill-color": "#ccc"
        }
      },
      {
        id: "building-line",
        type: "line",
        source: "building-outline"
      }
    ]
  }, // style URL
  center: [30,20], // starting position [lng, lat]
  zoom: 2 // starting zoom
}));

https://codepen.io/chriswhong/pen/XWqpPXN

You can also build your own style in Mapbox Studio.

chriswhong
  • 362
  • 2
  • 9