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

Question

I have a case so I was assigned by my lecturer to create a map with leaflet.js in Vue.js framework which can show map and can search location globally and also can change the map layer with 2 map layers, how to do it using vue.js??

Answer 1

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....

Answer 2

This works only for Vue2 and has since been deprecated