<script id="scriptInit" type="text/javascript">
       $(document).ready(function () {
                $("#maps").wijmaps({
                    center: { x: 121.4, y: 31.2 },
                    zoom: 3,
                    targetZoom: 3
                });
                
                showVirtualLayer();
            });

        function showVirtualLayer() {
            $.ajax({
                url: "../Resources/factories.json",
                success: function (result) {
                    factoriesDataBase = result;
                    
                    $("#maps").wijmaps("option", {
                        layers: [
                            {
                                type: "items",
                                request: requestFactories
                            },
                            {
                                type: "items",
                                  request: requestOffices
                            }
                            ,
                            {
                                type: "items",
                                request: requestStores
                            }]
                    }).off(".layer");
                },
                dataType: "json"
            });
        }

        // items layer for factories
        function requestFactories(paper) {
            var result = { items: [] },
                factories = factoriesDataBase.factories,
                len = factories.length;

            for (var i = 0; i < len; i++) {
                var factory = factories[i];
            

                var item = {
                    location: { x: factory.longitude, y: factory.latitude },
                    size: { width: 60, height: 60 }, pinpoint: { x: 30, y: 30 }
                };

                paper.setStart();
                var img = paper.image("../images/livewidgets/factory.png", 0, 0, 60, 60);
                $(img.node).wijtooltip({ content: factory.name, position: { my: "left center", at: "right+30px top+30px" } });
                
                var set = paper.setFinish();
                set.data("name", factory.name);
                item.elements = set;

                result.items.push(item);
            }

           return result;

        }

        // items layer for offices
        function requestOffices(paper) {
            var result = { items: [] },
                offices = factoriesDataBase.offices,
                len = offices.length;
            
            for (var i = 0; i < len; i++) {
                var office = offices[i];

                var item = {
                    location: { x: office.longitude, y: office.latitude },
                    size: { width: 60, height: 60 }, pinpoint: { x: 30, y: 30 }
                };

                paper.setStart();
                var img = paper.image("../images/livewidgets/office.png", 0, 0, 60, 60);
                $(img.node).wijtooltip({ content: office.name, position: { my: "left center", at: "right+30px top+30px"} });
                
                paper.circle(50, 10, 10).attr("fill", "#222222");
                paper.text(50, 10, office.stores).attr("fill", "white");
                var set = paper.setFinish();
                item.elements = set;
                
                result.items.push(item);
            }

            return result;
        }

        // items layer for stores
        function requestStores(paper) {
            var result = { items: [] },
                stores = factoriesDataBase.stores,
                len = stores.length;
            
            for (var i = 0; i < len; i++) {
                var store = stores[i];                

                var item = {
                    location: { x: store.longitude, y: store.latitude },
                    size: { width: 60, height: 60 }, pinpoint: { x: 30, y: 30 }
                };
                
                paper.setStart();
                var img = paper.image("../images/livewidgets/store.png", 0, 0, 60, 60);
                $(img.node).wijtooltip({ content: store.name, position: { my: "left center", at: "right+30px top+30px" } });
                
            
                var set = paper.setFinish();
                item.elements = set;
                
                result.items.push(item);
            }

            return result;
        }
        
    </script>