[Vuejs]-How to add Search Box (L.Control.Search) global location on Leaflet Map using Vue.Js

1. you need to install leaflet into your project, using npm install leaflet.
2. you need install leaflet-search using install leaflet-search

import this code

  import L from 'leaflet';
  import 'leaflet/dist/leaflet.css';
  import 'leaflet-search/dist/leaflet-search.min.css';
  import LControlSearch from 'leaflet-search';
  import 'leaflet-search';

and export this code as function for running depedency

  data() {
    return {
      baseLayer: null,
      satelliteLayer: null,
      map: null,
      searchControl: null,
    }
  },

and now the component, put this code into mounted() this code for baseLayer

    this.map = L.map('map').setView([-0.9085086842426627, 118.1511063353415], 5)
    this.baseLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
      maxZoom: 18
    }).addTo(this.map);
    this.satelliteLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
      attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
      maxZoom: 18
    });

under baseLayer you need put searchBox here the code

    new L.Control.Search({
      url: 'https://nominatim.openstreetmap.org/search?format=json&q={s}',
      jsonpParam: 'json_callback',
      propertyName: 'display_name',
      propertyLoc: ['lat','lon'],
      marker: L.circleMarker([0,0],{radius:30}),
      autoCollapse: true,
      autoType: false,
      minLength: 2
    }).addTo(this.map);

under searchBox put this code for layerControl

      L.control.layers({
        'Peta Display': this.baseLayer,
        'Peta Satelit': this.satelliteLayer
      },{},{
        collapsed: true,
      }).addTo(this.map);

import the map into vue like this one.

<template>
  <div>
    <div id="map" class="map">
    </div>
  </div>
</template>

and finally you can search global location in map can change map layer.

if your map doesn’t appear on the screen add this code.

  <style>
  .map{
    height: 575px;
    width: auto;
  }
  </style>

and this is the full code if you find it difficult.

<template>
  <div>
    <div id="map" class="map">
    </div>
  </div>
</template>
  
  <script>
  import L from 'leaflet';
  import 'leaflet/dist/leaflet.css';
  import 'leaflet-search/dist/leaflet-search.min.css';
  import LControlSearch from 'leaflet-search';
  import 'leaflet-search';
  
  export default {
  data() {
    return {
      baseLayer: null,
      satelliteLayer: null,
      map: null,
      searchControl: null,
    }
  },
  mounted() {
    this.map = L.map('map').setView([-0.9085086842426627, 118.1511063353415], 5)
    this.baseLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
      maxZoom: 18
    }).addTo(this.map);
    this.satelliteLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
      attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
      maxZoom: 18
    });

    new L.Control.Search({
      url: 'https://nominatim.openstreetmap.org/search?format=json&q={s}',
      jsonpParam: 'json_callback',
      propertyName: 'display_name',
      propertyLoc: ['lat','lon'],
      marker: L.circleMarker([0,0],{radius:30}),
      autoCollapse: true,
      autoType: false,
      minLength: 2
    }).addTo(this.map);
  
      L.control.layers({
        'Peta Display': this.baseLayer,
        'Peta Satelit': this.satelliteLayer
      },{},{
        collapsed: true,
      }).addTo(this.map);
  
  },

  }
  </script>
  <style>
  .map{
    height: 575px;
    width: auto;
  }
  </style>

I hope this help you….