Shapes

ShapeLayer draws GeoJSON LineString / Polygon geometries with per-feature styling from the simplestyle-spec 1.1.0.

import { WemapMap, ShapeLayer } from '@wemap/map';

const map = new WemapMap({ container: 'map' });
const shapes = new ShapeLayer(map);

const id = shapes.drawPolygon(
  { type: 'Polygon', coordinates: [[[2.35, 48.85], [2.36, 48.85], [2.36, 48.86], [2.35, 48.85]]] },
  { fill: '#e91e63', 'fill-opacity': 0.4, stroke: '#ad1457', 'stroke-width': 2 }
);

shapes.drawLineString(
  { type: 'LineString', coordinates: [[2.35, 48.85], [2.36, 48.86]] },
  { stroke: '#1e88e5', 'stroke-width': 4 }
);

shapes.remove(id);   // remove one shape
shapes.clear();      // remove all
shapes.destroy();    // tear down (or map.remove({ layers: true }))

Geometry is GeoJSON [lng, lat], not the SDK's lat-first Coordinates.

Styling

Supported simplestyle properties: stroke, stroke-opacity, stroke-width (lines and polygon outlines); fill, fill-opacity (polygons); title / description are stored but not rendered. Omitted style properties use the simplestyle defaults, except stroke / fill, which default to the theme primary colour for brand consistency. marker-* is not supported — use DomMarkerLayer for points.

Indoor

Pass level (an SDK extension to simplestyle) to bind a shape to a floor — it shows only when that level is displayed. Shapes without a level are always visible:

shapes.drawPolygon(geometry, { fill: '#e91e63', level: 1 });

Interactivity

Interactive by default: hovering a shape highlights it (more opaque fill, thicker outline) and shows a pointer cursor. on('click') reports the clicked shape:

const unsubscribe = shapes.on('click', ({ id, coordinates, properties }) => {
  console.log('clicked', id, properties.title, coordinates);
});

Configure the hover appearance — omit for the default cue, pass absolute simplestyle values to override (unspecified props keep the shape's base value), or false to drop the highlight while keeping the cursor and clicks:

new ShapeLayer(map, { hover: { 'fill-opacity': 0.9, stroke: '#000', 'stroke-width': 4 } });
new ShapeLayer(map, { hover: false });        // clickable, no highlight
new ShapeLayer(map, { interactive: false });  // decorative: no hover, no clicks

Multiple ShapeLayer instances can coexist on one map (e.g. different hover styles), each isolated from the others.

For the full API, see the ShapeLayer reference.