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 charset="utf-8" />
  <title>Add multiple geometries from one GeoJSON source</title>
  <script src='https://unpkg.com/maplibre-gl@5.0.0-pre.2/dist/maplibre-gl.js'></script>
  <link href='https://unpkg.com/maplibre-gl@5.0.0-pre.2/dist/maplibre-gl.css' rel='stylesheet' />
  <style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    fetch("https://demotiles.maplibre.org/style.json")
      .then(response => response.json())
      .then(fetchedStyle => {
        fetchedStyle["projection"] = { "type": "globe" };
        const layerToHide = fetchedStyle.layers.find(layer => layer.id === 'countries-label');
        if (layerToHide) {
          layerToHide.layout = layerToHide.layout || {};
          layerToHide.layout.visibility = 'none';  // Hide the layer
        }
        var map = new maplibregl.Map({
          container: 'map',
          style: fetchedStyle,
          center: [0.0, 0.0],
          zoom: 3.0
        });
​
        map.on('load', function () {
          map.addSource('labels', {
            'type': 'geojson',
            "data": "https://zerda.de/labels_small.geojson"
          });
​
          map.addLayer({
            'id': 'labels',
            'type': 'symbol',
            'source': 'labels',
            "layout": {
              "text-field": "{name}",
              "text-size": 12,
              "text-letter-spacing": 1,
              "text-justify": "center",
              "text-pitch-alignment": "viewport",
              "symbol-placement": "line-center",
              "visibility": "visible"
            },
            "paint": {
              "text-color": "rgba(0, 0, 0, 1)"
            }
          });
          
          map.addLayer({
            'id': 'labels-line',
            'type': 'line',
            'source': 'labels',
            "layout": {
              "visibility": "visible"
            },
            "paint": {
              "line-color": "rgba(0, 255, 0, 0.5)",
              "line-width": 3
            }
          });
        });
      });
  </script>
</body>
</html>
​
Output

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

Dismiss x
public
Bin info
zerda-ocmpro
0viewers