title: How to embed a plotly mapbox in flask app?
body: <p>I've been trying to embed a Plotly Mapbox in a web app developed in Flask.</p>
  <p>I'm generating the map as shown below, which works fine when I do it outside the app. I know I can embed a dash app in my flask app but I'm trying to avoid that. This is my full flask route where I generate the map:</p>
  <pre><code>@app.route('/stats')
  def stats():
      sujetos = Sujeto.query.all()
      headers = [
          'identificador',
          'usuario',
          'tiempo',
          'edad',
          'estatura',
          'cintura',
          'diabhist',
          'diag2006',
          'psis',
          'pdias',
          'gluc',
          'temp',
          'peso',
          'cadera',
          'icc',
          'imc',
          'territorial',
          'colonia',
          'genero'
      ]
      rows = []
      for sujeto in Sujeto.query.all():
          rows.append(
              {
                  'identificador': sujeto.curp,
                  'usuario': sujeto.user_id,
                  'tiempo': sujeto.timestamp,
                  'edad': sujeto.edad,
                  'estatura': sujeto.estatura,
                  'cintura': sujeto.cintura,
                  'diabhist': sujeto.diabHist,
                  'diag2006': sujeto.diag2006,
                  'psis': sujeto.psis,
                  'pdias': sujeto.pdias,
                  'gluc': sujeto.gluc,
                  'temp': sujeto.temp,
                  'peso': sujeto.peso,
                  'cadera': sujeto.cadera,
                  'icc': sujeto.icc,
                  'imc': sujeto.imc,
                  'territorial': sujeto.territorial,
                  'colonia': sujeto.colonia,
                  'genero': sujeto.genero
              }
          )
      df = pd.DataFrame(rows)
  
      lat = [19.368894, 19.378639, 19.356536,
             19.352141, 19.376943, 19.351838,
             19.377563, 19.340928, 19.319919,
             19.308241, 19.351663, 19.336423,
             19.350884]
  
      lon = [-99.005523, -99.107726, -99.101254,
             -99.041698, -99.058977, -99.091929,
             -99.071414, -99.061082, -99.119510,
             -99.066347, -99.010367, -99.050018,
             -98.996826]
  
      territoriales = ['ACATITLA-ZARAGOZA', 'ACULCO', 'ATLALILCO-AXOMULCO',
                       'AZTAHUACAN', 'CABEZA DE JUAREZ', 'ESTRELLA-HUIZACHEPETL',
                       'LEYES DE REFORMA', 'LOS ANGELES-AGRARISTA', 'LOS CULHUACANES',
                       'SAN LORENZO TEZONCO', 'SANTA CATARINA', 'SANTA CRUZ-QUETZALCOATL',
                       'TEOTONGO-ACAHUALTEPEC']
  
      dict_map = {'territorial': territoriales, 'lat': lat, 'lon': lon}
      df_alto = df.loc[df['diag2006'] == True]
      df_alto_terr = df_alto.groupby(['territorial']).count().reset_index()
      geopd = pd.DataFrame.from_dict(dict_map)
      geopd['Casos'] = df_alto_terr['identificador']
      #print(geopd.head())
  
      px.set_mapbox_access_token(
          'pk.eyJ1IjoiZ2ZlbGl4IiwiYSI6ImNrZTNsbnYzMTBraG0zMnFuZXNjOWZhdDgifQ.5sMKH7NQ6_oVyU4oJlcBUw')
      fig = px.scatter_mapbox(geopd, lat=&quot;lat&quot;, lon=&quot;lon&quot;, hover_name=&quot;territorial&quot;,
                              hover_data=[&quot;Casos&quot;], size=&quot;Casos&quot;, color=&quot;Casos&quot;,
                              zoom=11, width=500, height=300,
                              text=&quot;territorial&quot;, center={'lat': 19.340928, 'lon': -99.061082})
      fig.update_layout(mapbox_style='outdoors',
                        margin={&quot;r&quot;: 0, &quot;t&quot;: 0, &quot;l&quot;: 0, &quot;b&quot;: 0},
                        )
  
      div = fig.to_html(full_html=False)
  
      return render_template('stats.html', div_placeholder=div)
  </code></pre>
  <p>And here is my template (I know, very basic but I need the map to show up first!):</p>
  <pre><code>{% extends &quot;base.html&quot; %}
  {% import 'bootstrap/wtf.html' as wtf %}
  &lt;head&gt;
      &lt;script src=&quot;https://cdn.plot.ly/plotly-latest.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  ....some html...
  
  {{ div_placeholder }}
  
  ...more html...
  &lt;/body&gt;
  </code></pre>
  <p>I don't get an error message with this. The page simply shows the navbar and everything else is empty. Inspecting the source code in the browser, it seems the template is not getting the map div properly.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;
       DiabetesID
  &lt;/title&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;!-- Bootstrap --&gt;
      &lt;link href=&quot;//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;/head&gt;
    &lt;body&gt;
      
      &lt;nav class=&quot;navbar navbar-default&quot;&gt;
          &lt;div class=&quot;container&quot;&gt;
              &lt;div class=&quot;navbar-header&quot;&gt;
                  &lt;button type=&quot;button&quot; class=&quot;navbar-toggle collapsed&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#bs-example-navbar-collapse-1&quot; aria-expanded=&quot;false&quot;&gt;
                      &lt;span class=&quot;sr-only&quot;&gt;Toggle navigation&lt;/span&gt;
                      &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  
  
                  &lt;a class=&quot;navbar-brand&quot; rel=&quot;home&quot; href=&quot;/index&quot; title=&quot;DiabetesID&quot;&gt;
                      &lt;img style=&quot;max-width:150px; margin-top: -6px;&quot; src=&quot;static/img/logo_diabetesid_gray.png&quot;&gt;
      &lt;/a&gt;
  
              &lt;/div&gt;
              &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;bs-example-navbar-collapse-1&quot;&gt;
                  &lt;ul class=&quot;nav navbar-nav&quot;&gt;
                      
                      &lt;li&gt;&lt;a href=&quot;/reporte&quot;&gt;Generar reporte&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;/territorial&quot;&gt;Crear perfil&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;/medicion_hb&quot;&gt;Mediciones de laboratorio&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;/consultar_curp&quot;&gt;Consultar perfil&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;/about&quot;&gt;Acerca de&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;/logout&quot;&gt;Salir&lt;/a&gt;&lt;/li&gt;
                      
                  &lt;/ul&gt;
                  &lt;ul class=&quot;nav navbar-nav navbar-right&quot;&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  
      
      &lt;link rel=&quot;stylesheet&quot; href=&quot;/static/css/style.css&quot;&gt;
      &lt;link rel=&quot;manifest&quot; href=&quot;/static/manifest.json&quot;&gt;
      &lt;div class=&quot;container&quot;&gt;
          
          
          
  
          
          
      &lt;/div&gt;
  
  
  
      
      &lt;script src=&quot;//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>What am I missing? I'm only a beginner and not formally a programmer or developer, so any help understanding what am I doing wrong will be really appreciate.</p>