mago3D.JS V1.0.5

Open source JavaScript library for 3D multi-block visualization

It is a next generation 3D GIS platform that integrates and visualizes AEC (Architecture, Engineering, Construction) area and traditional 3D spatial information (3D GIS). Integrate AEC and 3D GIS in a web browser, indoors, outdoors, indistinguishable. You can browse and collaborate on large-scale BIM (Building Information Modeling), JT (Jupiter Tessellation), and 3D GIS files without installing any program on the web browser.

Development Environment

java8, eclipse neon, node, apache, Jasmine, Jsdoc, Gulp, eslint, JQuery

Getting Started

  • mago3DJS Install
    • github It accepts mago3DJS from.
    • Installation path C:/git/repository/mago3djs
  • node Setup
    • npm install
    • npm install -g gulp
  • Running the server
    • Running a local server: C:\git\repository\mago3djs> node server.js
    • Running a public server: C:\git\repository\mago3djs> node server.js --public true
  • Data folder link
    • Create Data Folder: mklink /d "C:\git\repository\mago3djs\data" "C:\data"
    • Delete data folder: C:\git\repository\mago3djs>rmdir data

changeMagoStateAPI

Mago3D The mago3D Object is displayed and hidden on the screen by changing the activation status value.

Parameters:

Name Description
managerFactoryInstance mago3D starting point
isShow true: Enabled, false: Disabled

Examples:

html
<div>
	<h3>MagoState</h3>
	<input type="radio" id="magoEnable" name="magoState" value="0" checked="checked" onclick="changeMagoState(true);" />
	<label for="magoEnable"> Enabled </label>
	<input type="radio" id="magoDisable" name="magoState" value="1"  onclick="changeMagoState(false);" />
	<label for="magoDisable"> Disabled </label>
</div>

				

JavaScript
function changeMagoState(isShow) {
	$("input:radio[name='magoState']:radio[value='" + isShow + "']").prop("checked", true);
	changeMagoState(managerFactory, isShow);
}

				

changeLabelAPI

changeLabelAPI Enables or disables the label by changing the activation status value.

Parameters:

Name Description
managerFactoryInstance mago3D starting point
isShow true: Enabled, false: Disabled

Examples:

html
<div>
	<h3>Label</h3>
	<input type="radio" id="showLabel" name="labelInfo" value="true" onclick="changeLabel(true);" />
	<label for="showLabel"> Display </label>
	<input type="radio" id="hideLabel" name="labelInfo" value="false"  onclick="changeLabel(false);" />
	<label for="hideLabel"> Hide </label>
</div>

				

JavaScript
function changeLabel(isShow) {
		$("input:radio[name='labelInfo']:radio[value='" + isShow + "']").prop("checked", true);
		changeLabelAPI(managerFactory, isShow);
	}

				

changeOriginAPI

Origin is displayed and hidden by changing the value of the changeOriginAPI activation state.

Parameters:

Name Description
managerFactoryInstance mago3D starting point
isShow true: Enabled, false: Disabled

Examples:

html
<div>
	<h3>Origin</h3>
	<input type="radio" id="showOrigin" name="origin" value="true" onclick="changeOrigin(true);" />
	<label for="showOrigin"> Display </label>
	<input type="radio" id="hideOrigin" name="origin" value="false"  onclick="changeOrigin(false);" />
	<label for="hideOrigin"> Hide </label>
</div>

				

JavaScript
function changeOrigin(isShow) {
        $("input:radio[name='origin']:radio[value='" + isShow + "']").prop("checked", true);
        changeOriginAPI(managerFactory, isShow);
	}

				

changeBoundingBoxAPI

changeBoundingBoxAPI BoundingBox is displayed and hidden by changing the activation status value.

Parameters:

Name Description
managerFactoryInstance mago3D starting point
isShow true: Enabled, false: Disabled

Examples:

