4

I am making a vue project and I want to use leaflet inside of my components.

import L from 'leaflet';

  export default {
    created() {
      L.map('map').setView([33.4501001, -101.9107704], 4); // Coordinates, Zoom
    },
  };

html:

<template lang="html">
  <div class="row">
    <div>
      <h1> Hello </h1>
    </div>
    <div id="map">

    </div>
  </div>
</template>

But I get the error Map container not found?

2
1

vue2-leaflet provides Vue2 leaflet components so you can do things like <l-map ...><l-tile-layer ...>...</l-tile-layer></l-map>.

Here's the GitHub Repo.

1

Since nobody has clearly explained the problem yet within the original poster's code, I am posting much later to simply inform the poster that Leaflet cannot find the "map" DOM element yet within the created hook and you must simply move the code into the mounted hook.

// just change 'created' to 'mounted'

import L from 'leaflet';

  export default {
    mounted() {
      L.map('map').setView([33.4501001, -101.9107704], 4); // Coordinates, Zoom
    },
  };

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.