henry/CloudSimWebApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADD: added APP-6 Symbols to the Map

Browse Source
This commit is contained in:
hwinkel
2023-09-05 18:46:34 +02:00
parent 6d2a1d7556
commit 658830bab6
221 changed files with 73498 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
node_modules/milsymbol/examples/README.md generated vendored Normal file
View File

@@ -0,0 +1,11 @@
# Examples
These examples shows different functionality and ways to use milsymbol with external libraries.
There are also several other resouces online that demonstrates milsymbol usage, for example:
- Cesium http://cesiumjs.org/2016/07/20/Cesium-and-milsymbol/
- SAPUI5 https://blogs.sap.com/2016/07/28/adding-military-map-symbols-to-your-sapui5-applications/
- Scala https://github.com/workingDog/ScalaMS
If you would like to contribute with examples of milsymbol usage, please create them in the same structure as bl.ocks use. https://bl.ocks.org/-/about

88
node_modules/milsymbol/examples/angular/app.js generated vendored Executable file
View File

@@ -0,0 +1,88 @@
angular
.module("symbolTestApp", [])
.directive("milsymbol", [
"$log",
function($log) {
function createSymbolCode(scope) {
var size = scope.size || 20;
var symbol = new ms.Symbol(scope.sic, {
size: size,
uniqueDesignation: scope.uniqueDesignation
});
scope.code = symbol.toDataURL();
return symbol;
}
function link(scope, element, attrs) {
var mysymbol = createSymbolCode(scope);
scope.code = mysymbol.toDataURL();
scope.$watch("sic", function(newValue, oldValue) {
if (newValue !== oldValue) {
mysymbol = createSymbolCode(scope);
}
});
scope.$watch("uniqueDesignation", function(newValue, oldValue) {
if (newValue !== oldValue) {
mysymbol.setOptions({ uniqueDesignation: scope.uniqueDesignation });
scope.code = mysymbol.toDataURL();
}
});
scope.$watch("size", function(newValue, oldValue) {
if (newValue !== oldValue) {
mysymbol.setOptions({ size: scope.size });
scope.code = mysymbol.toDataURL();
}
});
}
return {
restrict: "E",
replace: true,
scope: {
sic: "@sic",
size: "@size",
uniqueDesignation: "@"
},
template: function(element, attrs) {
return '<img class="symbol-sm" ng-src="{{code}}"/>';
},
link: link
};
}
])
.controller("ListSymbolsController", [
"$scope",
function($scope) {
$scope.symbols = [
"SFG*UCDSS-*****",
"SNG*UCDSS-*****",
"SHG*UCDSS-*****",
"SUG*UCDSV-*****",
"SFG*UCDSV-*****",
"SNG*UCDSV-*****",
"SHG*UCDSV-*****",
"SUG*UCDM--*****",
"SFG*UCDM--*****",
"SNG*UCDM--*****",
"SHG*UCDM--*****",
"SUG*UCDML-*****",
"SFG*UCDML-*****",
"SNG*UCDML-*****",
"SHG*UCDML-*****",
"SUG*UCDMLA*****",
"SFG*UCDMLA*****",
"SNG*UCDMLA*****",
"SHG*UCDMLA*****"
];
}
])
.controller("SymbolController", [
"$scope",
function($scope) {
$scope.symbolSize = 40;
$scope.sidc = "SFG-UCI----D";
$scope.uniqueDesignation = "";
}
]);

71
node_modules/milsymbol/examples/angular/index.html generated vendored Executable file
View File

