title: How do I use express to render geojson?
body: <p>I am trying to use express .render() to add geojson to a vega-lite visualization in an ejs file, but I keep receiving this error message in my browser:</p>
  <pre><code>ReferenceError: /Users/karoline/Desktop/Afleveres/index.ejs:132
      130|         &quot;layer&quot;: [{
      131|             &quot;data&quot;: {
   &gt;&gt; 132|                 &quot;values&quot;: &lt;%- geoVisData %&gt;,
      133|                 &quot;format&quot;: {
      134|                     &quot;type&quot;: &quot;topojson&quot;,
      135|                     &quot;feature&quot;: &quot;geometry&quot;
  
  geoVisData is not defined
      at eval (eval at compile (/Users/karolineschafer/node_modules/ejs/lib/ejs.js:662:12), &lt;anonymous&gt;:10:17)
      at index (/Users/karoline/node_modules/ejs/lib/ejs.js:692:17)
      at tryHandleCache (/Users/karoline/node_modules/ejs/lib/ejs.js:272:36)
      at View.exports.renderFile [as engine] (/Users/karoline/node_modules/ejs/lib/ejs.js:489:10)
      at View.render (/Users/karoline/node_modules/express/lib/view.js:135:8)
      at tryRender (/Users/karoline/node_modules/express/lib/application.js:640:10)
      at Function.render (/Users/karoline/node_modules/express/lib/application.js:592:3)
      at ServerResponse.render (/Users/karoline/node_modules/express/lib/response.js:1012:7)
      at /Users/karoline/Desktop/Afleveres/server.js:13:14
      at Layer.handle [as handle_request] (/Users/karoline/node_modules/express/lib/router/layer.js:95:5)
  </code></pre>
  <p>Does express not accept geojson, or am I doing something wrong?</p>
  <p>The code in my express file looks like this:</p>
  <pre><code>const express = require('express');
  const expressApp = express();
  const fs = require(&quot;fs&quot;);
  
  expressApp.set(&quot;view engine&quot;, &quot;ejs&quot;)
  expressApp.set(&quot;views&quot;, __dirname)
  
  
  expressApp.get('/', function(request, response){
      let visData = fs.readFileSync(&quot;visData.json&quot;, &quot;utf-8&quot;);
       let geoVisData = fs.readFileSync(&quot;koebenhavns-storkreds.geojson&quot;);
  
      response.render('index', {
          visData: visData, 
          geoVisData: geoVisData
      });
  })
  
  app.use(Express.static(__dirname));
  
  expressApp.listen(8080, function() {
      console.log('listening on port 8080')
  });
  </code></pre>
  <p>And the code in my ejs file looks like this:</p>
  <pre><code>let mapVis = {
          &quot;$schema&quot;: &quot;https://vega.github.io/schema/vega-lite/v5.json&quot;,
          &quot;width&quot;: 1300,
          &quot;height&quot;: 1200,
          &quot;view&quot;: {&quot;stroke&quot;: &quot;transparent&quot;},
          &quot;layer&quot;: [{
              &quot;data&quot;: {
                  &quot;data&quot;: {&quot;values&quot;: &lt;%- geoVisData %&gt;},
                  &quot;format&quot;: {
                      &quot;type&quot;: &quot;topojson&quot;,
                      &quot;feature&quot;: &quot;geometry&quot;
                  }
              },
              &quot;projection&quot;: {
                  &quot;type&quot;: &quot;mercator&quot;
              },
              &quot;mark&quot;: {
                  &quot;type&quot;: &quot;geoshape&quot;,
                  &quot;fill&quot;: &quot;lightgray&quot;,
                  &quot;stroke&quot;: &quot;white&quot;
              }
          }, {
              &quot;data&quot;: {&quot;values&quot;: &lt;%- visData %&gt;},
              &quot;projection&quot;: {
                  &quot;type&quot;: &quot;mercator&quot;
              },
              &quot;mark&quot;: &quot;circle&quot;,
              &quot;params&quot;: [{
                  &quot;name&quot;: &quot;show&quot;,
                  &quot;select&quot;: {&quot;type&quot;: &quot;point&quot;, &quot;fields&quot;: [&quot;hygge&quot;]},
                  &quot;bind&quot;: &quot;legend&quot;
              }],
              &quot;encoding&quot;: {
                  &quot;longitude&quot;: {
                      &quot;field&quot;: &quot;longitude&quot;,
                      &quot;type&quot;: &quot;quantitative&quot;
                  },
                  &quot;latitude&quot;: {
                      &quot;field&quot;: &quot;latitude&quot;,
                      &quot;type&quot;: &quot;quantitative&quot;},
                  &quot;size&quot;: {
                      &quot;value&quot;: 30
                  },
                  &quot;tooltip&quot;: [
                      {&quot;field&quot;: &quot;name&quot;, &quot;type&quot;: &quot;nominal&quot;, &quot;title&quot;: &quot;Name&quot;},
                      {&quot;field&quot;: &quot;neighborhood&quot;, &quot;type&quot;: &quot;nominal&quot;, &quot;title&quot;: &quot;Neighborhood&quot;},
                      {&quot;field&quot;: &quot;accommodationType&quot;, &quot;type&quot;: &quot;nominal&quot;, &quot;title&quot;: &quot;Type&quot;},
                      {&quot;field&quot;: &quot;price&quot;, &quot;type&quot;: &quot;quantitative&quot;, &quot;title&quot;: &quot;Price per night&quot;}
                  ],
                  &quot;color&quot;: {
                      &quot;field&quot;: &quot;hygge&quot;, &quot;type&quot;: &quot;nominal&quot;, &quot;title&quot;: &quot;Hygge?&quot;,
                      &quot;scale&quot;: {&quot;range&quot;: [&quot;#6BB7B9&quot;, &quot;#FF5A5F&quot;]}
                  },
                  &quot;href&quot;: {&quot;field&quot;: &quot;link&quot;, &quot;type&quot;: &quot;nominal&quot;},
                  &quot;opacity&quot;: {
                      &quot;condition&quot;: {&quot;param&quot;: &quot;show&quot;, &quot;value&quot;: 1},
                      &quot;value&quot;: 0.2
                  }
              }
          }
          ],
          &quot;config&quot;: {
              &quot;font&quot;: &quot;Avenir&quot;
          }
      }
  </code></pre>
  <p>The &lt;%- visData %&gt; (which is a json file) works, but the &lt;%- geoVisData %&gt; (which is a geojson file) doesn't.</p>