html
<div>
	<h3>BoundingBox</h3>
	<input type="radio" id="showBoundingBox" name="boundingBox" value="true" onclick="changeBoundingBox(true);" />
	<label for="showBoundingBox"> Display </label>
	<input type="radio" id="hideBoundingBox" name="boundingBox" value="false"  onclick="changeBoundingBox(false);" />
	<label for="hideBoundingBox"> Hide </label>
</div>

				

JavaScript
function changeBoundingBox(isShow) {
	$("input:radio[name='boundingBox']:radio[value='" + isShow + "']").prop("checked", true);
	changeBoundingBoxAPI(managerFactory, isShow);
}

				

changePropertyRenderingAPI

API to set visibility by attribute value.

Parameters:

Name Description
managerFactoryInstance mago3D starting point
isShow true = Display, false = Hide
projectId Project Id
property Property

Examples:

html
<div>
	<h3>Property visualization</h3>
	<ul class="apiLocal">
		<li>
			<input type="radio" id="showPropertyRendering" name="propertyRendering" value="true" />
			<label for="showLabel"> Display </label>
			<input type="radio" id="hidePropertyRendering" name="propertyRendering" value="false" />
			<label for="hideLabel"> Hide </label>
		</li>
		<li>
			<label for="propertyRenderingProjectId">Projecet </label>
			<select id="propertyRenderingProjectId" name="propertyRenderingProjectId" class="select">
				<option value="data.json">...</option>
			</select>
		</li>
		<li>
			<label for="propertyRenderingWord">Property </label>
			<input type="text" id="propertyRenderingWord" name="propertyRenderingWord" size="23" placeholder="isMain=true" />
			<button type="button" id="changePropertyRendering" class="btn">change</button> 
		</li>
	</ul>
</div>

				

JavaScript
$("#changePropertyRendering").click(function(e) {
	var isShow = $(':radio[name="propertyRendering"]:checked').val();
	if(isShow === undefined){
		alert("Select Show / Hide.");
		return false;
	}
	if ($.trim($("#propertyRenderingWord").val()) === ""){
		alert("Please enter attribute value.");
		$("#propertyRenderingWord").focus();
		return false;
	}
	changePropertyRenderingAPI(managerFactory, isShow, $("#propertyRenderingProjectId").val(), $("#propertyRenderingWord").val());
});

				

changeShadowAPI

Enable or disable shadow display

Parameters:

Name Description
managerFactoryInstance mago3D starting point
isShow true: Enabled, false: Disabled

Examples:

html
<div>
	<h3>Shadow settings</h3>
	<input type="radio" id="showShadow" name="shadow" value="true" onclick="changeShadow(true);" />
	<label for="showShadow"> Display </label>
	<input type="radio" id="hideShadow" name="shadow" value="false"  onclick="changeShadow(false);" />
	<label for="hideShadow"> Hide </label>
</div>

				

JavaScript

function changeShadow(isShow) {
	$("input:radio[name='shadow']:radio[value='" + isShow + "']").prop("checked", true);
	changeShadowAPI(managerFactory, isShow);
}

				

changeColorAPI

An API that changes the color of objects or data objects that you want on a project-by-project basis.

Parameters:

Name Description
managerFactoryInstance mago3D starting point
projectId Project Id
dataKey Data unique key
objectIds object id. In a plurality of cases,
property Property Value Example)isMain=true
color R, G, and B colors are connected to ','

Examples:

html
<div>
	<h3>Change color</h3>
	<ul class="apiLoca">
		<li>
			<label for="colorProjectId">Project </label>
			<select id="colorProjectId" name="colorProjectId" class="select">
				<option value="data.json">...</option>
			</select>
		</li>
		<li>
			<label for="colorDataKey">Data Key</label>
			<input type="text" id="colorDataKey" name="colorDataKey" size="30" />
		</li>
		<li>
			<label for="colorObjectIds">Object Id</label>
			<input type="text" id="colorObjectIds" name="colorObjectIds" placeholder="   , division" size="30" />
		</li>
		<li>
			<label for="colorProperty">Property</label>
			<input type="text" id="colorProperty" name="colorProperty" size="30" placeholder="isMain=true" />
		</li>
		<li>
			<label for="updateColor">Color</label>
			<select id="updateColor" name="updateColor" class="select">
				<option value="255,0,0"> Red </option>
				<option value="255,255,0"> Yellow </option>
				<option value="0,255,0"> Green </option>
				<option value="0,0,255"> Blue </option>
				<option value="255,0,255"> Pink </option>
				<option value="0,0,0"> Black </option>
			</select>
			<button type="button" id="changeColor" class="btn">change</button> 
		</li>
	</ul>