@@ -0,0 +1,71 @@
<!doctype html>
<html ng-app="symbolTestApp">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.symbol-table td {
vertical-align: top;
}
.list-of-symbols img.symbol-sm {
vertical-align: middle;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="../../dist/milsymbol.js"></script>
<script src="app.js"></script>
</head>
<body>
<p>Example:</p>
<code>
<pre>
&lt;milsymbol sic="SFG-UCIZ---B" size="40"&gt;&lt;/milsymbol&gt;
</pre>
</code>
<p>
<milsymbol sic="SFG-UCIZ---B" size="40"></milsymbol>
</p>
<div ng-controller="ListSymbolsController" class="list-of-symbols">
<span ng-repeat="symbol in symbols">
<milsymbol sic="{{symbol}}" size="40"></milsymbol>
</span>
</div>
<h2>Two way bindings</h2>
<div ng-controller="SymbolController">
<table class="symbol-table">
<tr>
<td>
<form>
Size:
<br>
<input type="number" ng-model="symbolSize" placeholder="Symbol size" ng-model-options="{ debounce: 500 }">
<br> SIDC:
<br>
<input type="text" ng-model="sidc" placeholder="Symbol identification code" ng-model-options="{ debounce: 500 }">
<br> Unique designation:
<br>
<input type="text" ng-model="uniqueDesignation" placeholder="uniqueDesignation" ng-model-options="{ debounce: 500 }">
<br>
</form>
</td>
<td>
<milsymbol sic="{{sidc}}" size="{{symbolSize}}" unique-designation="{{uniqueDesignation}}"></milsymbol>
</td>
</tr>
</table>
</div>
</body>
</html>

BIN
node_modules/milsymbol/examples/angular/preview.png generated vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

8
node_modules/milsymbol/examples/angular/readme.md generated vendored Normal file
View File

@@ -0,0 +1,8 @@
## Angular
A demo of a simple Angular.js directive for drawing milsymbol symbols.
This example was created by https://github.com/kjellmf Kjell Magne Fauske

152
node_modules/milsymbol/examples/arcgis3d/index.html generated vendored Normal file
View File

@@ -0,0 +1,152 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>ArcGIS JS API + milsymbol</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<!--
This is GeoJSON containing our units.
It will be availabel in a global variable called 'situation'
-->
<script src="../situation.json"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
<script src="https://js.arcgis.com/4.6/"></script>
<script src="../../dist/milsymbol.js"></script>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/FeatureLayer",
"esri/layers/support/Field",
"esri/renderers/UniqueValueRenderer",
"esri/geometry/Point",
"esri/symbols/PointSymbol3D",
"esri/symbols/IconSymbol3DLayer",
"milsymbol",
"dojo/_base/array",
"dojo/on",
"dojo/dom",
"dojo/domReady!"
], function (
Map, SceneView, FeatureLayer, Field, UniqueValueRenderer, Point, PointSymbol3D,
IconSymbol3DLayer,
ms,
arrayUtils, on, dom
) {
var map = new Map({
basemap: "dark-gray",
ground: "world-elevation"
});
var view = new SceneView({
container: "viewDiv",
map: map,
camera: {
position: {
x: 16, // lon
y: 45, // lat
z: 1500000 // elevation in meters
},
//scale: 15000000,
//center: [16, 60],
tilt: 45
}
});
// Create iconSymbol and add to renderer
var unknown = new ms.Symbol("SPZ---------", { size: 15, square: true });
var unknownUnit = new PointSymbol3D({
symbolLayers: [new IconSymbol3DLayer({
resource: {
href: unknown.toDataURL()
},
size: unknown.getSize().width
})]
});
var renderer = new UniqueValueRenderer({
field: "name", // I know the name is the Unique Designation for the unit
defaultSymbol: unknownUnit
});
// Add a unique icon for each unit
arrayUtils.map(situation.features, function (feature, i) {
var unit = new ms.Symbol(feature.properties.SIDC, { size: 20, square: true });
renderer.addUniqueValueInfo(feature.properties.name,
new PointSymbol3D({
symbolLayers: [new IconSymbol3DLayer({
resource: {
href: unit.asCanvas(3).toDataURL()
},
size: Math.max(unit.getSize().height, unit.getSize().width)
})]
})
)
});
var fields = [
{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
}, {
name: "name",
alias: "name",
type: "string"
}, {
name: "SIDC",
alias: "SIDC",
type: "string"
}];
var graphics = arrayUtils.map(situation.features, function (feature, i) {
return {
geometry: new Point({
x: feature.geometry.coordinates[0],
y: feature.geometry.coordinates[1]
}),
// select only the attributes you care about
attributes: {
ObjectID: i,
name: feature.properties.name,
SIDC: feature.properties.SIDC,
}
};
});
var lyr = new FeatureLayer({
source: graphics,
fields: fields,
objectIdField: "ObjectID",
renderer: renderer,
spatialReference: {
wkid: 4326
},
geometryType: "point"
});
map.add(lyr);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

BIN
node_modules/milsymbol/examples/arcgis3d/preview.png generated vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 172 KiB

3
node_modules/milsymbol/examples/arcgis3d/readme.md generated vendored Normal file
View File

@@ -0,0 +1,3 @@
# ArcGIS JS API
This is a sample for how to use milsymbol in the ArcGIS JS API 4.6.

217
node_modules/milsymbol/examples/d3-list/index.html generated vendored Normal file
View File

@@ -0,0 +1,217 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
.node-text {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: rgb(200, 200, 200);
shape-rendering: crispEdges;
stroke-dasharray: 2, 2;
}
.indicator {
stroke: rgb(100, 100, 100);
}
</style>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="../../dist/milsymbol.js"></script>
<script src="../situation.json"></script>
</head>
<body>
<div id="orbat"></div>
<script>
var duration = 300;
var margin = { top: 15, right: 20, bottom: 10, left: 30 };
var svg = d3.select("#orbat")
.append("svg")
.attr("width", 500)
.attr("height", 500)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
function geoJson2tree(data, name, command) {
var rawdata = {};
for (var key in data.features) {
rawdata[data.features[key].properties[name]] = data.features[key];
rawdata[data.features[key].properties[name]].suborgs = [];
data.features[key].name = data.features[key].properties[name].replace('&#228;', 'ä').replace('&#229;', 'å');
data.features[key].sidc = data.features[key].properties["SIDC"];
}
var tree = { "name": "milsymbol ORBAT", "sidc": "SUGP------", "suborgs": [] };
for (var key in rawdata) {
if (rawdata.hasOwnProperty(rawdata[key].properties[command])) {
rawdata[rawdata[key].properties[command]].suborgs.push(rawdata[key]);
} else {
var newCommand = { "name": rawdata[key].properties[command], "sidc": "SFGP------", "suborgs": [rawdata[key]] };
rawdata[rawdata[key].properties[command]] = newCommand;
tree.suborgs.push(newCommand);
}
}
return tree;
}
var structure = geoJson2tree(situation, "name", "command");
var d3cluster = d3.tree().nodeSize([0, 20]);;
var d3hirarcy = d3.hierarchy(structure, function (d) { return d.suborgs; });
d3hirarcy.x0 = 0;
d3hirarcy.y0 = 0;
update(svg, d3cluster, d3hirarcy, d3hirarcy);
function update(svg, d3cluster, d3hirarcy, source) {
var barHeight = 25;
// Compute the new tree layout.
var nodes = d3cluster(d3hirarcy),
links = nodes.links();
var height = Math.max(500, nodes.descendants().length * barHeight + margin.top + margin.bottom);
d3.select("#orbat").select("svg").transition()
.duration(duration)
.attr("height", height);
// Compute the "layout".
var i = 0;
nodes.eachBefore(function (d) {
//console.log('d.x0 '+d.x0 +' === d.x ' + ((i++) * barHeight) + ' === d.name ' + d.data.name)
d.x = (i++) * barHeight;
});
//update existing
var node = svg.selectAll("g.node")
.data(d3hirarcy.descendants(), function (d) { return d.id || (d.id = ++i); });
node.transition()
.duration(duration)
.attr("transform", function (d) { return "translate(" + (d.y) + "," + (d.x) + ")"; });
node.select(".indicator").transition()
.duration(duration)
.attr("fill", function (d) { if (d._children) { return "rgb(250,250,250)" } else { return "rgb(100,100,100)" } })
.attr("transform", function (d) { if (d._children) { return "translate(-21,0) rotate(0)" } else { return "translate(-21,0) rotate(45)" } })
//Enter new nodes
var newNode = node.enter().append("g")
.attr("class", "node")
.attr("transform", function (d) { return "translate(" + (source.y0) + "," + (source.x0) + ")"; })
.style("opacity", 1e-6);
newNode.transition()
.duration(duration)
.attr("transform", function (d) { return "translate(" + (d.y) + "," + (d.x) + ")"; })
.style("opacity", 1);
newNode.each(function (d) {
if (d.children || d._children) {
d3.select(this)
.append("path")
.attr("class", "indicator")
.attr("d", "M -0,-5 l 5,5 -5,5 z")
.attr("fill", function (d) { if (d._children) { return "rgb(250,250,250)" } else { return "rgb(100,100,100)" } })
.attr("transform", function (d) { if (d._children) { return "translate(-21,0) rotate(0)" } else { return "translate(-21,0) rotate(45)" } })
.on("click", function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(svg, d3cluster, d3hirarcy, d);
});
}
})
//milsymbol icon
newNode.append("g")
.attr("class", "symbol")
.attr("transform", function (d) {
if (d.data.sidc) d.data.symbol = new ms.Symbol(d.data.sidc, { size: 15 });
return "translate(" + (-d.data.symbol.getOctagonAnchor().x) + "," + (-d.data.symbol.getOctagonAnchor().y) + ")";
})
.each(function (d) { this.appendChild(d.data.symbol.asDOM()) })
newNode.append("text")
.attr("class", "node-text")
.attr("dy", 3)
.attr("x", 20)
.style("text-anchor", "start")
.text(function (d) { return d.data.name; });
//Remove old nodes
node.exit()
.transition()
.duration(duration)
.attr("transform", function (d) {
return "translate(" + source.y + "," + source.x + ")";
})
.style("opacity", 1e-6)
.remove();
//Link code
var link = svg.selectAll("path.link")
.data(d3hirarcy.descendants().slice(1), function (link) { return link.id + ':' + link.parent.id; });
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", function (d) {
return "M" + d.parent.y + "," + d.parent.x
+ " l"
+ " 0," + (d.x - d.parent.x) + " "
+ (d.y - d.parent.y) / 2 + "," + 0 + " "
+ "L" + d.y + "," + d.x;
});
var newLink = link.enter()
.insert("path", "g")
.attr("class", "link")
.attr("d", function (d) {
return "M" + source.y0 + "," + source.x0
+ " l"
+ " 0," + (source.x0 - source.x0) + " "
+ (source.y0 - source.y0) / 2 + "," + 0 + " "
+ "L" + source.y0 + "," + source.x0;
});
newLink.transition()
.duration(duration)
.attr("d", function (d) {
return "M" + d.parent.y + "," + d.parent.x
+ " l"
+ " 0," + (d.x - d.parent.x) + " "
+ (d.y - d.parent.y) / 2 + "," + 0 + " "
+ "L" + d.y + "," + d.x;
});
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function (d) {
return "M" + source.y0 + "," + source.x0
+ " l"
+ " 0," + (source.x0 - source.x0) + " "
+ (source.y0 - source.y0) / 2 + "," + 0 + " "
+ "L" + source.y0 + "," + source.x0;
})
.remove();
// if click
// Old positions for transition.
nodes.each(function (d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
</script>
</body>

BIN
node_modules/milsymbol/examples/d3-list/preview.png generated vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

5
node_modules/milsymbol/examples/d3-list/readme.md generated vendored Normal file
View File

@@ -0,0 +1,5 @@
## D3 Orbat list
Shows an ORBAT structure similar to a folder list in a file manager. It is possible to hide/show subunits by clicking on the arrow next to a unit symbol.
This example is using D3 version 5 for rendering the ORBAT.

220
node_modules/milsymbol/examples/d3-tree/index.html generated vendored Normal file
View File

@@ -0,0 +1,220 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
.link {
fill: none;
stroke: rgb(200, 200, 200);
shape-rendering: crispEdges;
}
</style>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="../../dist/milsymbol.js"></script>
<script src="../situation.json"></script>
</head>
<body onload="renderOrbat()">
Orientation of the tree:
<input onclick="update()" type="radio" name="orientation" value="vertical">Top to Bottom
<input onclick="update()" type="radio" name="orientation" value="horisontal" checked>Left to Right
<br>
<div id="orbattree"></div>
<script>
function geoJson2tree(data, name, command) {
var rawdata = {};
for (var key in data.features) {
rawdata[data.features[key].properties[name]] = data.features[key];
rawdata[data.features[key].properties[name]].children = [];
}
var tree = { "properties": { "orbatName": "milsymbol Orbat", "SIDC": "SUGP------" }, "children": [] };
for (var key in rawdata) {
if (rawdata.hasOwnProperty(rawdata[key].properties[command])) {
rawdata[rawdata[key].properties[command]].children.push(rawdata[key]);
} else {
var newCommand = { "properties": { "name": rawdata[key].properties[command], "SIDC": "SFGP------" }, "children": [rawdata[key]] };
rawdata[rawdata[key].properties[command]] = newCommand;
tree.children.push(newCommand);
}
}
return tree;
}
var structure = geoJson2tree(situation, "name", "command");
var tree, diagonal, svg;
var p = 0,
duration = 750,
root;
var sof, orientation, _source;
var margin = { top: 100, right: 200, bottom: 200, left: 100 };
function renderOrbat() {
tree = d3.layout.tree()
.separation(function (a, b) { return a.parent === b.parent ? 1 : 1; })
svg = d3.select("#orbattree").append("svg")
.attr("width", 500)
.attr("height", 500)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
structure.x0 = 500 / 2;
structure.y0 = 0;
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
structure.children.forEach(collapse);
update(structure);
}
function update(source) {
var radios = document.getElementsByName('orientation');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
orientation = radios[i].value;
break;
}
}
if (orientation == "horisontal") { tree.nodeSize([70, 200]) } else { tree.nodeSize([120, 150]) };
// Compute the new tree layout.
var nodes = tree.nodes(structure),
links = tree.links(nodes);
var minX = 0;
var maxX = 0;
var maxY = 0;
nodes.forEach(function (d) {
maxY = Math.max(d.y, maxY);
maxX = Math.max(d.x, maxX);
minX = Math.min(d.x, minX)
});
nodes.forEach(function (d) { d.x = d.x - minX; });
if (orientation == "horisontal") {
d3.select("#orbattree").select("svg").transition()
.duration(duration)
.attr("height", (maxX - minX) + margin.top + margin.bottom)
.attr("width", maxY + margin.left + margin.right);
} else {
d3.select("#orbattree").select("svg").transition()
.duration(duration)
.attr("width", (maxX - minX) + margin.top + margin.bottom)
.attr("height", maxY + margin.left + margin.right);
}
// Update the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function (d) { return d.id || (d.id = ++p); });
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function (d) { return orientation == "horisontal" ? ("translate(" + source.y0 + "," + source.x0 + ")") : ("translate(" + source.x0 + "," + source.y0 + ")"); })
.on("click", click)
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function (d) { return orientation == "horisontal" ? ("translate(" + d.y + "," + d.x + ")") : ("translate(" + d.x + "," + d.y + ")"); });
//Update all node symbols so that the color reflect if they have hidden children or not.
node.select(".symbol").remove()
node.append("g")
.attr("class", "symbol")
.attr("transform", function (d) {
if (d.properties.SIDC) d.symbol = new ms.Symbol(d.properties.SIDC, { size: 30, uniqueDesignation: (d.properties.name), colorMode: (d._children && d._children != "" ? ms.getColorMode("Medium") : ms.getColorMode("Light")) });
return "translate(" + (-d.symbol.octagonAnchor.x) + "," + (-d.symbol.octagonAnchor.y) + ")"
})
.each(function (d) { this.appendChild(d.symbol.asDOM()) })
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function (d) { return orientation == "horisontal" ? ("translate(" + source.y + "," + source.x + ")") : ("translate(" + source.x + "," + source.y + ")"); })
.remove();
// Update the links…
var link = svg.selectAll("path.link")
.data(links, function (d) { return d.target.id; });
// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function (d) {
var o = { x: source.x0, y: source.y0 };
return elbow({ source: o, target: o });
});
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", elbow);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function (d) {
var o = { x: source.x, y: source.y };
return elbow({ source: o, target: o });
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function (d) {
d.x0 = d.x;
d.y0 = d.y;
});
root = structure;
_source = source;
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
function expand(d) {
if (d._children) {
d.children = d._children;
d._children = null;
}
}
// Draws the line between nodes
function elbow(d, i) {
if (orientation == "horisontal") return "M" + d.source.y + "," + d.source.x
+ " l" + (d.target.y - d.source.y) / 2 + "," + 0 + " "
+ " 0," + (d.target.x - d.source.x) + " "
+ "L" + d.target.y + "," + d.target.x;
return "M" + d.source.x + "," + d.source.y
+ " l" + 0 + "," + (d.target.y - d.source.y) / 2 + " "
+ " " + (d.target.x - d.source.x) + ",0 "
+ "L" + d.target.x + "," + d.target.y;
}
</script>
</body>

