Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="demo of PR #5406 for maplibre-gl">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Maplibre globe padding bug fix demo </title>
  <script src='https://content.partymap.com/maplibre_demo/dist/maplibre-gl.js'></script>
<link href='https://content.partymap.com/maplibre_demo/dist/maplibre-gl.css' rel='stylesheet' />
</head>
<body>
<div id='map' style='width: 400px; height: 300px;'></div>
  <button onClick="zoom0()">zoom level 0</button>
  <button onClick="zoom1()">zoom level 1</button>
  <br/>
   <button onClick="flyTopadding1()">fly to padding variant 1</button>
  <button onClick="flyTopadding2()">fly to padding variant 2</button>
    <br/>
  <br/>
​
  <button onClick="addCenterMarker()">add center marker</button>
<script>
  var map
  const position1 = [-44.5, 10]
  const position2 = [-120.5, 80]
  const center = []
  fetch('https://demotiles.maplibre.org/style.json')
    .then(response => response.json())
    .then(data => {
      map = new maplibregl.Map({
    container: 'map',
    style: {...data, projection: {type: 'globe'}}, // stylesheet location
    center: [-74.5, 40], // starting position [lng, lat]
    zoom: 0, // starting zoom
    showPadding: true,
    projection: { type: 'globe' }
    });
    const marker1 = new maplibregl.Marker()
    .setLngLat(position1)
    .addTo(map);
    const marker2 = new maplibregl.Marker()
    .setLngLat(position2)
    .addTo(map);
  })
​
  const zoom0 = () => {
    map.setZoom(0)
  }
  const zoom1 = () => {
    map.setZoom(1)
  }
  
  const flyTopadding1 = () => {
    map.flyTo({ center: position1, padding: {left: 200, right: 0, top: 0, bottom: 0 }})
  }
​
  const flyTopadding2 = () => {
    map.flyTo({center: position2,padding: {left: 0, right: 0, top: 200, bottom: 0 }})
  }
  const addCenterMarker = () => {
    new maplibregl.Marker()
    .setLngLat(map.getCenter())
    .addTo(map);
  }
​
</script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
pjamesstevenpro
0viewers