</div>

				

JavaScript
$("#changeColor").click(function(e) {
	if ($.trim($("#colorDataKey").val()) === ""){
		alert("Please enter your Data Key.");
		$("#colorDataKey").focus();
		return false;
	}
		
	var objectIds = null;
	var colorObjectIds = $("#colorObjectIds").val();
	if(colorObjectIds !== null && colorObjectIds !=="") objectIds = colorObjectIds.split(",");
	changeColorAPI(managerFactory, $("#colorProjectId").val(), $("#colorDataKey").val(), objectIds, $("#colorProperty").val(), $("#updateColor").val());
});

				

changeLocationAndRotationAPI

The block is converted by the input position information and rotation information.

Parameters:

Name Description
managerFactoryInstance mago3D starting point
projectId Project Id
dataKey Data unique key
latitude latitude
longitude longitude
height height
heading left, right
pitch uo, down
roll left, right roll

Examples:

html
<div>
	<h3>Location and Rotation</h3>
	<ul class="apiLoca">
		<li>
			<label for="moveProjectId">Project </label>
			<select id="moveProjectId" name="moveProjectId" class="select">
				<option value="data.json">...</option>
			</select>
		</li>
		<li>
			<label for="moveDataKey">Data Key</label>
			<input type="text" id="moveDataKey" name="moveDataKey" size="25" />
		</li>
		<li>
			<label for="moveLatitude">latitude </label>
			<input type="text" id="moveLatitude" name="moveLatitude" size="25"/>
		</li>
		<li>
			<label for="moveLongitude">longitude </label>
			<input type="text" id="moveLongitude" name="moveLongitude" size="25"/>
		</li>
		<li>
			<label for="moveHeight">height </label>
			<input type="text" id="moveHeight" name="moveHeight" size="25" />
		</li>
		<li>
			<label for="moveHeading">HEADING </label>
			<input type="text" id="moveHeading" name="moveHeading" size="25" />
		</li>
		<li>
			<label for="movePitch">PITCH </label>
			<input type="text" id="movePitch" name="movePitch" size="25" />
		</li>
		<li>
			<label for="moveRoll">ROLL </label>
			<input type="text" id="moveRoll" name="moveRoll" size="18" />
			<button type="button" id="changeLocationAndRotation" class="btn">Apply</button> 
		</li>
	</ul>
</div>

				

JavaScript
$("#changeLocationAndRotation").click(function() {
	if(!changeLocationAndRotationCheck()) return false;
	changeLocationAndRotationAPI(managerFactory, $("#moveProjectId").val(), $("#moveDataKey").val(), $("#moveLatitude").val(), 
					       	     $("#moveLongitude").val(), $("#moveHeight").val(), $("#moveHeading").val(), 
					    	     $("#movePitch").val(), $("#moveRoll").val());
});

				

changeObjectMoveAPI

Change mouse click object movement destination

Parameters:

Name Description
managerFactoryInstance mago3D starting point
objectMoveMode 0 = All, 1 = object, 2 = None

Examples:

html
<div>
	<h3>Selecting And Moving</h3>
	<input type="radio" id="objectNoneMove" name="objectMoveMode" value="2" onclick="changeObjectMove('2');"/>
	<label for="objectNoneMove"> None </label>
	<input type="radio" id="mouseAllMove" name="objectMoveMode" value="0" onclick="changeObjectMove('0');"/>
	<label for="objectAllMove"> ALL </label>
	<input type="radio" id="objectMove" name="objectMoveMode" value="1" onclick="changeObjectMove('1');"/>
	<label for="objectMove"> Object </label>