BIN
node_modules/milsymbol/examples/d3-tree/preview.png generated vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

5
node_modules/milsymbol/examples/d3-tree/readme.md generated vendored Normal file
View File

@@ -0,0 +1,5 @@
## D3 Orbat tree
Shows an ORBAT structure in a tree view similar to how it would displayed in a power point presentation. It is possible to show/hide subunits by clicking on the units, when a unit has hidden subunits it will be displayed in a slightly darker color.
This example is using D3 version 3 for rendering the ORBAT.

100
node_modules/milsymbol/examples/es6-import/index.html generated vendored Normal file
View File

@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>ES6 imports</h1>
This sample shows how milsymbol can be imported as ES6 modules. You will have to allow CORS in your browser if you run it
locally, or place the sample on a server.
<br>
<br>
<table border="1">
<tr>
<td>
We have imported land equipment, so here you should see a SVG and a Canvas symbol.
</td>
<td>
We have not imported icons for 2525D, so this should display a symbol with missing main icon, and an indcator that something
has gone wrong.
</td>
</tr>
<tr>
<td>
<br> SVG Example:
<br>
<div id="SVG-imported"></div>
</td>
<td>
<br> SVG Example:
<br>
<div id="SVG-notimported"></div>
</td>
</tr>
<tr>
<td>
Canvas Example:
<br>
<div id="Canvas-imported">
<p></p>
</div>
</td>
<td>
Canvas Example:
<br>
<div id="Canvas-notimported">
<p></p>
</div>
</td>
</tr>
</table>
<script type="module">
import { ms, std2525c } from '../../index.esm.js';
ms.addIcons(std2525c);
var color = "yellow";
var outline = 3;
var symbol = new ms.Symbol("sfgpewrh--mt", {
size: 35,
quantity: 200,
staffComments: "for reinforcements".toUpperCase(),
additionalInformation: "added support for JJ".toUpperCase(),
direction: (750 * 360 / 6400),
type: "machine gun".toUpperCase(),
dtg: "30140000ZSEP97",
location: "0900000.0E570306.0N",
outlineColor: color,
outlineWidth: outline
});
document.getElementById("SVG-imported").innerHTML = symbol.asSVG();
document.getElementById("Canvas-imported").replaceChild(
symbol.asCanvas(),
document.getElementById("Canvas-imported").firstChild);
var symbol = new ms.Symbol("10031500001101030000", {
size: 35,
quantity: 200,
staffComments: "for reinforcements".toUpperCase(),
additionalInformation: "added support for JJ".toUpperCase(),
direction: (750 * 360 / 6400),
type: "machine gun".toUpperCase(),
dtg: "30140000ZSEP97",
location: "0900000.0E570306.0N",
outlineColor: color,
outlineWidth: outline
});
document.getElementById("SVG-notimported").innerHTML = symbol.asSVG();
document.getElementById("Canvas-notimported").replaceChild(
symbol.asCanvas(),
document.getElementById("Canvas-notimported").firstChild);
</script>
</body>

