Update samples to work with both number and letter sidc

spatialillusions · Aug 21, 2017 · bce78ab · bce78ab
1 parent db56511
commit bce78ab
Show file tree

Hide file tree

Showing 3 changed files with 141 additions and 96 deletions.
diff --git a/examples/leaflet-divicons/index.html b/examples/leaflet-divicons/index.html
@@ -2,55 +2,70 @@
 <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="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
-    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
-    <script src="../../dist//milsymbol.js"></script>
-    <script src="../situation.json"></script>
+  <meta charset="UTF-8" />
+  <style type="text/css">
+    html,
+    body,
+    .mymap {
+      padding: 0;
+      margin: 0;
+      height: 100%;
+      width: 100%;
+    }
+  </style>
+  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
+  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/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 = { "C": 15, "D": 20, "E": 25, "F": 30, "G": 35, "H": 40, "I": 45 };
-
-            L.geoJson(situation, {
-                pointToLayer: function (feature, latlng) {
-
-                    var mysymbol = new ms.Symbol(
-                        feature.properties.SIDC, {
-                            size: iconSize[(feature.properties.SIDC).charAt(11)],
-                            uniqueDesignation: feature.properties.name
-                        })
-
-                    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>
+    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) {
 
-    </script>
-    <div id="map" class="mymap"></div>
+          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.getProperties().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>
+</html>
diff --git a/examples/leaflet-imageicons/index.html b/examples/leaflet-imageicons/index.html
@@ -2,57 +2,72 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8" />
-    <style type="text/css">
-        html,
-        body,
-        .mymap {
-            padding: 0;
-            margin: 0;
-            height: 100%;
-            width: 100%;
-        }
-    </style>
+  <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/[email protected]/dist/leaflet.css" />
-    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
-    <script src="../../dist//milsymbol.js"></script>
-    <script src="../situation.json"></script>
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+  <script src="https://unpkg.com/[email protected]/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 = { "C": 15, "D": 20, "E": 25, "F": 30, "G": 35, "H": 40, "I": 45 };
-
-            L.geoJson(situation, {
-                pointToLayer: function (feature, latlng) {
-
-                    var mysymbol = new ms.Symbol(
-                        feature.properties.SIDC, {
-                            size: iconSize[(feature.properties.SIDC).charAt(11)],
-                            uniqueDesignation: feature.properties.name
-                        })
-
-                    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>
+    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) {
 
-    </script>
+          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.getProperties().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>
+  <div id="map" class="mymap"></div>
 
 </body>
 
-</html>
+</html>
diff --git a/examples/openlayers3/index.html b/examples/openlayers3/index.html
@@ -23,7 +23,22 @@
 <body onload="init()">
   <script>
     function init() {
-      var iconSize = { "C": 15, "D": 20, "E": 25, "F": 30, "G": 35, "H": 40, "I": 45 };
+      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' })
       });
@@ -32,10 +47,11 @@
       vectorSource.forEachFeature(function (f) {
         var mysymbol = new ms.Symbol(
           f.getProperties().SIDC, {
-            size: iconSize[(f.getProperties().SIDC).charAt(11)] * ratio,
             uniqueDesignation: f.getProperties().name
           });
-        var mycanvas = mysymbol.asCanvas();
+
+        // Now that we have a symbol we can ask for the echelon and set the symbol size
+        var mycanvas = mysymbol.setOptions({ size: iconSize[mysymbol.getProperties().echelon] * ratio }).asCanvas();
 
         f.setStyle(new ol.style.Style({
           image: new ol.style.Icon(({
@@ -67,9 +83,8 @@
       });
 
     }
-
   </script>
   <div id="map" class="mymap"></div>
 </body>
 
-</html>
+</html>