</div>	

				

JavaScript
function changeObjectMove(objectMoveMode) {
	$("input:radio[name='objectMoveMode']:radio[value='" + objectMoveMode + "']").prop("checked", true);
	changeObjectMoveAPI(managerFactory, objectMoveMode);
}

				

saveObjectMoveAPI

Save all object mouse move history as Cache.

Parameters:

Name Description
managerFactoryInstance mago3D starting point
objectMoveMode 0 = All, 1 = object, 2 = None

Examples:

html
<button type="button" id="saveObjectMoveButton" class="btn">Save</button>	

				

JavaScript
$("#saveObjectMoveButton").click(function () {
	alert("Coming soon.");
	var objectMoveMode = $(':radio[name="objectMoveMode"]:checked').val();
	if(objectMoveMode === "2") {
		alert("Can not be saved in None mode.");
		return;
	}
	saveObjectMoveAPI(managerFactory, objectMoveMode);
});

				

deleteAllObjectMoveAPI

Delete all object mouse move history Cache.

Parameters:

Name Description
managerFactoryInstance mago3D starting point
objectMoveMode 0 = All, 1 = object, 2 = None

Examples:

html
<button type="button" id="deleteAllObjectMoveButton" class="btn">Delete All</button>

				

JavaScript
$("#deleteAllObjectMoveButton").click(function () {
	var objectMoveMode = $(':radio[name="objectMoveMode"]:checked').val();
	if(confirm("Are you sure you want to delete?")) {
		deleteAllObjectMoveAPI(managerFactory, objectMoveMode);
	}
});

				

deleteAllChangeColorAPI

Delete all changed color histories.

Parameters:

Name Description
managerFactoryInstance mago3D starting point

Examples:

html
<button type="button" id="deleteAllChangeColor" class="btn">Delete All</button>

				

JavaScript
$("#deleteAllChangeColor").click(function () {
	if(confirm("Are you sure you want to delete?")) {
		deleteAllChangeColorAPI(managerFactory);
	}
});

				

changeInsertIssueModeAPI

ChangeInsertIssueModeAPI is an API to enable artifacts. The parameter flag in this API is Boolean type, and if true, the issue mode is activated If false, the method is disabled. If you click on the object for which you want to register an issue, the issue registration callback function is called according to the database operation policy managing the callback function The issue registration window appears. If you save the contents in the issue registration window, it will be registered in the database. In addition, the issue callback function can be customized by the user.

Parameters:

Name Description
managerFactoryInstance mago3D starting point
flag true = Enable, false = disable

Examples:

html
<button type="button" id="insertIssueEnableButton" class="btn">Please select object after clicking.</button> 

				

JavaScript
$("#insertIssueEnableButton").click(function() {
	if(insertIssueEnable) {
		$("#insertIssueEnableButton").removeClass("on");
		$("#insertIssueEnableButton").text("Please select object after clicking.");
		insertIssueEnable = false;
	} else {
		$("#insertIssueEnableButton").addClass("on");
		$("#insertIssueEnableButton").text("Status of issue registration activation");
		insertIssueEnable = true;
	}
	changeInsertIssueModeAPI(managerFactory, insertIssueEnable);
});

				

Callback function called from mago3DJS
	function showInsertIssueLayer(projectId, dataKey, objectKey, latitude, longitude, height) {
		if(insertIssueEnable) {
		    $("#issueProjectId").val(projectId);
			$("#data_key").val(dataKey);
			$("#object_key").val(objectKey);
			$("#latitude").val(latitude);
			$("#longitude").val(longitude);
			$("#height").val(height);
			
			// Save current coordinates
			saveCurrentLocation(latitude, longitude);
	}
}

			

changeObjectInfoViewModeAPI

ChangeObjectInfoViewModeAPI is an API that enables the display of Object information. The parameter flag in this API is Boolean type, Mode is enabled and disabled if it is false. If you click on an object for which you want to know the information while it is activated, the callback function will manage the callback function. The object information is called through Jquery Plugin Toast. In addition, the information display callback function can be customized by the user.