3
node_modules/milsymbol/examples/es6-import/readme.md generated vendored Normal file
View File

@@ -0,0 +1,3 @@
## ES6 Imports
This shows how milsymbol supports ES6 imports so that you can import only exactly what you need.

71
node_modules/milsymbol/examples/leaflet-divicons/index.html generated vendored Executable file
View File

@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style type="text/css">
html,
body,
.mymap {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<script src="../../dist//milsymbol.js"></script>
<script src="../situation.json"></script>
</head>
<body onload="init()">
<script>
function init() {
var osmAttr = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';
var OSM = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: osmAttr }),
latlng = L.latLng(59, 16);
var map = L.map('map', { center: latlng, zoom: 5, layers: [OSM] });
var iconSize = {
"Team/Crew": 5,
"Squad": 10,
"Section": 15,
"Platoon/detachment": 20,
"Company/battery/troop": 25,
"Battalion/squadron": 30,
"Regiment/group": 35,
"Brigade": 40,
"Division": 45,
"Corps/MEF": 50,
"Army": 55,
"Army Group/front": 60,
"Region/Theater": 65,
"Command": 70
};
L.geoJson(situation, {
pointToLayer: function (feature, latlng) {
var mysymbol = new ms.Symbol(
feature.properties.SIDC, {
uniqueDesignation: feature.properties.name
})
// Now that we have a symbol we can ask for the echelon and set the symbol size
mysymbol = mysymbol.setOptions({ size: iconSize[mysymbol.getMetadata().echelon] });
var myicon = L.divIcon({
className: '',
html: mysymbol.asSVG(),
iconAnchor: new L.Point(mysymbol.getAnchor().x, mysymbol.getAnchor().y)
});
return L.marker(latlng, { icon: myicon, draggable: true });
}
}).addTo(map);
}
</script>
<div id="map" class="mymap"></div>
</body>
</html>

BIN
node_modules/milsymbol/examples/leaflet-divicons/preview.png generated vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 453 KiB

5
node_modules/milsymbol/examples/leaflet-divicons/readme.md generated vendored Normal file
View File

@@ -0,0 +1,5 @@
## milsymbol in LeafLet - L.divIcon()
You can use the SVG XML output directly in a L.divIcon(), this way you can also add other HTML information to your markers if you want to. This is the simplest way of using milsymbol in LeafLet, but might run into performance issues if you are using a very large number of symbols.
This example is using LeafLet 1.3.1.

73
node_modules/milsymbol/examples/leaflet-imageicons/index.html generated vendored Normal file
View File

@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style type="text/css">
html,
body,
.mymap {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<script src="../../dist//milsymbol.js"></script>
<script src="../situation.json"></script>
</head>
<body onload="init()">
<script>
function init() {
var osmAttr = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';
var OSM = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: osmAttr }),
latlng = L.latLng(59, 16);
var map = L.map('map', { center: latlng, zoom: 5, layers: [OSM] });
var iconSize = {
"Team/Crew": 5,
"Squad": 10,
"Section": 15,
"Platoon/detachment": 20,
"Company/battery/troop": 25,
"Battalion/squadron": 30,
"Regiment/group": 35,
"Brigade": 40,
"Division": 45,
"Corps/MEF": 50,
"Army": 55,
"Army Group/front": 60,
"Region/Theater": 65,
"Command": 70
};
L.geoJson(situation, {
pointToLayer: function (feature, latlng) {
var mysymbol = new ms.Symbol(
feature.properties.SIDC, {
uniqueDesignation: feature.properties.name
})
// Now that we have a symbol we can ask for the echelon and set the symbol size
mysymbol = mysymbol.setOptions({ size: iconSize[mysymbol.getMetadata().echelon] });
var myicon = L.icon({
iconUrl: mysymbol.toDataURL(),
iconAnchor: [mysymbol.getAnchor().x, mysymbol.getAnchor().y],
});
return L.marker(latlng, { icon: myicon, draggable: true });
}
}).addTo(map);
}
</script>
<div id="map" class="mymap"></div>
</body>
</html>

BIN
node_modules/milsymbol/examples/leaflet-imageicons/preview.png generated vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 454 KiB

5
node_modules/milsymbol/examples/leaflet-imageicons/readme.md generated vendored Normal file
View File

@@ -0,0 +1,5 @@
## milsymbol in LeafLet - L.icon()
Using the toDataURL() method in milsymbol makes it possible to assign the output from milsymbol as an image source. This way you can use the output from milsymbol in ordinary L.icon() markers in LeafLet.
This example is using LeafLet 1.3.1 but will work without any problem in in LeafLet 0.7.3+.

