How to properly implement leaflet search in Ionic 3?

I am trying to search location in the leaflet map. I am using leaflet-search plugin to achieve this. I tried the following code:

import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import 'leaflet';
import 'leaflet-routing-machine';
import 'leaflet-search'

declare var L: any;

  selector: 'page-map-modal',
  templateUrl: 'map-modal.html',
export class MapModalPage {
  map: L.Map;
  center: L.PointTuple;
  searchControl: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {

  leafletMap() { ='mapId', {
      zoom: 16

    let searchLayer = L.layerGroup().addTo(; L.Control.Search({layer: searchLayer}));

    L.tileLayer('{z}/{y}/{x}', {
        attributionControl: false,
        maxNativeZoom: 17,
        maxZoom: 17

  ionViewDidLoad() { = [23.762912, 90.430693];


The search icon css is not loaded properly.

enter image description here

Then, when i tried to search for a location, location not found shows.

enter image description here

What’s the perfect way to include leaflet-search. I want below features:

  1. How to show suggestion when typing for a location?
  2. How to give preference to show the locations of Bangladesh when typing for location?

Check this guide out:

In general I highly recommend Josh’s guides, very clear and enlightening.

He is using google maps. He is not using leaflet search :frowning:

hy setu, do u got solve this case ?? i got same case, please help me if u got it

1 Like

Could you explain what steps you have followed to solve the problem?