Parameters:

Name Description
managerFactoryInstance mago3D starting point
flag true = Enable, false = disable

Examples:


html
<div>
	<h3>Object Information</h3>
	<input type="radio" id="showObjectInfo" name="objectInfo" value="true" onclick="changeObjectInfoViewMode(true);" />
	<label for="showObjectInfo"> Display </label>
	<input type="radio" id="hideObjectInfo" name="objectInfo" value="false" onclick="changeObjectInfoViewMode(false);"/>
	<label for="hideObjectInfo"> Hide </label>
</div>
			
				

JavaScript
function changeObjectInfoViewMode(isShow) {
	$("input:radio[name='objectInfo']:radio[value='" + isShow + "']").prop("checked", true);
	changeObjectInfoViewModeAPI(managerFactory, isShow);
}

				

Callback function called from mago3DJS
function showSelectedObject(projectId, dataKey, objectId, latitude, longitude, height, heading, pitch, roll) {
		var objectInfoViewFlag = $(':radio[name="objectInfo"]:checked').val();
		if(objectInfoViewFlag) {
		    $("#moveProjectId").val(projectId);
			$("#moveDataKey").val(dataKey);
			$("#moveLatitude").val(latitude);
			$("#moveLongitude").val(longitude);
			$("#moveHeight").val(height);
			$("#moveHeading").val(heading);
			$("#movePitch").val(pitch);
			$("#moveRoll").val(roll);
			
			$.toast({
			    heading: 'Click Object Info',
			    text: [
					'ProjectId : ' + projectId,
			        'dataKey : ' + dataKey,
			        'objectId : ' + objectId,
			        'latitude : ' + latitude,
			        'longitude : ' + longitude,
			        'height : ' + height,
			        'heading : ' + heading,
			        'pitch : ' + pitch,
			        'roll : ' + roll
			    ],
				bgColor : '#393946',
				hideAfter: 5000,
				icon: 'info',
				position : 'bottom-right'
			});
			
			// occlusion culling
			$("#occlusion_culling_data_key").val(dataKey);
			// Save current coordinates
			saveCurrentLocation(latitude, longitude);
	}
}

				

changeOcclusionCullingAPI

Object Occlusion culling

Parameters:

Name Description
managerFactoryInstance mago3D starting point
flag true: Enabled, false: Disabled
dataKey Data unique key

Examples:

html
<div>
	<h3>Object Occlusion Culling</h3>
	<div>
		<div>Whether or not to use</div>
		<input type="radio" id="useOcclusionCulling" name="occlusionCulling" value="true" />
		<label for="useOccusionCulling"> use </label>
		<input type="radio" id="unusedOcclusionCulling" name="occlusionCulling" value="false" />
		<label for="unusedOcclusionCulling"> unused </label>
	</div>
	<div>
		<div>Data Key</div>
		<input type="text" id="occlusion_culling_data_key" name="occlusion_culling_data_key"/>
		<button type="button" id="changeOcclusionCullingButton" class="btn">change</button>
	</div>
</div>

			

JavaScript
$("#changeOcclusionCullingButton").click(function () {
	changeOcclusionCullingAPI(managerFactory, ($(':radio[name="occlusionCulling"]:checked').val() === "true"), $("#occlusion_culling_data_key").val());		
});

				

changeFPVModeAPI

This is an API that changes the camera to first person or third person mode.

Parameters:

Name Description
managerFactoryInstance mago3D starting point
flag true: Enabled, false: Disabled

Examples:

html
<div>
	<h3>View Mode</h3>
	<input type="radio" id="mode3PV" name="viewMode" value ="false" onclick="changeViewMode(false);"/>
	<label for="mode3PV"> Third person mode </label>
	<input type="radio" id="mode1PV" name="viewMode" value ="true" onclick="changeViewMode(true);"/>
	<label for="mode1PV"> First person mode </label>
