Custom Source

Wijmaps provides you the ability to change the source by using custom source option.

By default, wijmaps display Bing Maps™ Aerial photographs, and you can change it to Road source or Hybrid source by using the source option. You can also set custom sources such as Google maps and Yahoo maps by using the customSource option.

For example, the script and the markup below set Google Maps as the custom map source. Select the Aerial, Road, Hybrid or Custom option from the dropdown at the bottom of the live widget to see the effect.

Live Widget
Script
Markup

Script	Copy Code
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijmaps"], function () { $(document).ready(function () { $("#maps").wijmaps({ }); }); }); var customMapsource = { tileWidth: 256, tileHeight: 256, minZoom: 1, maxZoom: 22, getUrl: function (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); } } function switchTileSource(source) { switch (source) { case "Road": $("#maps").wijmaps({ "source": "bingMapsRoadSource" }); break; case "Aerial": $("#maps").wijmaps({ "source": "bingMapsAerialSource" }); break; case "Hybrid": $("#maps").wijmaps({ "source": "bingMapsHybridSource" }); break; case "Custom": $("#maps").wijmaps({ "source": customMapsource }); break; } } </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijmaps"], function () {
        $(document).ready(function () {
            $("#maps").wijmaps({

            });
        });
    });
    
    var customMapsource = {
        tileWidth: 256,
        tileHeight: 256,
        minZoom: 1,
        maxZoom: 22,
        getUrl: function (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);
        }
    }

    function switchTileSource(source) {
        switch (source) {
            case "Road":
                $("#maps").wijmaps({ "source": "bingMapsRoadSource" });
                break;
            case "Aerial":
                $("#maps").wijmaps({ "source": "bingMapsAerialSource" });
                break;
            case "Hybrid":
                $("#maps").wijmaps({ "source": "bingMapsHybridSource" });
                break;
            case "Custom":
                $("#maps").wijmaps({ "source": customMapsource });
                break;
        }
    }
</script>

Markup	Copy Code
<div id="maps" style="width:600px; height: 400px;"></div> <label>MapSource:</label> <select onchange="switchTileSource(this.value)"> <option>Aerial</option> <option>Road</option> <option>Hybrid</option> <option>Custom</option> </select>

Markup

Copy Code

<div id="maps" style="width:600px; height: 400px;"></div>

                <label>MapSource:</label>
                 <select onchange="switchTileSource(this.value)">
                    <option>Aerial</option>
                    <option>Road</option>
                    <option>Hybrid</option>
                    <option>Custom</option>
                </select>

Reference

wijmaps API