Add Virtual Layers | ComponentOne Maps for ASP.NET Web Forms

Add Virtual Layers

In This Topic

In this topic, we demonstrate how to add and implement virtual layers using C1VirtualLayer.

This topic uses functions from the following javascript file to load data into the layers.

Source View	Copy Code
<script type="text/javascript"> var factoriesDataBase, minStoreZoom = 2, storeSlices = Math.floor(Math.pow(2, minStoreZoom)); function loadFactoriesDataBase() { $.ajax({ url: "Resources/factories.json", data: null, context: null, success: function (result) { factoriesDataBase = result; minStoreZoom = 5; storeSlices = Math.floor(Math.pow(2, minStoreZoom)); }, error: null, dataType: "json", async: false }); } function requestFactories(paper, zoom, maxZoom, lowerLeft, upperRight) { if (!factoriesDataBase) { loadFactoriesDataBase(); } var result = { items: [] }, factories = factoriesDataBase.factories, len = factories.length; for (var i = 0; i < len; i++) { var factory = factories[i]; if (factory.longitude <= lowerLeft.x \|\| factory.longitude > upperRight.x \|\| factory.latitude <= lowerLeft.y \|\| factory.latitude > upperRight.y) { continue; } 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("Resources/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; } function requestOffices(paper) { if (!factoriesDataBase) { loadFactoriesDataBase(); } 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("Resources/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; } function requestStores(paper, minZoom, maxZoom, lowerLeft, upperRight) { if (!factoriesDataBase) { loadFactoriesDataBase(); } if (minZoom < minStoreZoom) return null; var result = { items: [] }, stores = factoriesDataBase.stores, len = stores.length; for (var i = 0; i < len; i++) { var store = stores[i]; if (store.longitude <= lowerLeft.x \|\| store.longitude > upperRight.x \|\| store.latitude <= lowerLeft.y \|\| store.latitude > upperRight.y) { continue; } 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("Resources/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>

Source View

Copy Code

<script type="text/javascript">
    var factoriesDataBase,
        minStoreZoom = 2,
        storeSlices = Math.floor(Math.pow(2, minStoreZoom));

    function loadFactoriesDataBase() {
        $.ajax({
            url: "Resources/factories.json",
            data: null,
            context: null,
            success: function (result) {
                factoriesDataBase = result;
                minStoreZoom = 5;
                storeSlices = Math.floor(Math.pow(2, minStoreZoom));
            },
            error: null,
            dataType: "json",
            async: false
        });
    }

    function requestFactories(paper, zoom,
        maxZoom, lowerLeft, upperRight) {
        if (!factoriesDataBase) {
            loadFactoriesDataBase();
        }

        var result = { items: [] },
            factories = factoriesDataBase.factories,
            len = factories.length;
        for (var i = 0; i < len; i++) {
            var factory = factories[i];
            if (factory.longitude <= lowerLeft.x ||
                factory.longitude > upperRight.x ||
                factory.latitude <= lowerLeft.y ||
                factory.latitude > upperRight.y) {
                continue;
            }

            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("Resources/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;
    }

    function requestOffices(paper) {
        if (!factoriesDataBase) {
            loadFactoriesDataBase();
        }

        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("Resources/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;
    }

    function requestStores(paper, minZoom, maxZoom, lowerLeft, upperRight) {
        if (!factoriesDataBase) {
            loadFactoriesDataBase();
        }

        if (minZoom < minStoreZoom)
            return null;

        var result = { items: [] },
            stores = factoriesDataBase.stores,
            len = stores.length;

        for (var i = 0; i < len; i++) {
            var store = stores[i];
            if (store.longitude <= lowerLeft.x ||
                store.longitude > upperRight.x ||
                store.latitude <= lowerLeft.y ||
                store.latitude > upperRight.y) {
                continue;
            }

            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("Resources/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>

The above script uses a factories.json file that contains information about the latitude, longitude, name and capacity of factories and three images to display factories, stores and offices on the map and jquery.wijmo.wijtooltip.min.js file, that are stored in the Resources folder within the project:

In the Designer

Add a C1Maps control onto the Web Form.
Right click the control and select Properties from the context menu, to open the Properties window.
Click the ellipsis button (...) next to Layers property to open the C1Layers Collection Editor.
Click the drop-down arrow on the Add button and select C1VirtualLayer. A C1VectorLayer is added to the Layers collection and its properties are displayed on the right side of the C1Layers Collection Editor.
Similarly, add another VirtualLayer.
Select the first VirtualLayer and complete the following steps:
1. Set the Request property to requestFactories.
2. Click the ellipsis button (...) next to Slices property to open the MapSlice Collection Editor.
3. Click the Add button to add a slice and set its LatitudeSlices property to 1, LongitudeSlices property to 1 and Zoom property to 0.
4. Click OK to close the MapSlice Collection Editor.
Select the second VirtualLayer and complete the following steps:
1. Set the Request property to requestStores.
2. Click the ellipsis button (...) next to Slices property to open the MapSlice Collection Editor
3. Click the Add button to add a slice and set its LatitudeSlices property to 1, LongitudeSlices property to 1 and Zoom property to 1.Click the
4. Add button to add another slice and set its LatitudeSlices property to 1024, LongitudeSlices property to 1024 and Zoom property to 5.
5. Click OK to close the MapSlice Collection Editor.
Click OK to close the C1Layer Collection Editor.
Press F5 to run the project.

In Source View

Add the following markup between the <c1:C1Maps> </c1:C1Maps> tags to add virtual layers over the C1Maps control:

Source View	Copy Code
<Layers> <c1:C1VirtualLayer Request="requestFactories"> <Slices> <c1:MapSlice LatitudeSlices="1" LongitudeSlices="1" Zoom="0" /> </Slices> </c1:C1VirtualLayer> <c1:C1VirtualLayer Request="requestStores"> <Slices> <c1:MapSlice LatitudeSlices="1" LongitudeSlices="1" Zoom="1" /> <c1:MapSlice LatitudeSlices="1024" LongitudeSlices="1024" Zoom="5" /> </Slices> </c1:C1VirtualLayer> </Layers>

Source View

Copy Code

<Layers>
    <c1:C1VirtualLayer Request="requestFactories">
        <Slices>
            <c1:MapSlice LatitudeSlices="1" LongitudeSlices="1" Zoom="0" />
        </Slices>
    </c1:C1VirtualLayer>
    <c1:C1VirtualLayer Request="requestStores">
        <Slices>
            <c1:MapSlice LatitudeSlices="1" LongitudeSlices="1" Zoom="1" />
            <c1:MapSlice LatitudeSlices="1024" LongitudeSlices="1024" Zoom="5" />
        </Slices>
    </c1:C1VirtualLayer>
</Layers>

In Code

Add the following code to the Page_Load event, to add virtual layers over the C1Maps control:

C#	Copy Code
// create and add virtual layer 1 C1VirtualLayer vl1 = new C1VirtualLayer(); vl1.Request = "requestFactories"; C1Maps1.Layers.Add(vl1); MapSlice s1 = new MapSlice(); s1.LatitudeSlices = 1; s1.LatitudeSlices = 1; s1.Zoom = 0; vl1.Slices.Add(s1); // create and add virtual layer 2 C1VirtualLayer vl2 = new C1VirtualLayer(); vl1.Request = "requestStores"; C1Maps1.Layers.Add(vl2); MapSlice s2 = new MapSlice(); s2.LatitudeSlices = 1; s2.LatitudeSlices = 1; s2.Zoom = 1; vl2.Slices.Add(s2); MapSlice s3 = new MapSlice(); s3.LatitudeSlices = 1024; s3.LatitudeSlices = 1024; s3.Zoom = 5; vl2.Slices.Add(s3);

Copy Code

// create and add virtual layer 1
C1VirtualLayer vl1 = new C1VirtualLayer();
vl1.Request = "requestFactories";
C1Maps1.Layers.Add(vl1);
MapSlice s1 = new MapSlice();
s1.LatitudeSlices = 1;
s1.LatitudeSlices = 1;
s1.Zoom = 0;
vl1.Slices.Add(s1);

// create and add virtual layer 2
C1VirtualLayer vl2 = new C1VirtualLayer();
vl1.Request = "requestStores";
C1Maps1.Layers.Add(vl2);
MapSlice s2 = new MapSlice();
s2.LatitudeSlices = 1;
s2.LatitudeSlices = 1;
s2.Zoom = 1;
vl2.Slices.Add(s2);
MapSlice s3 = new MapSlice();
s3.LatitudeSlices = 1024;
s3.LatitudeSlices = 1024;
s3.Zoom = 5;
vl2.Slices.Add(s3);

Visual Basic	Copy Code
' create and add virtual layer 1 Dim vl1 As New C1VirtualLayer() vl1.Request = "requestFactories" C1Maps1.Layers.Add(vl1) Dim s1 As New MapSlice() s1.LatitudeSlices = 1 s1.LatitudeSlices = 1 s1.Zoom = 0 ' create and add virtual layer 2 Dim vl2 As New C1VirtualLayer() vl1.Request = "requestStores" C1Maps1.Layers.Add(vl2) Dim s2 As New MapSlice() s2.LatitudeSlices = 1 s2.LatitudeSlices = 1 s2.Zoom = 1 vl2.Slices.Add(s2) Dim s3 As New MapSlice() s3.LatitudeSlices = 1024 s3.LatitudeSlices = 1024 s3.Zoom = 5 vl2.Slices.Add(s3)

Visual Basic

Copy Code

' create and add virtual layer 1
Dim vl1 As New C1VirtualLayer()
vl1.Request = "requestFactories"
C1Maps1.Layers.Add(vl1)
Dim s1 As New MapSlice()
s1.LatitudeSlices = 1
s1.LatitudeSlices = 1
s1.Zoom = 0

' create and add virtual layer 2
Dim vl2 As New C1VirtualLayer()
vl1.Request = "requestStores"
C1Maps1.Layers.Add(vl2)
Dim s2 As New MapSlice()
s2.LatitudeSlices = 1
s2.LatitudeSlices = 1
s2.Zoom = 1
vl2.Slices.Add(s2)
Dim s3 As New MapSlice()
s3.LatitudeSlices = 1024
s3.LatitudeSlices = 1024
s3.Zoom = 5
vl2.Slices.Add(s3)

Run the project.

What You've Accomplished

The following image depicts a C1Maps control displaying factories at zoom level 2.

The following image depicts a C1Maps control displaying all the stores after you zoom in to level 5 or above.