How to integrate leaflet-search plugin to my vue2-leaflet project?

Question

I’m new to Vue and I’m developing a map application with vue2-leaflet. I would like to add a search box to my application to locate markers on my map, I found this leaflet plugin leaflet-search which is just the functionality I’m looking for, but I don’t know how to integrate it into my vue cli project.

After installing the plugin, how do I import it into my vue component? and, where in my <script> should I add the code?

This is what the component where I want to add the search box looks like:

<template>
<body>
  <l-map class="map" ref="map" :min-zoom="minZoom" :crs="crs">
    <l-tile-layer :url="url"></l-tile-layer>
    <l-grid-layer class="grid" :tile-component="tileComponent"></l-grid-layer>
    <l-marker v-for="(newCoords, i) in InvertedCoords" :key="i" :lat-lng="newCoords">
      <div v-if="stars[i].status === 'ALLY'">
        <l-icon ></l-icon>
      </div>
      <div v-else>
        <l-icon></l-icon>
      </div>
      <l-popup class="popup">
        <em class="popup-bold">Name: </em>{{ stars[i].name }}<br />
        <em class="popup-bold">Longitud: </em>{{ stars[i].lng }}<br />
        <em class="popup-bold">Latitud: </em>{{ stars[i].lat }}<br />
      </l-popup>
    </l-marker>
  </l-map>
</body>
</template>

<script>
import L from "leaflet";
import { CRS } from "leaflet";
import GridTemplate from './GridTemplate.vue';
import { eventBus } from '../main.js'
import {
  LMap,
  LTileLayer,
  LMarker,
  LPopup,
  LPolyline,
  LIcon,
} from "vue2-leaflet";

export default {
  name: "Map",
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LImageOverlay,
    LPopup,
    LIcon,
  },
  props: {
    msg: {
      type: String
    }
  },
  data() {
    return {
      url:  "",
      bounds: [  [-2600, -2700],  [1000, 3000] ],
      minZoom: 0,
      crs: L.CRS.Simple,
      stars: [],
      messageList: [],
      tileComponent: GridTemplate
    };
  },
  computed: {
    InvertedCoords() {
      var newArraw = [];
      for (let i = 0; i < this.stars.length; i++) {
        newArraw[i] = {
          id: i + 2,
          lat: this.stars[i].lat * -1,
          lng: this.stars[i].lng * -1
        };
      }
      return newArraw;
      console.log(newArraw);
    }
  },

  watch: {
    msg: function() {
      this.messageList.push(this.msg);
    }
  },

  mounted() {
    this.$refs.map.mapObject.setView([552, 40], 1);

    this.$http.get("url")
        .then(response => {
          return response.json();
        })
      .then(data => {
        const resultArray = [];
        for (let key in data) {
          resultArray.push(data[key]);
        }
        this.stars = resultArray;
      });

  methods: {
    inverted() {
      for (let i = 0; i < this.newArraw.length; i++) {
        console.log(this.newArraw[i]);
        return this.newArraw[i];
      }
    },
    updateStars(text) {
      this.$http.get("url")
        .then(response => {
          return response.json();
        })
      .then(data => {
        const resultArray = [];
        for (let key in data) {
          resultArray.push(data[key]);
        }
        this.stars = resultArray;
      });
    },
    StarsData() {
      eventBus.$emit('i-got-clicked', this.stars)
    },
    
  }
};
</script>

<style scoped>

</style>

score 1 · Answer 1 · answered Jun 30 '20 at 20:50

I don't know your Plugin but I have used gesearch.

Here is what I did to register the leaflet plugin.

import { OpenStreetMapProvider } from "leaflet-geosearch";
import "leaflet-geosearch/assets/css/leaflet.css";
import { GeoSearchControl } from "leaflet-geosearch";

Then in mounted() I can register it to leaflet. You can look at the docs of how to register controls.

mounted() {
  const map = this.$refs.map.mapObject;
  const searchControl = new GeoSearchControl({
    provider,
    // ... some more options
  });
  map.addControl(searchControl);
}

Perhaps this helps you.

How to integrate leaflet-search plugin to my vue2-leaflet project?

1 Answers1