Drawing Military Symbols on Map

JerryChen · ‎10-02-2019

I'm using ArcGIS JSAPI 4.12 and wishing to use Spatial Illusions to draw military symbols on map.

When I add milsymbol.js to script, the console returns error Uncaught SyntaxError: Cannot use import statement outside a module, so I add type="module" to the script, the it returns Uncaught ReferenceError: ms is not defined.

Here's my code:

<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
<script src="https://js.arcgis.com/4.12/">
</script><script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>

<script>
        require([
          "esri/Map",
          "esri/views/MapView",
          "esri/layers/MapImageLayer",
          "esri/layers/FeatureLayer"
        ], function (Map, MapView, MapImageLayer, FeatureLayer) {
             var symbol = new ms.Symbol("SFG-UCI----D", { size: 30 }).asCanvas(3);
            var map = new Map({
                basemap: "topo-vector"
            });             
            var view = new MapView({
                container: "viewDiv",
                map: map,
                center: [121, 23],
                zoom: 7
            });
        });
    </script>

So, whether I add type="module" or not, there's always errors. However, in the official document of Spatial Illusions, there's no type="module" in the script. I'm now really confused, how do they manage to get it work without adding the type?

milsymbol.js

import { ms } from "./ms.js";import Symbol from "./ms/symbol.js";ms.Symbol = Symbol;export { ms };

ALOKRANJAN · ‎05-22-2020

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>2D Milsymbol Editor Final</title>

