Reworked overlay itself and doctest.

lib/pixi/maps/overlay.html

@@ -17,6 +17,8 @@
     <script src="../../../dist/iwmlib.js"></script>
     <script src="../../../dist/iwmlib.pixi.js"></script>
 
+    <link rel="shortcut icon" type="image/x-icon" href="../../../assets/icons/map.png">
+
 
     <style>
         .inline-showcase {
@@ -109,17 +111,22 @@
 
         let exampleOverlayJSON = {
             icon: '../../../assets/icons/place.png',
-            iconColor: '0x000000',
+            iconColor: "0x35aaea",
             iconAnchor: { x: 0.5, y: 1 },
+            size: 5,
             scale: 0.2,
-            color: '0xFF00FF',
-            fillAlpha: 0,
+            disabledColor: 0x000000,
+            disabledIconColor: 0xCCCCCC,
+            disabledScale: 0.5,
+            color: '0x3FA7EE',
             items: [
                 {
-                    name: 'Abidjan',
+                    name: 'Custom Icon',
                     fontWeight: "bold",
-                    icon: '../../../assets/icons//beenhere.png',
+                    icon: '../../../assets/icons/beenhere.png',
                     iconColor: 0x00ff00,
+                    iconAlpha: 0.5,
+                    size: 0,
                     labelVerticalAlignment: "underneath",
                     label: 'Abidjan',
                     location: {
@@ -127,17 +134,19 @@
                         y: -4.006472
                     },
                     information:
-                        '... der größte städtische Ballungsraum der Elfenbeinküste.'
+                        'Here a custom icon is used. It overrides the icon setting in the global section.'
                 },
                 {
                     name: 'Berlin',
-
+                    label: "enabled",
+                    disabledLabel: "disabled",
                     location: {
                         x: 52.52543,
                         y: 13.385291
                     },
                     information:
-                        '... ist die Bundeshauptstadt der Bundesrepublik Deutschland.'
+                        '... ist die Bundeshauptstadt der Bundesrepublik Deutschland.',
+                    enabled: false
                 },
                 {
                     name: 'Canberra',
@@ -157,7 +166,7 @@
                         y: 18.416962
                     },
                     information:
-                        '... ist eine Hafenstadt an der Südwestküste Südafrikas auf einer Halbinsel, die vom beeindruckenden Tafelberg dominiert wird.'
+                        `This item adjusts it's size according to the map.`
                 },
                 {
                     name: 'Moskau',
@@ -191,7 +200,8 @@
                 },
                 {
                     name: 'Tokio',
-
+                    type: "factory",
+                    label: "factory",
                     location: {
                         x: 35.696278,
                         y: 139.731366
@@ -221,6 +231,7 @@
 
         function texturesLoaded(textures) {
 
+
             /** When all textures are loaded .... */
             setupMap(textures)
 
@@ -232,6 +243,27 @@
             let cleaner = null
             const vanishingTime = 1000
 
+            // Factories must return a geographics object.
+            Overlay.createFactory("factory", (item) => {
+
+                // This is applied to every item in the overlay that has 
+                // the type factory'
+
+
+                let geographics = new GeoPoint(item.location)
+
+                geographics.drawHandler.add((graphics) => {
+                    graphics.beginFill(item.color, item.fillAlpha)
+                    graphics.drawRect(0, 0, 10, 10)
+                })
+
+                let text = new PIXI.Text(item.name, {fontSize: 5})
+                geographics.graphics.addChild(text)
+
+
+                return geographics
+            })
+
             /**
              * 
              * The actual PIXI elements are created when the overlay.create() is called.