CODEWITHSUNDEEP
vue.jsopenlayers
user14131782
user14131782

Reputation: 1068

OpenLayers with VueJS - empty div in place of map

I'm trying to implement a simple world map in a Vue application. I have created a MapContainer component that is then imported into my main app. Below is the code for MapContainer.vue:

<template>
  <div
    ref="map-root"
    style="width: 100%, height: 100%">
  </div>
</template>

<script>
  import View from 'ol/View';
  import Map from 'ol/Map';
  import TileLayer from 'ol/layer/Tile';
  import OSM from 'ol/source/OSM';
  import 'ol/ol.css';

  export default {
    name: 'MapContainer',
    components: {},
    props: {},
    mounted() {
      new Map({
        target: this.$refs['map-root'],

        layers: [
          new TileLayer({
            source: new OSM()
          })
        ],
    
        view: new View({
          zoom: 0,
          center: [0, 0],
          constrainResolution: true
        })
      });
    }
  }
</script>

<style>
</style>

I am registering the MapContainer component and then simply placing it inside a div in the parent component. When I import this component and try to use it, I get an empty div in place of the map. Does anyone know what I'm doing wrong?

Here is the parent component's code:

<template>
  <div>
    <map-container></map-container>
  </div>
</template>

<script>
  import MapContainer from '../mapping/MapContainter.vue';
  
  export default {
    components: {
      'map-container': MapContainer
    }
  }
</script>

Upvotes: 1

Views: 855

Answers (1)

user14131782
user14131782

Reputation: 1068

I fixed this by adding the following class to the div with the ref:

.map {
  width: 100% !important;
  height: 600px !important;
}

(The !important's might not be strictly necessary).

Upvotes: 1

Related Questions