require([
"esri/map",
"esri/geometry/Point",
"esri/geometry/Polygon",
"esri/graphic", "dojo/_base/array",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/layers/GraphicsLayer",
"esri/layers/FeatureLayer", "esri/tasks/query",
"esri/toolbars/edit",
"dijit/Menu", "dijit/MenuItem",
"dojo/domReady!"
], function (
Map,
Point, Polygon, Graphic, arrayUtils,
PictureMarkerSymbol, SimpleMarkerSymbol, GraphicsLayer, FeatureLayer, Query ,Edit, Menu, MenuItem
) {

pictureMarkerSymbol = PictureMarkerSymbol;
graphic = Graphic;

myMap = new Map("viewDiv",
{
basemap: "streets",
center: [-80, 35],
zoom: 3,
sliderPosition: "top-right"
});

dojo.connect(myMap, "onClick", addGraphicsSVG);

myMap.on("load", createToolbarAndContextMenu);

graphicLayertactical = new esri.layers.GraphicsLayer();
myMap.addLayer(graphicLayertactical);

graphicLayertacticalPicker = new esri.layers.GraphicsLayer();
myMap.addLayer(graphicLayertacticalPicker);

tacticalFeatureLayer = new FeatureLayer("https://xxxxxxx/server/rest/services/xxxxxxl/FeatureServer/0", {
//mode: FeatureLayer.SELECTION_NEW,
outFields: ["*"],
visible: false
});

myMap.addLayer(tacticalFeatureLayer);

initSymbols(symbolFullList);

queryParams = new esri.tasks.Query();

currentCount = 0;

// Adding Plan into DropDown list - Tactical Plan Load
addTacticalPlan(queryParams, tacticalFeatureLayer);

cbTacticalPlanLoad.onchange = function ()
{
var planNameValue = document.getElementById("cbTacticalPlanLoad").value;

document.getElementById("txtSave").value = planNameValue;

globalSavePlanName = planNameValue;

};

// Save Tactical Plan
saveBtnTacticalPlan.onclick = function () {

if (globalSavePlanName != "") {

saveTacticalFeature(currentFeature, globalSavePlanName);
}
else {
alert("Please fill Plan Name in order to save");
}

};

// Save As Tactical Plan
saveAsBtnTacticalPlan.onclick = function () {

globalSaveAsPlanName = document.getElementById("txtSaveAs").value;

// alert(globalSaveAsPlanName);

if (globalSaveAsPlanName != "")
{

saveTacticalFeature(currentFeature, globalSaveAsPlanName);
}
else {
alert("Enter Tactical Plan");
}

};

// Calling Save plan from Save and SaveAs Button
function saveTacticalFeature(pCurrentFeatures, pPlanName)
{
//
var addedFeatures = pCurrentFeatures.map(function (item) {
var mappedItem = item;
mappedItem.attributes["MilitarySymbologyCode"] = item.attributes.svgCode;
mappedItem.attributes["PlanName"] = pPlanName;
return mappedItem;
});

var promise = tacticalFeatureLayer.applyEdits(addedFeatures, null, null);
}

function updateCurrentFeature(pSelected) {

// console.log("Current Graphic 1 " + pSelected.geometry.x);

// console.log("Selected Graphic 2" + moveGraphicFeature.geometry.x);

// Update Feature Move geomtery

for (var i in currentFeature)
{

var tempID = moveGraphicFeature.attributes["svgCode"];

if (currentFeature.SVGCodeID == tempID)
{

console.log(currentFeature.SVGx);
console.log(currentFeature.SVGy);

currentFeature.SVGx = 102.35;
currentFeature.SVGy = 102.35;

console.log(currentFeature.SVGx);
console.log(currentFeature.SVGy);

}

}

// currentFeature.push({ SVGCodeID: moveGraphicFeature.attributes["svgCode"], SVGID: moveGraphicFeature.attributes["countID"], SVGStatus: "CURRENT", SVGx: pSelected.geometry.x, SVGy: pSelected.geometry.y})

// console.log("currentFeature: " + currentFeature);

}

// Add Graphics on Map CLick
function addGraphicsSVG(evt)
{
var svgTacticalCode = null;

// svgTacticalCode = svgGlobaleCodeImg;

svgTacticalCode = document.getElementById("svgCode").innerHTML;

console.log(svgTacticalCode);

console.log("SymbolEditorMenu : " + document.getElementById("SymbolEditorMenu").style.display);

if (document.getElementById("SymbolEditorMenu").style.display == "") {

addGraphicsOnCondition(graphicLayertactical, svgTacticalCode, evt);

} else if (document.getElementById("SymbolEditorMenu").style.display == "block") {

addGraphicsOnCondition(graphicLayertactical, svgTacticalCode, evt);

} else if (document.getElementById("SymbolPickerMenu").style.display == "block") {

addGraphicsOnCondition(graphicLayertactical, svgGlobaleCodeImg, evt);

}

// This function Calling by Add Graphics - On Map Click
function addGraphicsOnCondition(pGraphicsLayer, pSVGCode, pEvt)
{

var currentStatus = "CURRENT";

var mysymbol = new MS.symbol(pSVGCode, { size: 30 }).getMarker();

myTacticalSymbol = mysymbol;

var symboltactical = new PictureMarkerSymbol({

"url": mysymbol.toDataURL(),
"width": Math.floor(mysymbol.width),
"height": Math.floor(mysymbol.height),
});

currentCount += 1;

var currentGraphic = new Graphic(pEvt.mapPoint, symboltactical, { "countID": currentCount - 1, "Status": currentStatus, "svgCode": pSVGCode });
pGraphicsLayer.add(currentGraphic);
myMap.addLayer(pGraphicsLayer);

var tacticalCode = pSVGCode;
var tacticalLocationX = pEvt.mapPoint.x.toString();
var tacticalLocationY = pEvt.mapPoint.y.toString();

// console.log(tacticalCode + " " + tacticalUser + " " + tacticalLocationX + " " + tacticalLocationY);

console.log("pGraphicsLayer" + pGraphicsLayer);

console.log("currentCount" + currentCount);

var feature = { SVGCodeID: tacticalCode, SVGID: currentCount - 1, SVGStatus: currentStatus, SVGx: tacticalLocationX, SVGy: tacticalLocationY, svgGemoetry: pEvt.mapPoint };
currentFeature.push(currentGraphic)

console.log("svgFeature: " + currentFeature);
}

function createToolbarAndContextMenu() {

editToolbar = new Edit(myMap);
dojo.connect(editToolbar, 'onGraphicMoveStop', handleGraphicEditStop);

myMap.on("click", function (evt) {
editToolbar.deactivate();
});

createGraphicsMenu();
}

function handleGraphicEditStop(graphic)
{

currentGraphic = new esri.Graphic(graphic.geometry, graphic.symbol);

console.log("currentGraphic Function Call " + currentGraphic.geometry.x);

updateCurrentFeature(currentGraphic);
}

function createGraphicsMenu() {

ctxMenuForGraphics = new Menu({});

ctxMenuForGraphics.addChild(new MenuItem({
label: "Move",
onClick: function ()
{
editToolbar.activate(Edit.MOVE, selected);
moveGraphicFeature = null;
moveGraphicFeature = selected;

console.log("moveGraphicFeature : " + moveGraphicFeature.geometry.x);

// updateCurrentFeature(selected);
}
}));

ctxMenuForGraphics.addChild(new MenuItem({
label: "Delete",
onClick: function () {
graphicLayertactical.remove(selected);
}
}));

ctxMenuForGraphics.startup();

graphicLayertactical.on("mouse-over", function (evt) {
// We'll use this "selected" graphic to enable editing tools
// on this graphic when the user click on one of the tools
// listed in the menu.
selected = evt.graphic;

// Let's bind to the graphic underneath the mouse cursor
ctxMenuForGraphics.bindDomNode(evt.graphic.getDojoShape().getNode());
});

graphicLayertactical.on("mouse-out", function (evt)
{
// console.log("mouse-out" + evt)
ctxMenuForGraphics.unBindDomNode(evt.graphic.getDojoShape().getNode());
});
}

});

</script>

function show(elementId) {

document.getElementById("SymbolEditorMenu").style.display = "none";
document.getElementById("SymbolProcessMenu").style.display = "none";
document.getElementById("SymbolPickerMenu").style.display = "none";
document.getElementById(elementId).style.display = "block";
pElementId = null;
pElementId = elementId;
}

function showSelection(checkedID) {

if (document.getElementById('rdLoad').checked)
{

document.getElementById("myFormLoad").style.display = "none";
document.getElementById("myFormSave").style.display = "none";
document.getElementById("myFormSaveAs").style.display = "none";
document.getElementById(checkedID).style.display = "block";
} else if (document.getElementById('rdSave').checked) {

document.getElementById("myFormLoad").style.display = "none";
document.getElementById("myFormSave").style.display = "none";
document.getElementById("myFormSaveAs").style.display = "none";
document.getElementById(checkedID).style.display = "block";
} else if (document.getElementById('rdSaveAs').checked) {

document.getElementById("myFormLoad").style.display = "none";
document.getElementById("myFormSave").style.display = "none";
document.getElementById("myFormSaveAs").style.display = "none";
document.getElementById(checkedID).style.display = "block";
}

}

</script>

function codeToSymbol(code) {
return mysymbol = new MS.symbol(code, { size: 30 }).getMarker();
}

};
xhr.open("GET", path, true);
xhr.send();
}

