Render world copies
Toggle between rendering a single world and multiple copies of the world using setRenderWorldCopies
. If true
, multiple copies of the world will be rendered side by side beyond -180 and 180 degrees longitude.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Render world copies</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.js"></script><link href="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.css" rel="stylesheet" /><style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; }</style></head><body><style>#menu {position: absolute;background: #fff;padding: 10px;font-family: 'Open Sans', sans-serif;}</style> <div id="map"></div><div id="menu"><div>Set <code>renderWorldCopies</code> to:</div><div><input type="radio" id="true" name="rtoggle" value="true" checked /><label for="true">true</label></div><div><input type="radio" id="false" name="rtoggle" value="false" /><label for="false">false</label></div></div> <script>goongjs.accessToken = '8qzxZAuxcsctSlmOszInchP1A5GrmRBHJwCBCjO6';var map = new goongjs.Map({container: 'map', // container idstyle: 'https://tiles.goong.io/assets/goong_map_web.json', // stylesheet locationcenter: [179, 0], // starting position [lng, lat]zoom: 0.01 // starting zoom}); var renderOptions = document.getElementById('menu');var inputs = renderOptions.getElementsByTagName('input'); function switchRenderOption(option) {var status = option.target.id;map.setRenderWorldCopies(status === 'true');} for (var i = 0; i < inputs.length; i++) {inputs[i].onclick = switchRenderOption;}</script> </body></html>