90
node_modules/milsymbol/examples/openlayers/index.html generated vendored Normal file
View File

@@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style type="text/css">
html,
body,
.mymap {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
<script src="../../dist/milsymbol.js"></script>
<script src="../situation.json"></script>
</head>
<body onload="init()">
<script>
function init() {
var iconSize = {
"Team/Crew": 5,
"Squad": 10,
"Section": 15,
"Platoon/detachment": 20,
"Company/battery/troop": 25,
"Battalion/squadron": 30,
"Regiment/group": 35,
"Brigade": 40,
"Division": 45,
"Corps/MEF": 50,
"Army": 55,
"Army Group/front": 60,
"Region/Theater": 65,
"Command": 70
};
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(situation, { featureProjection: 'EPSG:3857' })
});
var ratio = window.devicePixelRatio || 1;
vectorSource.forEachFeature(function (f) {
var mysymbol = new ms.Symbol(
f.getProperties().SIDC, {
uniqueDesignation: f.getProperties().name
});
// Now that we have a symbol we can ask for the echelon and set the symbol size
var mycanvas = mysymbol.setOptions({ size: iconSize[mysymbol.getMetadata().echelon] * ratio }).asCanvas();
f.setStyle(new ol.style.Style({
image: new ol.style.Icon(({
scale: 1 / ratio,
anchor: [mysymbol.getAnchor().x, mysymbol.getAnchor().y],
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
imgSize: [Math.floor(mysymbol.getSize().width), Math.floor(mysymbol.getSize().height)],
img: (mycanvas)
}))
}));
})
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var rasterLayer = new ol.layer.Tile({
preload: 4,
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [rasterLayer, vectorLayer],
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.transform([16, 59], 'EPSG:4326', 'EPSG:3857'),
zoom: 5
})
});
}
</script>
<div id="map" class="mymap"></div>
</body>
</html>

BIN
node_modules/milsymbol/examples/openlayers/preview.png generated vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 463 KiB

7
node_modules/milsymbol/examples/openlayers/readme.md generated vendored Normal file
View File

@@ -0,0 +1,7 @@
## milsymbol in open layers 4 - ol.style.Icon()
Using the asCanvas() method in milsymbol makes it possible to assign the output from milsymbol as an image source. This way you can use the output from milsymbol in ol.style.Icon() in Open Layers. This should be able to handle a very large number of symbols.
If a style function is used for the symbols some sort of symbol cache should be used so that it won't have to regenerate all symbols at each interaction with the map. In this example however each symbol is set as a style on each feature.
This example uses Open Layers v4.6.5.

65
node_modules/milsymbol/examples/outline/index.html generated vendored Normal file
View File

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="../../dist/milsymbol.js"></script>
</head>
<body onload="example()">
Outline Color:
<select id="outlineColor" onchange="example()">
<option>Silver</option>
<option>Red</option>
<option SELECTED>Yellow</option>
<option>Lime</option>
<option>Aqua</option>
<option>Fuchsia</option>
</select> Outline Width:
<select id="outlineWidth" onchange="example()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" SELECTED>4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<br> SVG Example:
<br>
<div id="SVG"></div>
Canvas Example:
<br>
<div id="Canvas">
<p></p>
</div>
<script>
function example() {
var color = document.getElementById("outlineColor")[document.getElementById("outlineColor").selectedIndex].value;
var outline = document.getElementById("outlineWidth")[document.getElementById("outlineWidth").selectedIndex].value;
var symbol = new ms.Symbol("sfgpewrh--mt", {
size: 35,
quantity: 200,
staffComments: "for reinforcements".toUpperCase(),
additionalInformation: "added support for JJ".toUpperCase(),
direction: (750 * 360 / 6400),
type: "machine gun".toUpperCase(),
dtg: "30140000ZSEP97",
location: "0900000.0E570306.0N",
outlineColor: color,
outlineWidth: outline
});
document.getElementById("SVG").innerHTML = symbol.asSVG();
document.getElementById("Canvas").replaceChild(
symbol.asCanvas(),
document.getElementById("Canvas").firstChild);
}
</script>
</body>

BIN
node_modules/milsymbol/examples/outline/preview.png generated vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 KiB

3
node_modules/milsymbol/examples/outline/readme.md generated vendored Normal file
View File

@@ -0,0 +1,3 @@
## Outline
This shows how symbol outline is supported for both Canvas and SVG output.

80
node_modules/milsymbol/examples/situation.json generated vendored Normal file
View File