//

function initSymbols(militarySymbolArray) {

var selectTacticalA = document.getElementById("tacticalIdA");
var selectTacticalB = document.getElementById("tacticalIdB");

var optionAir = document.createElement('option');
var optionGround = document.createElement('option');
var optionSEA = document.createElement('option');
var optionSUBSURFACE = document.createElement('option');

var optionFriend = document.createElement('option');
var optionHOSTILE = document.createElement('option');
var optionUNKNOWN = document.createElement('option');
var optionNEUTRAL = document.createElement('option');

optionFriend.text = "FRIEND";
optionFriend.value = 1;
selectTacticalA.add(optionFriend, 1);

optionHOSTILE.text = "HOSTILE";
optionHOSTILE.value = 2;
selectTacticalA.add(optionHOSTILE, 2);

optionUNKNOWN.text = "UNKNOWN";
optionUNKNOWN.value = 3;
selectTacticalA.add(optionUNKNOWN, 3);

optionNEUTRAL.text = "NEUTRAL";
optionNEUTRAL.value = 4;
selectTacticalA.add(optionNEUTRAL, 4);

optionAir.text = "AIR";
optionAir.value = 1;
selectTacticalB.add(optionAir, 1);

optionGround.text = "GROUND";
optionGround.value = 2;
selectTacticalB.add(optionGround, 2);

optionSEA.text = "SEA";
optionSEA.value = 3;
selectTacticalB.add(optionSEA, 3);

optionSUBSURFACE.text = "SUBSURFACE";
optionSUBSURFACE.value = 4;
selectTacticalB.add(optionSUBSURFACE, 4);

// console.log("militarySymbolArray" + militarySymbolArray);

loadJSON('https://localhost/tacticalTactical/jsonSVGTactical.json',
function (data) {

militarySymbolArray = data;
// console.log("militarySymbolArray Total Lenght : " + militarySymbolArray.length);

var tacticalIMG, container = document.getElementById("tacticalTblStyleContainer");

console.log("Before Loop : " + militarySymbolArray.length);

tacticalIdB.onchange = function () {

clearTacticalcontainer(container);

var tacticalIDA = document.getElementById("tacticalIdA").value;
var tacticalIDB = document.getElementById("tacticalIdB").value;

var tacticalIDValueA = document.getElementById("tacticalIdA").options[tacticalIDA].text;

var tacticalIDValueB = document.getElementById("tacticalIdB").options[tacticalIDB].text;

console.log("tacticalIDValue After : " + tacticalIDValueA + " : " + tacticalIDValueB);

for (let i = 0; i < militarySymbolArray.length; i++)
{
// militarySymbolArray.length

var svgCateGoryA = militarySymbolArray.CategoryA;
var svgCateGoryB = militarySymbolArray.CategoryB;

if (svgCateGoryA.toUpperCase() == tacticalIDValueA && svgCateGoryB.toUpperCase() == tacticalIDValueB) {

var svgCodeImg = militarySymbolArray.SVGCodeID;
var svgImage = codeToSymbol(svgCodeImg);

tacticalIMG = document.createElement("img");
tacticalIMG.className = "pickerItemIcon";
tacticalIMG.id = svgCodeImg;
tacticalIMG.src = svgImage.toDataURL();

tacticalIMG.height = "50";
tacticalIMG.width = "50";

tacticalIMG.onclick = function () {

svgCodeCapture(this.id);

};

container.appendChild(tacticalIMG);
}
else
{
console.log("AIR Else : " + svgCateGoryA);
console.log("FRIEND Else : " + svgCateGoryB);
}

};

}

// console.log("After Added Arry : " + militarySymbolArray);
},
function (xhr) {
console.error(xhr);
}

);

}

