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 http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar>
    <ion-title>map</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>


</ion-content>

<ion-content>

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

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

</ion-content>

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 https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */



@IonicPage()
@Component({
  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() {
    this.loadmap();
     }


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


    leaflet.tileLayer('https://api.mapbox.com/styles/v1/owly05/cjwrddd0x04wc1cpsy3lgeqq5/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1Ijoib3dseTA1IiwiYSI6ImNqd3JmZG51azA0dHY0YW53djQxMWU1dGQifQ.__iSaUCwxAgRfzwa9SKRRg', {
      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>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      maxZoom: 18

    }).addTo(this.map);



    this.map.addControl(leaflet.control.locate({
      locateOptions: {
              enableHighAccuracy: true
}}));


    this.map.locate({

      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