Implementing mapbox in Business Text

[yosiasz]

@mikhail-vl if you want to add it to docu

import("https://cdn.jsdelivr.net/npm/[email protected]/+esm").then(({ default: mapboxGl }) => {
  console.log('mapboxgl', mapboxGl)
  mapboxGl.accessToken = 'pk.eyJ1IjoieW9zaWFzeiIsImEiOiJjbHlpN2Z5em8wY2JoMmtwdGJrbjVtcDZ6In0.BbnHKs0rxyxrJrHAtleoBA';
  const map = new mapboxGl.Map({
    // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
    style: 'mapbox://styles/mapbox/light-v11',
    center: [-74.0066, 40.7135],
    zoom: 15.5,
    pitch: 45,
    bearing: -17.6,
    container: 'map',
    antialias: true
  });

  map.on('style.load', () => {
    // Insert the layer beneath any symbol layer.
    const layers = map.getStyle().layers;
    const labelLayerId = layers.find(
      (layer) => layer.type === 'symbol' && layer.layout['text-field']
    ).id;

    // The 'building' layer in the Mapbox Streets
    // vector tileset contains building height data
    // from OpenStreetMap.
    map.addLayer(
      {
        'id': 'add-3d-buildings',
        'source': 'composite',
        'source-layer': 'building',
        'filter': ['==', 'extrude', 'true'],
        'type': 'fill-extrusion',
        'minzoom': 15,
        'paint': {
          'fill-extrusion-color': '#aaa',

          // Use an 'interpolate' expression to
          // add a smooth transition effect to
          // the buildings as the user zooms in.
          'fill-extrusion-height': [
            'interpolate',
            ['linear'],
            ['zoom'],
            15,
            0,
            15.05,
            ['get', 'height']
          ],
          'fill-extrusion-base': [
            'interpolate',
            ['linear'],
            ['zoom'],
            15,
            0,
            15.05,
            ['get', 'min_height']
          ],
          'fill-extrusion-opacity': 0.6
        }
      },
      labelLayerId
    );
  });
})

based on
https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings/

[yosiasz]

[mikhail-vl]

@yosiasz Thank you, I will add it to the documentation.

Please send us more!

[mikhail-vl]

@yosiasz Why you decided to do it in the Business Charts instead of Business Text?

[yosiasz]

hey, actually I started in business chart because I was going to use one of the 3d globe geomap. no reason to use BC

…

On Sat, Jul 13, 2024, 5:21 AM Mikhail Volkov ***@***.***> wrote: @yosiasz <https://github.com/yosiasz> Why you decided to do it in the Business Charts instead of Business Text? — Reply to this email directly, view it on GitHub <#335>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAG36V2U7TAULJFW3COBPFLZMELTDAVCNFSM6AAAAABKYGQYKSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMRWHA4DEMJTGY> . You are receiving this because you were mentioned.Message ID: ***@***.***>