@@ -0,0 +1,80 @@
var situation = {"name":"Layer","type":"FeatureCollection",
"crs": {"type": "name","properties": {"name": "EPSG:4326"}},
"features":[
{"type":"Feature","geometry":{"type":"Point","coordinates":[13.9264527063343,56.2888907165595]},"properties":{"SIDC":"SFGPU------E***","name":"1.C2 komp","fullname":"1.C2 komp/FTS/INSS","command":"FTS"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[19.1604869967705,65.5966818958909]},"properties":{"SIDC":"SFGPUCRV---F***","name":"1.Jbat","fullname":"1.Jbat/INSS","command":"INSS"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.0825282191617,59.6410393541284]},"properties":{"SIDC":"SFGPUUMSE--F***","name":"1.TKbat","fullname":"1.TKbat/INSS","command":"INSS"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.780633496933,59.519251526265]},"properties":{"SIDC":"SFGPUULM---F***","name":"13.S&#228;kbat","fullname":"13.S&#228;kbat/INSS","command":"INSS"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[15.4831849611643,60.496055634923]},"properties":{"SIDC":"SFGPUCI----F***","name":"17.Hvbat","fullname":"17.Hvbat/MRM/INSS","command":"MRM"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[15.4200004438307,60.4762802902876]},"properties":{"SIDC":"SFGPUCI----E***","name":"171.Inskomp","fullname":"171.Inskomp/17.Hvbat/MRM/INSS","command":"17.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[15.6404774841138,60.6056416321666]},"properties":{"SIDC":"SFGPUCI----E***","name":"172.Inskomp","fullname":"172.Inskomp/17.Hvbat/MRM/INSS","command":"17.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[15.4164505691297,60.5385137626812]},"properties":{"SIDC":"SFGPUCI----E***","name":"173.Bevkomp","fullname":"173.Bevkomp/17.Hvbat/MRM/INSS","command":"17.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[15.5053934908843,60.4263401694757]},"properties":{"SIDC":"SFGPUCVF---C***","name":"174.Flyggrp","fullname":"174.Flyggrp/17.Hvbat/MRM/INSS","command":"17.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[15.5216822502589,60.419327747011]},"properties":{"SIDC":"SFGPUCE----D***","name":"176.Piplut","fullname":"176.Piplut/17.Hvbat/MRM/INSS","command":"17.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.1037137456012,60.6361002727779]},"properties":{"SIDC":"SFGPUCI---AF***","name":"18.Hvbat","fullname":"18.Hvbat/MRM/INSS","command":"MRM"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.3850455958827,60.4752381559049]},"properties":{"SIDC":"SFGPUCI----E***","name":"181.Inskomp","fullname":"181.Inskomp/18.Hvbat/MRM/INSS","command":"18.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.2481190991353,60.6879397848107]},"properties":{"SIDC":"SFGPUCI----E***","name":"182.Inskomp","fullname":"182.Bevkomp/18.Hvbat/MRM/INSS","command":"18.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[16.950573155785,60.6022297757445]},"properties":{"SIDC":"SFGPUCI----E***","name":"183.Bevkomp","fullname":"183.Bevkomp/18.Hvbat/MRM/INSS","command":"18.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.1491618529446,60.6869685133959]},"properties":{"SIDC":"SFGPUCI----E***","name":"184.Bevkomp","fullname":"184.Bevkomp/18.Hvbat/MRM/INSS","command":"18.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.3149184570537,60.7041912539079]},"properties":{"SIDC":"SFGPUCIN---D***","name":"185.B&#229;tplut","fullname":"185.B&#229;tplut/18.Hvbat/MRM/INSS","command":"18.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[16.9544316326947,60.5942398164611]},"properties":{"SIDC":"SFGPUCV----C***","name":"186.Flyggrp","fullname":"186.Flyggrp/18.Hvbat/MRM/INSS","command":"18.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[16.8344930025655,58.3095662564668]},"properties":{"SIDC":"SFGPUCIN---E***","name":"2.Amfkopmp","fullname":"2.Amfkopmp/1.Amfbat/INSS","command":"1.Amfbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[16.238582993542,59.0273709214064]},"properties":{"SIDC":"SFGPUCIZ--AH***","name":"2.Brig","fullname":"2.Brig/INSS","command":"INSS"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.5257695946588,59.6080831533645]},"properties":{"SIDC":"SFGPU------E***","name":"2.C2 komp","fullname":"2.C2 komp/FTS/INSS","command":"FTS"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.5999674748142,59.8939088257096]},"properties":{"SIDC":"SFGPUCI----F***","name":"21.Hvbat","fullname":"21.Hvbat/MRM/INSS","command":"MRM"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.6127430007003,59.8793264746759]},"properties":{"SIDC":"SFGPUCI----E***","name":"211.Inskomp","fullname":"211.Inskomp/21.Hvbat/MRM/INSS","command":"21.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.6790891592872,59.8516064004869]},"properties":{"SIDC":"SFGPUCI----E***","name":"212.Inskomp","fullname":"212.Inskomp/21.Hvbat/MRM/INSS","command":"21.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.599908566094,59.8843330402968]},"properties":{"SIDC":"SFGPUCI----E***","name":"213.Bevkomp","fullname":"213.Bevkomp/21.Hvbat/MRM/INSS","command":"21.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.7617207065384,59.8337348887318]},"properties":{"SIDC":"SFGPUCR----E***","name":"214.Undkomp","fullname":"214.Undkomp/21.Hvbat/MRM/INSS","command":"21.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[16.6121638147886,59.5846318503743]},"properties":{"SIDC":"SFGPUCI---AF***","name":"22.Hvbat","fullname":"22.Hvbat/MRM/INSS","command":"MRM"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[16.6430089244942,59.5925659173492]},"properties":{"SIDC":"SFGPUCI----E***","name":"221.Inskomp","fullname":"221.Inskomp/22.Hvbat/MRM/INSS","command":"22.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[16.4735776622532,59.5949156484754]},"properties":{"SIDC":"SFGPUCI----E***","name":"222.Inskomp","fullname":"222.Inskomp/22.Hvbat/MRM/INSS","command":"22.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[16.6352555986967,59.6089215756093]},"properties":{"SIDC":"SFGPUCI----E***","name":"223.Bevkomp","fullname":"223.Bevkomp/22.Hvbat/MRM/INSS","command":"22.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.87063109525,59.6173011010681]},"properties":{"SIDC":"SFGPUCI---AF***","name":"23.Hvbat","fullname":"23.Hvbat/MRM/INSS","command":"MRM"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[18.5604585736757,59.5554732494588]},"properties":{"SIDC":"SFGPUCI----E***","name":"231.Insatskomp","fullname":"231.Insatskomp/23.Hvbat/MRM/INSS","command":"23.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.9310725132708,59.6491761113177]},"properties":{"SIDC":"SFGPUCI----E***","name":"232.Inskomp","fullname":"232.Inskomp/23.Hvbat/MRM/INSS","command":"23.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[18.0767771140349,59.5346781274677]},"properties":{"SIDC":"SFGPUCI----E***","name":"233.Bevkomp","fullname":"233.Bevkomp/23.Hvbat/MRM/INSS","command":"23.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[18.0421139475026,59.6823055916381]},"properties":{"SIDC":"SFGPUCR----E***","name":"234.Undkomp","fullname":"234.Undkomp/231.Insatskomp/23.Hvbat/MRM/INSS","command":"231.Insatskomp"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[18.0047624165287,59.3682656063121]},"properties":{"SIDC":"SFGPUCI----F***","name":"24.Hvbat","fullname":"24.Hvbat/MRM/INSS","command":"MRM"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[18.0582952723693,59.3437207025862]},"properties":{"SIDC":"SFGPUCI----E***","name":"241.Inskomp","fullname":"241.Inskomp/24.Hvbat/MRM/INSS","command":"24.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[18.0427345876287,59.3878935131493]},"properties":{"SIDC":"SFGPUCI----E***","name":"242.Inskomp","fullname":"242.Inskomp/24.Hvbat/MRM/INSS","command":"24.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.9887873122416,59.3679806773642]},"properties":{"SIDC":"SFGPUCI----E***","name":"243.Bevkomp","fullname":"243.Bevkomp/24.Hvbat/MRM/INSS","command":"24.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.6525600727753,59.1758837474931]},"properties":{"SIDC":"SFGPUCI---AF***","name":"25.Hvbat","fullname":"25.Hvbat/MRM/INSS","command":"MRM"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.5631993602988,59.1885260991916]},"properties":{"SIDC":"SFGPUCI----E***","name":"251.Inskomp","fullname":"251.Inskomp/25.Hvbat/MRM/INSS","command":"25.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.6425607048154,59.1849086466696]},"properties":{"SIDC":"SFGPUCI----E***","name":"252.Inskomp","fullname":"252.Inskomp/25.Hvbat/MRM/INSS","command":"25.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.96853711074,59.230339821515]},"properties":{"SIDC":"SFGPUCI----E***","name":"253.Bevkomp","fullname":"253.Bevkomp/25.Hvbat/MRM/INSS","command":"25.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.5888719568663,59.1482356463323]},"properties":{"SIDC":"SFGPUCV----C***","name":"254.Flygrp","fullname":"254.Flygrp/25.Hvbat/MRM/INSS","command":"25.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.8785925128308,59.4212404022248]},"properties":{"SIDC":"SFGPUCI----F***","name":"26.Hvbat","fullname":"26.Hvbat/MRM/INSS","command":"MRM"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.7949588383521,59.4770735483453]},"properties":{"SIDC":"SFGPUCI----E***","name":"261.Inskomp","fullname":"261.Inskomp/26.Hvbat/MRM/INSS","command":"26.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.8500350117106,59.3225576100611]},"properties":{"SIDC":"SFGPUCI----E***","name":"262.Inskomp","fullname":"262.Inskomp/26.Hvbat/MRM/INSS","command":"26.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.5448433996879,59.5639094709462]},"properties":{"SIDC":"SFGPUCI----E***","name":"263.Bevkomp","fullname":"263.Bevkomp/26.Hvbat/MRM/INSS","command":"26.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[16.9251348976686,58.788897275522]},"properties":{"SIDC":"SFGPUCI---AF***","name":"27.Hvbat","fullname":"27.Hvbat/MRM/INSS","command":"MRM"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[16.3371891732959,59.4451412409949]},"properties":{"SIDC":"SFGPUCI----E***","name":"271.Inskomp","fullname":"271.Inskomp/27.Hvbat/MRM/INSS","command":"27.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.082800659594,58.6782294848051]},"properties":{"SIDC":"SFGPUCI----E***","name":"272.Inskomp","fullname":"272.Inskomp/27.Hvbat/MRM/INSS","command":"27.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.0006536972256,59.3832532426125]},"properties":{"SIDC":"SFGPUCI----E***","name":"273.Bevkomp","fullname":"273.Bevkomp/27.Hvbat/MRM/INSS","command":"27.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[16.9079560228281,58.7870863572724]},"properties":{"SIDC":"SFGPUCI----E***","name":"274.Bevkomp","fullname":"274.Bevkomp/27.Hvbat/MRM/INSS","command":"27.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.1100925705783,58.6576254848673]},"properties":{"SIDC":"SFGPUCIN---D***","name":"275.B&#229;tplut","fullname":"275.B&#229;tplut/27.Hvbat/MRM/INSS","command":"27.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[18.6949238081347,59.7329226388356]},"properties":{"SIDC":"SFGPUCVF---C***","name":"276.Flygrp","fullname":"276.Flygrp/27.Hvbat/MRM/INSS","command":"27.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[18.918446596707,59.7527539262468]},"properties":{"SIDC":"SFGPUCI---AF***","name":"28.Hvbat","fullname":"28.Hvbat/MRM/INSS","command":"MRM"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[19.0745672792682,59.7522865395695]},"properties":{"SIDC":"SFGPUCI----E***","name":"281.Inskomp","fullname":"281.Inskomp/28.Hvbat/MRM/INSS","command":"28.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[18.404457393663,59.4733011004266]},"properties":{"SIDC":"SFGPUCI----E***","name":"282.Inskomp","fullname":"282.Inskomp/28.Hvbat/MRM/INSS","command":"28.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[18.7611861642108,60.1721322504235]},"properties":{"SIDC":"SFGPUCI----E***","name":"283.Bevkomp","fullname":"283.Bevkomp/28.Hvbat/MRM/INSS","command":"28.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[18.9200740471087,59.659477110883]},"properties":{"SIDC":"SFGPUCIN---D***","name":"285.B&#229;tplut","fullname":"285.B&#229;tplut/28.Hvbat/MRM/INSS","command":"28.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[18.1478042099952,59.0133940148515]},"properties":{"SIDC":"SFGPUCI---AF***","name":"29.Hvbat","fullname":"29.Hvbat/MRM/INSS","command":"MRM"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.9474091680565,58.9007367380092]},"properties":{"SIDC":"SFGPUCI----E***","name":"291.Inskomp","fullname":"291.Inskomp/29.Hvbat/MRM/INSS","command":"29.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.9123833108742,58.978425556121]},"properties":{"SIDC":"SFGPUCI----E***","name":"292.Inskomp","fullname":"292.Inskomp/29.Hvbat/MRM/INSS","command":"29.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[18.13004786866,59.00328613617]},"properties":{"SIDC":"SFGPUCI---AE***","name":"293.Bevkomp","fullname":"293.Bevkomp/29.Hvbat/MRM/INSS","command":"29.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[18.1466322493951,59.0055778253211]},"properties":{"SIDC":"SFGPUCIN---E***","name":"294.B&#229;tkomp","fullname":"294.B&#229;tkomp/29.Hvbat/MRM/INSS","command":"29.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.81232094932,59.0132052680749]},"properties":{"SIDC":"SFGPUCVF---C***","name":"295.Flyggrp","fullname":"295.Flyggrp/29.Hvbat/MRM/INSS","command":"29.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.9630401612886,58.9201421392025]},"properties":{"SIDC":"SFGPUUA----D***","name":"296.CBRN-plut","fullname":"296.CBRN-plut/29.Hvbat/MRM/INSS","command":"29.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.0912400648531,59.6752503667144]},"properties":{"SIDC":"SFGPUCIZ--AH***","name":"3.Brig","fullname":"3.Brig/INSS","command":"INSS"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[18.3757960465676,57.6593216201101]},"properties":{"SIDC":"SFGPUCI----F***","name":"32.Hvbat","fullname":"32.Hvbat/ROL/INSS","command":"ROL"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[14.5083138429234,58.5267401451999]},"properties":{"SIDC":"SFGPUCR----F***","name":"32.Undbat","fullname":"32.Undbat/INSS","command":"INSS"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[18.339848149358,57.6629965607029]},"properties":{"SIDC":"SFGPUCI----E***","name":"321.Bevkomp","fullname":"321.Bevkomp/32.Hvbat/MRM/INSS","command":"32.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[18.7849567501258,57.7144456428729]},"properties":{"SIDC":"SFGPUCI----E***","name":"322.Bevkomp","fullname":"322.Bevkomp/32.Hvbat/MRM/INSS","command":"32.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[18.8380782160119,57.6871504761097]},"properties":{"SIDC":"SFGPUCIN---D***","name":"323.B&#229;tplut","fullname":"323.B&#229;tplut/32.Hvbat/MRM/INSS","command":"32.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[18.3764345279372,57.680341585177]},"properties":{"SIDC":"SFGPUCI----E***","name":"324.Inskomp","fullname":"324.Inskomp/32.Hvbat/MRM/INSS","command":"32.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[18.3288080139839,57.6513690562457]},"properties":{"SIDC":"SFGPUCVF---C***","name":"325.Flyggrp","fullname":"325.Flyggrp/32.Hvbat/MRM/INSS","command":"32.Hvbat"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[12.9062389032177,56.6929160077324]},"properties":{"SIDC":"SFGPUCD----F***","name":"61.Lvbat","fullname":"61.Lvbat/INSS","command":"INSS"}}
,{"type":"Feature","geometry":{"type":"Point","coordinates":[12.8927072589139,56.6451408696477]},"properties":{"SIDC":"SFGPUCD----F***","name":"62.Lvbat","fullname":"62.Lvbat/INSS","command":"INSS"}}
]}

