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}
/>