Map Builder Canvas

About

An indoor map builder built using Canvas API which helps to draw map elements, track elements and gateways in your react application.

Content

• Features
• Installation
• Props
• Example

Features

• Zoom and Pan
• Drawing and plotting of map elements, track elements and gateways.
• Undo and Redo
• The left panel contains the list of elements
• The right panel to edit the properties of elements

Installation

npm i map-builder-canvas

Props

| Props | Description | Default | Required | Type | | ------------------------ | --------------------------------------------------------------- | ------- | -------- | --------------- | | canvasWidth | Canvas width within the layout | true | true | number | | canvasHeight | Canvas height within the layout | true | true | number | | facilityElements | Array containing all the elements to be plotted | | true | | | zone | Contains the details of the zone | | true | | | clusterList | Cluster list for map elements and gateways | true | true | | | clusterListTrack | Cluster list for track elements | | true | | | hardwareVendors | Hardware vendors list for BLE Anchors | | true | | | actuatorGroups | Actuator groups list for Actuators | | true | | | isCameraAddonEnabled | is the camera addon enabled | | false | | | canViewCameras | camera addon view permission | | false | | | canCreateCameras | camera addon create permission | | false | | | canEditCameras | camera addon edit permission | | false | | | cameraGroups | Camera groups list for Cameras | | false | | | onImageEditClick | Function to edit the image | | false | function | | onAddImageClick | Function to add an image | | false | function | | onAddClusterClick | Function to add new cluster | | false | function | | toolBarCustomComponent | Addition components like buttons that can be added in top panel | true | false | React component |

Example

import { CanvasDrawing } from 'map-builder-canvas';

...
const addImageOnClick = () => {
	console.log(">>>add image on click")
};

const editImageOnClick = () => {
	console.log(">>>edit image on click")
};

const addClusterOnClick = () => {
	console.log(">>>add cluster on click")
};

const zoneDetails = {
	_id: '61ea6ec9a1b585018f46ad06',
	coordinates: [],
	labels: [],
	name: 'Manufacturing Unit',
	description: 'Manufacturing Unit',
	width: 1000,
	height: 700,
	sequenceNumber: 2,
	createdAt: '2022-01-21T08:28:57.775Z',
	updatedAt: '2022-06-04T14:37:11.230Z',
	__v: 0
};