46
node_modules/milsymbol/examples/speed-canvas/index.html generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
node_modules/milsymbol/examples/speed-canvas/preview.png generated vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 305 KiB

3
node_modules/milsymbol/examples/speed-canvas/readme.md generated vendored Normal file
View File

@@ -0,0 +1,3 @@
## Canvas Speed Example
This shows the speed of milsymbol and contains one example for **Canvas rendering**. It will render 1000 symbols with or without text fields and display the time it takes for milsymbol to generate the symbols. The example will repeat every three seconds to simulate new input to the system, this will also show milsymbols capability to populate the symbol cache and improve speed for each iteration.

44
node_modules/milsymbol/examples/speed-svg/index.html generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
node_modules/milsymbol/examples/speed-svg/preview.png generated vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 245 KiB

3
node_modules/milsymbol/examples/speed-svg/readme.md generated vendored Normal file
View File

@@ -0,0 +1,3 @@
## SVG Speed Example
This shows the speed of milsymbol and contains one example for **SVG rendering**. It will render 1000 symbols with or without text fields and display the time it takes for milsymbol to generate the symbols. The example will repeat every three seconds to simulate new input to the system, this will also show milsymbols capability to populate the symbol cache and improve speed for each iteration.

248
node_modules/milsymbol/examples/style/index.html generated vendored Normal file
View File

