title: How to render or display a map from url
body: <p>in the below code which i copy it from:</p>
  <pre><code>https://openlayers.org/workshop/en/vector/geojson.html
  </code></pre>
  <p>as shown below, it needs the url:</p>
  <pre><code>url: './data/countries.json'
  </code></pre>
  <p>when i run the code no map appears inly plus and minus sign for zooming in and out with a dark blue background
  please let me know how to find countries .json</p>
  <p><strong>code</strong>:</p>
  <pre><code>const map = new Map({
    target: 'map-container',
    layers: [
      new VectorLayer({
        source: new VectorSource({
          format: new GeoJSON(),
          url: './data/countries.json'
        })
      })
    ],
    view: new View({
      projection: 'EPSG:4326',
      center: [13.063561,52.391842],
      zoom: 2
    })
  });
  </code></pre>
  <p><strong>attempts</strong>:</p>
  <p>i also adapted the code to be as follows:</p>
  <pre><code>const vectorLayer = new VectorLayer({
    source: new VectorSource({
      url: './data/countries.geojson',
      format: new GeoJSON(),
      defaultProjection :'EPSG:4326', projection: 'EPSG:3857'
    })
  })
  
  const map = new Map({
    target: 'map-container',
    layers: [vectorLayer],
    view: new View({
      projection: 'EPSG:4326',
      center: [0,0],
      zoom: 2
    })
  });
  sync(map)
  </code></pre>
  <p>also tried</p>
  <pre><code>countries.json
           .geojson 
           .geo.json
           
  </code></pre>
  <p>but nothing gets displayed</p>