Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
68 lines (55 sloc) 2.94 KB
<!DOCTYPE html>
<html lang="en">
<title>Render world copies - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="This sample shows how to the renderWolrdCopies map style option changes the layout of the map when zoomed out." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, map, worldwrap, map options" />
<meta name="author" content="Microsoft Azure Maps" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="" type="text/css" />
<script src=""></script>
<script type='text/javascript'>
var map;
function GetMap() {
//Point the Azure Maps domain to the US Azure Gov Cloud domain.
//Initialize a map instance.
map = new atlas.Map('myMap', {
renderWorldCopies: true,
view: 'Auto',
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
//Add some data to the map so that we can see how the rendering of data also changes.'ready', function () {
datasource = new atlas.source.DataSource();
map.layers.add(new atlas.layer.BubbleLayer(datasource));
datasource.add(new[0, 0]));
function toggleRenderWorldCopies() {
var styleOptions = map.getStyle();
renderWorldCopies: !styleOptions.renderWorldCopies
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<input type="button" value="Toggle Render World Copies" onclick="toggleRenderWorldCopies()" style="position:absolute;top:10px;left:10px;"/>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend><h1 style="font-size:16px">Render world copies</h1></legend>
This sample shows how to the renderWolrdCopies map style option changes the layout of the map when zoomed out. When zoomed out, by default,
if there is a lot of horizontal space, copies of the map view will be displayed.
Setting the renderWorldCopies map style option to false makes it so only one copy is displayed.
You can’t perform that action at this time.