How to properly implement leaflet search in Ionic 3?

Ionic Framework ionic-v3
1

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;

@IonicPage()
@Component({
  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() {
    this.map = L.map('mapId', {
      center: this.center,
      zoom: 16
    });

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


    L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
        attributionControl: false,
        maxNativeZoom: 17,
        maxZoom: 17
      }
    ).addTo(this.map);
  }

  ionViewDidLoad() {
    this.center = [23.762912, 90.430693];
    this.leafletMap();
  }

}

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?
2

Check this guide out: https://www.joshmorony.com/location-select-page-with-google-maps-and-ionic/

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

3

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

4

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

1 Like
5

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