@@ -0,0 +1,248 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="../../dist/milsymbol.js"></script>
</head>
<body>
<center>
Base symbol without any special style settings <br />
<script>
document.write(
new ms.Symbol("sfgpewrh--mt", {
size: 35,
quantity: 200,
staffComments: "for reinforcements".toUpperCase(),
additionalInformation: "added support for JJ".toUpperCase(),
type: "machine gun".toUpperCase(),
dtg: "30140000ZSEP97",
location: "0900000.0E570306.0N"
}).asSVG()
);
</script>
<br />
<br />
Unframed symobl (notice the moved mobility indicator) <br />
<script>
document.write(
new ms.Symbol(
"sfgpewrh--mt",
{
size: 35,
quantity: 200,
staffComments: "for reinforcements".toUpperCase(),
additionalInformation: "added support for JJ".toUpperCase(),
type: "machine gun".toUpperCase(),
dtg: "30140000ZSEP97",
location: "0900000.0E570306.0N"
},
{ frame: false }
).asSVG()
);
</script>
<br />
<br />
Unfilled symbol (color changes automatically when unfilled) <br />
<script>
document.write(
new ms.Symbol(
"sfgpewrh--mt",
{
size: 35,
quantity: 200,
staffComments: "for reinforcements".toUpperCase(),
additionalInformation: "added support for JJ".toUpperCase(),
type: "machine gun".toUpperCase(),
dtg: "30140000ZSEP97",
location: "0900000.0E570306.0N"
},
{ fill: false }
).asSVG()
);
</script>
<br />
<br />No info around symbol (information is set but not displayed) <br />
<script>
document.write(
new ms.Symbol(
"sfgpewrh--mt",
{
size: 35,
quantity: 200,
staffComments: "for reinforcements".toUpperCase(),
additionalInformation: "added support for JJ".toUpperCase(),
type: "machine gun".toUpperCase(),
dtg: "30140000ZSEP97",
location: "0900000.0E570306.0N"
},
{ infoFields: false }
).asSVG()
);
</script>
<br />
<br />Set built in color mode <br />
<script>
document.write(
new ms.Symbol(
"sfgpewrh--mt",
{
size: 35,
quantity: 200,
staffComments: "for reinforcements".toUpperCase(),
additionalInformation: "added support for JJ".toUpperCase(),
type: "machine gun".toUpperCase(),
dtg: "30140000ZSEP97",
location: "0900000.0E570306.0N"
},
{ colorMode: "Dark" }
).asSVG()
);
</script>
<br />
<br />Set custom color mode <br />
<script>
document.write(
new ms.Symbol(
"sfgpewrh--mt",
{
size: 35,
quantity: 200,
staffComments: "for reinforcements".toUpperCase(),
additionalInformation: "added support for JJ".toUpperCase(),
type: "machine gun".toUpperCase(),
dtg: "30140000ZSEP97",
location: "0900000.0E570306.0N"
},
{
colorMode: ms.ColorMode(
"purple",
"blue",
"red",
"green",
"yellow"
)
}
).asSVG()
);
</script>
<br />
<br />Fill opacity <br />
<script>
document.write(
new ms.Symbol(
"sfgpewrh--mt",
{
size: 35,
quantity: 200,
staffComments: "for reinforcements".toUpperCase(),
additionalInformation: "added support for JJ".toUpperCase(),
type: "machine gun".toUpperCase(),
dtg: "30140000ZSEP97",
location: "0900000.0E570306.0N"
},
{ fillOpacity: 0.5 }
).asSVG()
);
</script>
<br />
<br />Change info color <br />
<script>
document.write(
new ms.Symbol(
"sfgpewrh--mt",
{
size: 35,
quantity: 200,
staffComments: "for reinforcements".toUpperCase(),
additionalInformation: "added support for JJ".toUpperCase(),
type: "machine gun".toUpperCase(),
dtg: "30140000ZSEP97",
location: "0900000.0E570306.0N"
},
{ infoColor: "lightgray" }
).asSVG()
);
</script>
<br />
<br />Change info font <br />
<script>
document.write(
new ms.Symbol(
"sfgpewrh--mt",
{
size: 35,
quantity: 200,
staffComments: "for reinforcements".toUpperCase(),
additionalInformation: "added support for JJ".toUpperCase(),
type: "machine gun".toUpperCase(),
dtg: "30140000ZSEP97",
location: "0900000.0E570306.0N"
},
{ fontfamily: "times" }
).asSVG()
);
</script>
<br />
<br />Change info size <br />
<script>
document.write(
new ms.Symbol(
"sfgpewrh--mt",
{
size: 35,
quantity: 200,
staffComments: "for reinforcements".toUpperCase(),
additionalInformation: "added support for JJ".toUpperCase(),
type: "machine gun".toUpperCase(),
dtg: "30140000ZSEP97",
location: "0900000.0E570306.0N"
},
{ infoSize: 60 }
).asSVG()
);
</script>
<br />
<br />
Set symbol outline <br />
<script>
document.write(
new ms.Symbol(
"sfgpewrh--mt",
{
size: 35,
quantity: 200,
staffComments: "for reinforcements".toUpperCase(),
additionalInformation: "added support for JJ".toUpperCase(),
type: "machine gun".toUpperCase(),
dtg: "30140000ZSEP97",
location: "0900000.0E570306.0N"
},
{ outlineColor: "yellow", outlineWidth: 5 }
).asSVG()
);
</script>
<br />
<br />Set info background <br />
<script>
document.write(
new ms.Symbol(
"sfgpewrh--mt",
{
size: 35,
quantity: 200,
staffComments: "for reinforcements".toUpperCase(),
additionalInformation: "added support for JJ".toUpperCase(),
type: "machine gun".toUpperCase(),
dtg: "30140000ZSEP97",
location: "0900000.0E570306.0N"
},
{ infoBackground: "black", infoColor: "white" }
).asSVG()
);
</script>
<br />
<br />
</center>
</body>
</html>

BIN
node_modules/milsymbol/examples/style/preview.png generated vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

3
node_modules/milsymbol/examples/style/readme.md generated vendored Normal file
View File

@@ -0,0 +1,3 @@
## Style
This shows some, but not all, style options that can be set for a milsymbol symbol.