Create search control in Ionic v3 with Leaflet and Mapbox style

by satrio   Last Updated June 13, 2019 09:22 AM

I'm trying to build some GIS mobile by Ionic v3 using Leaflet map and Mapbox style, but i can create search control to search some data from Mapbox style data that i created before.

Here is my map.html

  Generated template for the MapPage page.

  See for more info on
  Ionic pages and navigation.

<ion-content padding>



    <div id="map" style="width:100%; height:100%;"></div>
    <div class='pointer'></div>

    <div id="post-it"></div>


here my map.ts code

    import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import leaflet from 'leaflet';
import mapboxgl from 'mapbox-gl';
import 'leaflet-search';
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';

 * Generated class for the MapPage page.
 * See for more info on
 * Ionic pages and navigation.

  selector: 'page-map',
  templateUrl: 'map.html',
export class MapPage {
@ViewChild('map') mapContainer : ElementRef;
map : any;
searchControl : any;
  constructor(public navCtrl: NavController, public navParams: NavParams, ) {


  ionViewDidEnter() {

  loadmap() { ="map").fitWorld();
    let searchLayer = leaflet.layerGroup().addTo(; leaflet.Control.Search({layer: searchLayer}));

    leaflet.tileLayer('{z}/{x}/{y}@2x?access_token=pk.eyJ1Ijoib3dseTA1IiwiYSI6ImNqd3JmZG51azA0dHY0YW53djQxMWU1dGQifQ.__iSaUCwxAgRfzwa9SKRRg', {
      attribution: 'Map data &copy; <a href="">OpenStreetMap</a> contributors, <a href="">CC-BY-SA</a>, Imagery © <a href="">Mapbox</a>',
      maxZoom: 18

      locateOptions: {
              enableHighAccuracy: true

      setView: true,
      maxZoom: 10
Tags : leaflet mapbox

Related Questions

Updated June 21, 2017 08:22 AM

Updated February 24, 2018 16:22 PM

Updated March 23, 2017 10:22 AM

Updated April 09, 2017 00:22 AM