ComponentOne Maps for ASP.NET Web Forms
Features / Map Source / Add a Custom Source
In This Topic
    Add a Custom Source
    In This Topic

    Besides the three pre-defined types of Bing Maps, you can use a custom source for your map.  In order to use a custom source, you should set the Source property to CustomSource and define a javascript function to retrieve the tile sources. This topic demonstrates how to use Google maps as a custom source for your map.  

    In the Designer

    1. Click the smart tag to open the C1Maps Tasks Menu.
    2. Click the drop-down arrow next to the Source property and select CustomSource.
    3. Right click the control and select Properties from the context menu, to open the Properties window.
    4. Expand the CustomSource property group.
    5. Set the MaxZoom to 22, MinZoom to 1, TileWidth to 256, TileHeight to 256 and GetUrl to getUrl.

    Define the getUrl function in Source View, as shown below.

    In Source View

    1. Following will be the final markup for the C1Maps control, after changing the source of the map and setting the custom source properties.

      Source View
      Copy Code 
        <c1:C1Maps ID="C1Maps1" runat="server" Height="500px"
  Width="600px" Source="CustomSource">
      <CustomSource GetUrl="getUrl" MinZoom="1" MaxZoom="22"
  TileHeight="256" TileWidth="256"/>
</c1:C1Maps>

    2. Add the following script for the getUrl function, between the <head></head> tags, to retrieve Google maps tiles.

      Source View
      Copy Code 
      <script type="text/javascript">
     function getUrl(zoom, x, y) {
     var uriFormat =
     "http://mt{subdomain}.google.cn/vt/lyrs=r&hl=en-us&gl=cn&x={x}&y={y}&z={zoom}";
      var subdomains = ["0", "1", "2", "3"];
      var subdomain = subdomains[(y * Math.pow(2, zoom) + x) % subdomains.length];
      return uriFormat.replace("{subdomain}", subdomain).replace("{x}", x).
      replace("{y}", y).replace("{zoom}", zoom);
                   }
</script>

    In Code

    1. Add the following code to the Page_Load event, to change the source of the map and set custom source settings:
      C#
      Copy Code 
      C1Maps1.Source = C1.Web.Wijmo.Controls.
C1Maps.MapSource.CustomSource;
C1Maps1.CustomSource.MaxZoom = 22;
C1Maps1.CustomSource.MinZoom = 1;
C1Maps1.CustomSource.TileWidth = 256;
C1Maps1.CustomSource.TileHeight = 256;
C1Maps1.CustomSource.GetUrl = "getUrl";

      VB
      Copy Code 
      C1Maps1.Source = C1.Web.Wijmo.Controls.
C1Maps.MapSource.CustomSource
C1Maps1.CustomSource.MaxZoom = 22
C1Maps1.CustomSource.MinZoom = 1
C1Maps1.CustomSource.TileWidth = 256
C1Maps1.CustomSource.TileHeight = 256
C1Maps1.CustomSource.GetUrl = "getUrl"
    2. Run the project.

    What You've Accomplished

    The following image depicts a C1Maps control displaying Google map tiles.