const facilityElementsDetails = [
	{
		_id: '61ea6eca46585018f46ad2e',
		type: 'image',
		label: '',
		elementType: 'image',
		elementProperties: { opacity: 1 },
		imageProperties: {
			uploadId: {
				_id: '61ea6ecaa1b585018f46ad2f',
				fileName: 'map',
				size: '2046',
				mimeType: 'image',
				fileId: '61ea6ecaa1b585018f46adee',
				__v: 0,
				createdAt: '2022-01-21T08:28:58.249Z',
				updatedAt: '2022-06-12T15:04:42.096Z'
			},
			width: 1000,
			height: 700,
			fileUrl: 'https://miro.medium.com/max/1000/1*P4Z6NIm0dHypW2NnXqinqg.jpeg'
		},
		zoneId: '61ea6ec9a1b585018f46ad06',
		__v: 0,
		createdAt: '2022-01-21T08:28:58.249Z',
		updatedAt: '2022-06-12T15:04:42.096Z'
	},
	{
		_id: '61ea6ecaa1b585018f46ad2d',
		type: 'map',
		coordinates: [
			{ x: '1000', y: '700' },
			{ x: '1000', y: '0' },
			{ x: '0', y: '0' },
			{ x: '0', y: '700' }
		],
		elementType: 'polygon',
		label: 'Outer Boundary',
		labelCoordinates: { x: null, y: null },
		zoneId: '61ea6ec9a1b585018f46ad06',
		__v: 0,
		createdAt: '2022-01-21T08:28:58.248Z',
		updatedAt: '2022-06-12T15:04:42.000Z'
	},
	{
		_id: '61ea6ecaa1b585018f46ad2e',
		type: 'map',
		coordinates: [
			{ x: '156', y: '162' },
			{ x: '156', y: '0' },
			{ x: '0', y: '0' },
			{ x: '0', y: '161' },
			{ x: '156', y: '161' }
		],
		elementType: 'polyline',
		label: 'Office Building',
		labelCoordinates: { x: 25, y: 37 },
		zoneId: '61ea6ec9a1b585018f46ad06',
		__v: 0,
		createdAt: '2022-01-21T08:28:58.249Z',
		updatedAt: '2022-06-12T15:04:42.096Z',
		clusterId: '61ea6ec9a1b585018f46ad0a'
	},
	{
		_id: '61ea6ecaa1b585018f46ad22',
		type: 'track',
		coordinates: [
			{ x: '110', y: '205' },
			{ x: '5', y: '205' },
			{ x: '5', y: '270' },
			{ x: '110', y: '270' }
		],
		elementType: 'polygon',
		label: '',
		labelCoordinates: { x: null, y: null },
		zoneId: '61ea6ec9a1b585018f46ad06',
		clusterId: 'cluster1',
		__v: 0,
		createdAt: '2022-01-21T08:28:58.012Z',
		updatedAt: '2022-06-12T15:04:42.338Z'
	},
	{
		_id: '61ea6ecaa1b585018f46ad23',
		type: 'track',
		coordinates: [
			{ x: '5', y: '293' },
			{ x: '5', y: '329' },
			{ x: '70', y: '329' },
			{ x: '70', y: '293' }
		],
		elementType: 'polygon',
		label: '',
		labelCoordinates: { x: null, y: null },
		zoneId: '61ea6ec9a1b585018f46ad06',
		clusterId: 'cluster2',
		__v: 0,
		createdAt: '2022-01-21T08:28:58.019Z',
		updatedAt: '2022-06-12T15:04:42.341Z'
	},
	{
		_id: '61ea6ecaa1b585018f46ad6c',
		coordinates: { x: 30,	y: 205,	z: 2 },
		name: 'SY-21-001',
		hardwareType: 'BLE',
		identifierKey: 'macId',
		identifierValue: 'FFFFFFFFFFE3',
		plotCoordinates: { x: 50, y: 240, z: 2 },
		clusterId: 'clsuetr1',
		type: 'standalone',
		createdAt: '2022-01-21T08:28:58.442Z',
		__v: 0,
		elementType: 'gateway',
		zoneId: '61ea6ec9a1b585018f46ad06'
	},
	{
		_id: '61f90022a906b0004b65c93b',
		coordinates: { x: 12, y: 11, z: 10 },
		name: 'SanityAnchor',
		hardwareVendor: 'TCL',
		identifierKey: 'beaconId',
		identifierValue: 123456,
		beaconType: 'NON_HAZARDOUS',
		plotCoordinates: { x: 12, y: 11, z: 10 },
		clusterId: 'cluster2',
		zoneId: '61ea6ec9a1b585018f46ad06',
		createdAt: '2022-02-01T09:40:50.725Z',
		updatedAt: '2022-02-02T10:47:20.674Z',
		__v: 0,
		serialNumber: null,
		elementType: 'gateway'
	}
];

const clusterListData = [
	{ label: "Cluster 1", value: "cluster1" },
	{ label: "Cluster 2", value: "cluster2" },
	{ label: "Cluster 3", value: "cluster3" },
	{ label: "Cluster 4", value: "cluster4" }
];

const clusterListTrackData = [
	{ label: "Cluster 3", value: "cluster3" },
	{ label: "Cluster 4", value: "cluster4" }
];

const hardwareVendorsList = [
	{ label: "Vendor 1", value: "vendor 1" },
	{ label: "Vendor 2", value: "vendor 2" }
];

const actuatorGroupsList = [
	{ label: 'Actuator Group 1', value: '61ea6ec9a109u5018f46ad06' },
	{ label: 'Actuator Group 2', value: '61ea6ec9a1b5786418f46ad06' }
]

export const cameraGroupList = [
	{ label: 'Camera Group 1', value: '61ea6ec9a109u5018f46ad0c' },
	{ label: 'Camera Group 2', value: '61ea6ec9a1b5786418f46ad1c' }
];

...

<CanvasDrawing
	canvasWidth={window.innerWidth}
	canvasHeight={window.innerHeight}
	facilityElements={facilityElementsDetails}
	zone={zoneDetails}
	clusterList={clusterListData}
	clusterListTrack={clusterListTrackData}
	hardwareVendors={hardwareVendorsList}
	actuatorGroups={actuatorGroupsList}
	cameraGroupList={cameraGroupList}
	onImageEditClick={addImageOnClick}
	onAddImageClick={editImageOnClick}
	onAddClusterClick={addClusterOnClick}
/>