title: Can't get map to display on page, Openlayers ASP.NET core
body: <p>I have tried to get it to display but it just shows me the html formatting not the map. In the script part when a simple map display code is entered it displays the map but when any other function is added it stops functioning. I haven't been able to recreate what is available on this page: <a href="https://openlayers.org/en/latest/examples/draw-and-modify-features.html" rel="nofollow noreferrer">https://openlayers.org/en/latest/examples/draw-and-modify-features.html</a></p>
  <p>Please help</p>
  <p>The sample map code that displays correctly:</p>
  <pre><code>var map = new ol.Map({
          target: 'map',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.OSM()
            })
          ],
          view: new ol.View({
            center: ol.proj.fromLonLat([37.41, 8.82]),
            zoom: 4
          })
        });
  </code></pre>
  <p>The code that doesn't work</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css&quot; type=&quot;text/css&quot;&gt;
      &lt;title&gt;Draw and Modify Features&lt;/title&gt;
      &lt;!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer --&gt;
      &lt;script src=&quot;https://unpkg.com/elm-pep&quot;&gt;&lt;/script&gt;
      &lt;style&gt;
          .map {
              width: 100%;
              height: 400px;
          }
      &lt;/style&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id=&quot;map&quot; class=&quot;map&quot;&gt;&lt;/div&gt;
      &lt;form class=&quot;form-inline&quot;&gt;
          &lt;label&gt;Geometry type &amp;nbsp;&lt;/label&gt;
          &lt;select id=&quot;type&quot;&gt;
              &lt;option value=&quot;Point&quot;&gt;Point&lt;/option&gt;
              &lt;option value=&quot;LineString&quot;&gt;LineString&lt;/option&gt;
              &lt;option value=&quot;Polygon&quot;&gt;Polygon&lt;/option&gt;
              &lt;option value=&quot;Circle&quot;&gt;Circle&lt;/option&gt;
          &lt;/select&gt;
      &lt;/form&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
          var raster = new TileLayer({
              source: new OSM(),
          });
  
          var source = new VectorSource();
          var vector = new VectorLayer({
              source: source,
              style: new Style({
                  fill: new Fill({
                      color: 'rgba(255, 255, 255, 0.2)',
                  }),
                  stroke: new Stroke({
                      color: '#ffcc33',
                      width: 2,
                  }),
                  image: new CircleStyle({
                      radius: 7,
                      fill: new Fill({
                          color: '#ffcc33',
                      }),
                  }),
              }),
          });
  
          var map = new Map({
              layers: [raster, vector],
              target: 'map',
              view: new View({
                  center: [-11000000, 4600000],
                  zoom: 4,
              }),
          });
  
          var modify = new Modify({ source: source });
          map.addInteraction(modify);
  
          var draw, snap; // global so we can remove them later
          var typeSelect = document.getElementById('type');
  
          function addInteractions() {
              draw = new Draw({
                  source: source,
                  type: typeSelect.value,
              });
              map.addInteraction(draw);
              snap = new Snap({ source: source });
              map.addInteraction(snap);
          }
  
          /**
           * Handle change event.
           */
          typeSelect.onchange = function () {
              map.removeInteraction(draw);
              map.removeInteraction(snap);
              addInteractions();
          };
  
          addInteractions();
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>