Javascript Scattermapbox Adding Text On Markers Issue

plotly.js
1

Hi, I am trying to add text on markers by using Plotly Js. However, I can not display the text on markers. I can see it by hovering on markers. Is there anyone that knows how to handle this? I am adding the code.

 var geoJSON = "{% static 'data/mergedfile.json' %}" // data

            var markerPoints = {{map_view_data|safe}} // marker data from backend
            
            var data = [{
              type: "choroplethmapbox", 
              locations: [], 
              featureidkey:'properties.COUNTRY',
              z: [],
              geojson: geoJSON,
              showscale:false,
              autocolorscale:false,
              colorscale:[[0, 'rgb(1,49,125)'], [1, 'rgb(1,49,125)']],
              marker:{opacity:0.8},
              name:'',
              hovertemplate:'',
            }]; // choroplethmapbox chart
        
        
            var generateMarkerPointData = function (plotlyData, markerPoint) {
                    /*
                     * generate a data structure to show marker point on the map and add the generated data structure to plotly data list
                    */

                    // push the first marker
                    plotlyData.push({
                        type: "scattermapbox",
                        lon: [markerPoint.latLng[1]], lat: [markerPoint.latLng[0]],
                        marker: { size: 20, color: markerPoint.color },
                        showlegend: false,
                        customdata: [markerPoint],
                        name: '',
                        hovertemplate: '',
                        mode: 'markers+text',
                        text: markerPoint.employee_count,
                        hoverinfo: "all",
                        //hovertext:markerPoint.employee_count,
                        texttemplate:'%{z}',
                        textposition:'top center'
                    })

                    // push the second marker for highlighting
                    plotlyData.push({
                        type: "scattermapbox",
                        lon: [markerPoint.latLng[1]], lat: [markerPoint.latLng[0]],
                        marker: { size: 33, color: markerPoint.color, opacity: 0.4 },
                        showlegend: false,
                        customdata: [markerPoint],
                        name: '',
                        hovertemplate: '',
                        mode: 'markers+text',
                        text: markerPoint.employee_count,
                        hoverinfo: "all",
                        //hovertext:markerPoint.employee_count,
                        texttemplate:'%{z}',
                        textposition:'top center'
                    })
                }
        
        
            markerPoints.forEach(x => generateMarkerPointData(data,x))
            
                var layout = { 
                    mapbox: { center: { lat: markerPoints[0].latLng[0], lon: markerPoints[0].latLng[1] }, zoom: 14, style: 'stamen-terrain' },
                    margin: { r: 0, t: 0, l: 0, b: 0, autoexpand: false } };

                var config = {};
            
            var myPlot = document.getElementById('project-detail-puantaj-map-view-map');
            
            Plotly.newPlot(myPlot, data, layout, config); // draw chart on html
2

I have not used the js version directly, but here is the combination of options that works for me via plotly graph objects (go.scattermapbox) in python DASH, version dash 2.10.2 and plotly 5.14.1

To display only text labels:

  • mode=‘markers+text’
  • text=df[‘textlabel’] # (or test with a static string)
  • hoverinfo=‘skip’ # this disables the hover popup
  • marker=go.scattermapbox.Marker( allowoverlap=True) # it can work without this, but its a bit finicky. I also find not all labels show even when allowoverlap=True

it also helps to add

  • textfont = dict(…) # a dict of formatting
  • textposition=‘bottom right’ # see doco for options

do NOT set

  • hovertext
  • hoverlabel
  • name
  • hovertemplate
  • cluster enabled=True # in the version I am using, clustering removes all text labels at all zoom levels :frowning:

To display only hover labels:

  • hoverinfo=‘text’
  • customdata=df[‘link’] # this enables setting a link in the hover ie the contents of %{customdata} below
  • hovertext=df[‘hovertext’] # this sets contents of %{hovertext} below
  • hovertemplate=“%{hovertext}
    Click here”, # this controls the format of the popup
  • hoverlabel=dict(…) # dict of formatting options
  • name=‘’ # setting to ‘’ disables the odd side part of the hover with ‘trace=0’ etc
  • cluster can be enabled or not (hovers only show on unclustered points)

Note: I have managed to get BOTH text and hover labels appearing at the same time, but there are definitely some incompatible options (eg clustering).

From your code above, I cannot see any particular reason why the text is not showing, but my suggestion is to

  • try the ‘text only’ options above.
  • if that works, and you also wish to have hover labels, slowly add the hover options in one-by-one to see which is causing the text labels to disappear

Hope that helps.