</div>

				

JavaScript
function changeViewMode(isFPVMode) {
	$("input:radio[name='viewMode']:radio[value='" + isFPVMode + "']").prop("checked", true);
	changeFPVModeAPI(managerFactory, isFPVMode);
}

				

changeNearGeoIssueListViewModeAPI

An API that shows issues near the current location when activated.

Parameters:

Name Description
managerFactoryInstance mago3D starting point
flag true = Enable, false = Disable

Examples:

html
<div>
	<h3>Issue List near your current location (100)</h3>
	<input type="radio" id="showNearGeoIssueList" name="nearGeoIssueList" value="true" onclick="changeNearGeoIssueList(true);" />
	<label for="showNearGeoIssueList"> Show </label>
	<input type="radio" id="hideNearGeoIssueList" name="nearGeoIssueList" value="false" onclick="changeNearGeoIssueList(false);"/>
	<label for="hideNearGeoIssueList"> Hide </label>
</div>

				

JavaScript
changeNearGeoIssueListViewModeAPI(managerFactory, isShow);

				

changeInsertIssueStateAPI

The mago3DJS engine remembers coordinates for issue registration. Initialize the coordinates by passing 0 to the parameter in changeInsertIssueStateAPI.

Parameters:

Name Description
managerFactoryInstance mago3D starting point
insertIssueState isure registration coordinates state

Examples:


JavaScript
changeInsertIssueStateAPI(managerFactory, 0);

				

changeLodAPI

API to change LOD (Level Of Detail) setting.

Parameters:

Name Description
managerFactoryInstance mago3D starting point
lod0DistInMeters lod0DistInMeters
lod1DistInMeters lod1DistInMeters
lod2DistInMeters lod2DistInMeters
lod3DistInMeters lod3DistInMeters
lod4DistInMeters lod4DistInMeters
lod5DistInMeters lod5DistInMeters

Examples:

html
<div>
	<h3>LOD</h3>
	<div>LOD0</div>
	<input type="text" id="geo_lod0" name="geo_lod0" value="" size="15" /> M
	<div>LOD1</div>
	<input type="text" id="geo_lod1" name="geo_lod1" value="" size="15" /> M
	<div>LOD2</div>
	<input type="text" id="geo_lod2" name="geo_lod2" value="" size="15" /> M
	<div>LOD3</div>
	<input type="text" id="geo_lod2" name="geo_lod2" value="" size="15" /> M
	<div>LOD4</div>
	<input type="text" id="geo_lod2" name="geo_lod2" value="" size="15" /> M
	<div>LOD5</div>
	<input type="text" id="geo_lod2" name="geo_lod2" value="" size="15" /> M  
	<button type="button" id="changeLodButton" class="btn">Apply</button>
</div>

				

JavaScript
$("#changeLodButton").click(function() {
		changeLodAPI(managerFactory, $("#geo_lod0").val(), $("#geo_lod1").val(), $("#geo_lod2").val(), $("#geo_lod3").val(), $("#geo_lod4").val(), $("#geo_lod5").val());
	});

				

changeLightingAPI

An API that adjusts the brightness of selected objects.

Parameters:

Name Description
managerFactoryInstance mago3D starting point
ambientReflectionCoef ambientReflectionCoef
diffuseReflectionCoef diffuseReflectionCoef
specularReflectionCoef specularReflectionCoef
ambientColor ambientColor
specularColor specularColor

Examples:

html
<div>
	<h3>Lighting</h3>
	<div>AmbientReflectionCoeficient</div>
	<div id="ambient_reflection_coef">
		<div id="geo_ambient_reflection_coef_view" class="ui-slider-handle"></div>
		<input type="hidden" id="geo_ambient_reflection_coef" name="geo_ambient_reflection_coef" value="0.5" />
	</div>
	<div>DiffuseReflectionCoeficient</div>
	<div id="diffuse_reflection_coef">
		<div id="geo_diffuse_reflection_coef_view" class="ui-slider-handle"></div>
		<input type="hidden" id="geo_diffuse_reflection_coef" name="geo_diffuse_reflection_coef" value="1" />
	</div>
	<div>SpecularReflectionCoeficient</div>
	<div>
		<div id="specular_reflection_coef">
			<div id="geo_specular_reflection_coef_view" class="ui-slider-handle"></div>
			<input type="hidden" id="geo_specular_reflection_coef" name="geo_specular_reflection_coef" value="1" />
		</div>
		<div>
			<button type="button" id="changeLightingButton" class="btn">Apply</button>
		</div>
	</div>