function svgCodeCapture(pSvgGlobaleCodeImg) {
svgGlobaleCodeImg = null;
svgGlobaleCodeImg = pSvgGlobaleCodeImg;
}

function clearTacticalcontainer(pContainer) {

try {
while (pContainer.firstChild)
pContainer.removeChild(pContainer.firstChild);

}
catch (ex) {
pContainer.innerHTML = ex;
}
}

</script>

// Adding Tactical Plan name - Call by Map Onload
function addTacticalPlan(queryParams, featureLayer)
{

queryParams.outFields = ["PlanName"];
queryParams.where = "1=1";
queryParams.returnGeometry = false;
queryParams.returnDistinctValues = true;

featureLayer.queryFeatures(queryParams, function (response) {

addPlanInSelection(response);

});

}

function addPlanInSelection(response)
{

var features = response.features;
// console.log(features.length);

for (var i = 0; i < features.length; i++)
{
var _feature = features;

var option = document.createElement("option");
option.text = _feature.attributes["PlanName"];
option.value = _feature.attributes["PlanName"];
var select = document.getElementById("cbTacticalPlanLoad");
select.appendChild(option);

}

// Load all Tacical Plan - Plan Name condition
function loadPlanOnMap() {

var pQueryParams = new esri.tasks.Query();
var pFeatureLayer = tacticalFeatureLayer;

var planNameStr = document.getElementById("cbTacticalPlanLoad").value;

pQueryParams.returnGeometry = true;
pQueryParams.outFields = ["*"];

pQueryParams.where = "PlanName='" + planNameStr + "'";

pFeatureLayer.queryFeatures(pQueryParams, function (response) {

addPlanOnMap(response);

});
}

function addPlanOnMap(pResponse)
{

alert("Hello");

graphicLayertactical.clear();

var features = pResponse.features;

for (var i = 0; i < features.length; i++)
{
var _feature = features;

if (_feature.geometry.x != "NaN")
{

var mysymbol = new MS.symbol(_feature.attributes["MilitarySymbologyCode"], { size: 30 }).getMarker();

console.log(_feature.geometry);

var symboltactical = new pictureMarkerSymbol({

"url": mysymbol.toDataURL(),
"width": Math.floor(mysymbol.width),
"height": Math.floor(mysymbol.height),
});

var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10,
new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new esri.Color([255, 0, 0]), 1),
new esri.Color([0, 255, 0, 0.25]));

myMap.graphics.add(new graphic(_feature.geometry, symboltactical));
}

}

</script>

</head>

<div id="viewDiv">
<div style='float: right;'>Share</div>
<div id='SymbolPicker' class="symbolPanel">

<tr>
<th onclick="show('SymbolEditorMenu');">Editor</th>
<th onclick="show('SymbolProcessMenu');">Plan Manager</th>
<th onclick="show('SymbolPickerMenu');">Picker</th>
</tr>

</table>

</div>
<div class="panel panel-app6b" id="panel-2" role="tabpanel" aria-hidden="true">

</div>
<div class="panel panel-2525d" id="panel-3" role="tabpanel" aria-hidden="true">

</div>
<div class="panel panel-app6d" id="panel-4" role="tabpanel" aria-hidden="true">

</div>
</div>
</section>

</div>

<h1>Tactical Plan - Select Process </h1>

</label>
<label>

</div>

<select id="cbTacticalPlanLoad" name="cbTacticalPlanLoad" class="btn Load">
<option>SELECT</option>
</select>

</div>

</div>

</div>

<div>
<table style="width:100%">
<tr>
<td class="pickerSelectorLabal">
<label> <strong> Afliation : </strong></label>
</td>
<td class="pickerSelectorSelect">
<select id="tacticalIdA" name="TaticalA" class="btn Load">
<option>SELECT</option>
</select>
</td>
</tr>
</table>

</div>
<div>
<table style="width:100%">
<tr>
<td class="pickerSelectorLabal">
<label><strong> Dimension : </strong> </label>
</td>
<td class="pickerSelectorSelect">
<select id="tacticalIdB" name="TaticalB" class="btn Load ">
<option>SELECT</option>
</select>
</td>
</tr>
</table>
</div>

</div>

</body>

</html>