Grafana Geomap Projection for

ttran01 · July 11, 2024, 5:04pm

Hi,

When using Geomap, is there a way to change the projection of the view? Instead of seeing 2D view, I want to see a 3D view of my basemap? I am using Mapbox for my basemap and I want to be able to control my basemap view by using my mouse.

ttran01 · July 12, 2024, 4:59pm

Yes I guess this some what. How did you adjust the view angle? Is there a way to change the view angle by using the mouse/keyboard?

yosiasz · July 12, 2024, 9:10pm

you can any use mouse, pen, touch screen whatever to pan zoom in zoom out

ttran01 · July 12, 2024, 9:24pm

Could you provide steps how to do this? I emailed Grafana support they said there isnt a way to do it. So im glad you have figured a way.

Also on mapbox map, did you use the url method from mapbox studio or a different way? Because i didnt see mapbox as a plugin for Grafana.

yosiasz · July 12, 2024, 9:47pm

this is the plugin I used. read up the doc and should guide you to end goal

ttran01 · July 15, 2024, 4:28pm

Hi,

I am new at this. I have installed the business Chart plugin. I assume that under JSON, I have to paste my mapbox code from the style.json under the Code dropdown menu? I tried doing that, but I am getting an ECharts Execution Error Unexpected token ‘:’. Any help with this error?

yosiasz · July 16, 2024, 5:05pm

github.com/VolkovLabs/volkovlabs-dynamictext-panel

Implementing mapbox in Business Text

opened 04:52AM - 12 Jul 24 UTC

yosiasz

question

@mikhail-vl if you want to add it to docu ``` import("https://cdn.jsdelivr.…net/npm/mapbox-gl@3.5.1/+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/ ![image](https://github.com/user-attachments/assets/dad2ddd9-a862-481c-829b-d755f2749519)

Check this thread out