91 lines
2.5 KiB
HTML
91 lines
2.5 KiB
HTML
<!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>
|