</div>

				

JavaScript
$("#changeLightingButton").click(function() {
		changeLightingAPI(managerFactory, $("#geo_ambient_reflection_coef").val(), $("#geo_diffuse_reflection_coef").val(), $("#geo_specular_reflection_coef").val(), null, null);
	});

				

changeSsaoRadiusAPI

API to set SSAO Radius in selected object.

Parameters:

Name Description
managerFactoryInstance mago3D starting point
ssaoRadius ssaoRadius

Examples:

html
<div>
	<h3><label for="geo_ssao_radius">SSAO Radius</label></h3>
	<input type="text" id="geo_ssao_radius" name="geo_ssao_radius" />
	<button type="button" id="changeSsaoRadiusButton" class="btn">Apply</button>
</div>

				

JavaScript
$("#changeSsaoRadiusButton").click(function() {
	changeSsaoRadiusAPI(managerFactory, $("#geo_ssao_radius").val());
});

				

clearAllDataAPI

An API to delete and hide all data on the screen.

Parameters:

Name Description
managerFactoryInstance mago3D starting point

Examples:


JavaScript
function clearAllData() {
	clearAllDataAPI(managerFactory);
}

				

drawInsertIssueImageAPI

An API that draws Pin Image.

Parameters:

Name Description
managerFactoryInstance mago3D starting point
drawType Draw Type
issue_id Issue unique key
issue_type Issue Type
data_key Data unique key
latitude latitude
longitude longitude
height height

Examples:


JavaScript
drawInsertIssueImageAPI(managerFactory, 1, msg.issue.issue_id, msg.issue.issue_type, 
		$("#data_key").val(), $("#latitude").val(), $("#longitude").val(), $("#height").val());

				

gotoProjectAPI

API to load and move the project.

Parameters:

Name Description
managerFactoryInstance mago3D starting point
projectId Project Id
projectData Project Data
projectDataFolder Project Data Folder
latitude latitude
longitude longitude
height height
duration Duration

Examples:

html
<ul class="shortcut">
	<li onclick="gotoProject('data.json', '126.5252421', '35.425', '550', '3')">data</li>
	<li onclick="gotoProject('data.json', '126.5252421', '35.425', '550', '3')">data</li>
	<li onclick="gotoProject('data.json', '126.5252421', '35.425', '550', '3')">data</li>
</ul>

				

JavaScript
function gotoProject(projectId, longitude, latitude, height, duration) {
		var projectData = getDataAPI(CODE.PROJECT_ID_PREFIX + projectId);
		if (projectData === null || projectData === undefined) {
			$.ajax({
				url: dataInformationUrl + projectId,
				type: "GET",
				dataType: "json",
				success: function(serverData) {
					gotoProjectAPI(managerFactory, projectId, serverData, serverData.data_key, longitude, latitude, height, duration);		
				},
				error : function(request, status, error) {
					console.log("code : " + request.status + "\n" + "message : " + request.responseText + "\n" + "error : " + error);
				}
			});
		} else {
			gotoProjectAPI(managerFactory, projectId, projectData, projectData.data_key, longitude, latitude, height, duration);	
		}
		
		// Save current coordinates
		saveCurrentLocation(latitude, longitude);
	}

				

gotoIssueAPI

An API that loads the project and moves to that issue.

Parameters:

Name Description
managerFactoryInstance mago3D starting point
projectId Project Id
projectData Project Data
projectDataFolder Project Data Folder
issueId Issue Id
issueType Issue Type
latitude latitude
longitude longitude
height height
duration Duration

Examples:

html
<li>
	<button type="button" title="Shortcuts" onclick="gotoIssue('ifc_mep.json', '128', 'ISSUE_TYPE_BUGGER', '126.6086040', '37.583', '40', '2')">Shortcuts</button>
	<div class="info">
		<p class="title"gt;<span>IFC(MEP)</span> TEST</p>
		<ul class="tag">
			<li><span class="i1"></span>Bugger</li>
			<li><span class="t1"></span>Very Important</li>
			<li class="date">2017-08-25 14:27:42</li>
		</ul>	
	</div>
</li>

				

JavaScript
function gotoIssue(projectId, issueId, issueType, longitude, latitude, height, duration) {
		var projectData = getDataAPI(CODE.PROJECT_ID_PREFIX + projectId);
		if (projectData === null || projectData === undefined) {
			$.ajax({
				url: dataInformationUrl + projectId,
				type: "GET",
				dataType: "json",
				success: function(serverData) {
					gotoIssueAPI(managerFactory, projectId, serverData, serverData.data_key, issueId, issueType, longitude, latitude, height, duration);		
				},
				error : function(request, status, error) {
					console.log("code : " + request.status + "\n" + "message : " + request.responseText + "\n" + "error : " + error);
				}
			});
		} else {
			gotoIssueAPI(managerFactory, projectId, projectData, projectData.data_key, issueId, issueType, longitude, latitude, height, duration);	
		}
		
		// Save current coordinates
		saveCurrentLocation(latitude, longitude);
	}

				

mouseMoveAPI

An API that replaces button events with a mouse disabled environment (under development).

Parameters:

Name Description
managerFactoryInstance mago3D starting point
eventType Identify which mouse actions you want

Examples:


searchDataAPI

API to retrieve data.

Parameters:

Name Description
managerFactoryInstance mago3D starting point
projectId Project Id
dataKey Data unique key

Examples:

html
<div>
	<h3>local(Browser) Search</h3>
	<ul class="apiLoca">
		<li>
			<label for="localSearchProjectId">Project </label>
			<select id="localSearchProjectId" name="localSearchProjectId" class="select">
				ProjectId
			</select>
		</li>
		<li>
			<label for="localSearchDataKey">Data Key</label>
			<input type="text" id="localSearchDataKey" name="localSearchDataKey" size="23" />
			<button type="button" id="localSearch" class="btn">Search</button> 
		</li>
	</ul>
</div>

				

JavaScript
$("#localSearch").click(function() {
	if ($.trim($("#localSearchDataKey").val()) === ""){
		alert("Please enter your Data Key.");
		$("#localSearchDataKey").focus();
		return false;
	}
	searchDataAPI(managerFactory, $("#localSearchProjectId").val(), $("#localSearchDataKey").val());
});

				

isDataExistAPI

It is an API that determines whether key value exists in environment setting data map.

Parameters:

Name Description
key Search Key

Examples:


JavaScript
isDataExistAPI(CODE.PROJECT_ID_PREFIX + dataName)

				

getDataAPI

It is an API that loads the data information (json) contained in the data amp.

Parameters:

Name Description
key Search Key

Examples:


JavaScript
getDataAPI(CODE.PROJECT_ID_PREFIX + projectId);

				

getDataInfoByDataKeyAPI

An API that acquires the spatial information of dataInfo using the data key.

Parameters:

Name Description
managerFactoryInstance mago3D starting point
projectId Project Id
dataKey Data unique key

Examples:


JavaScript
getDataAPI(CODE.PROJECT_ID_PREFIX + projectId);

				

drawAppendDataAPI

API to add and Rendering project unit data.

Parameters:

Name Description
managerFactoryInstance mago3D starting point
projectIdArray Project Id Array
projectDataArray Project Data Array
projectDataFolderArray Project Data Folder Array

Examples:


JavaScript
drawAppendDataAPI(managerFactory, projectIdArray, projectDataArray, projectDataFolderArray);