How to integrate offline maps in Ionic+Angular using leaflet maps?

Question

this.map = leaflet.map("mapId", { zoomControl: false }).setView([17.385, 78.4867], 13);
      leaflet.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: '',
      }).addTo(this.map);
      this.map.locate({
        setView: true,
        maxZoom: 11
      })

We have tried implementing the above code. It is working fine in online mode but does not work when offline. How can we implement current location & search locations functionality in leaflet maps when offline? Anyone who integrated offline leaflet maps with Ionic + Angular, please provide a solution. Thanks in advance.

Answer 1

So let's clear things. If you want an offline map in Angular with Ionic READ THIS BLOG POST

Then if you want an implementation of the current location you should use Geolocation Cordova Plugin and as they say :

This plugin provides information about the device's location, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi, and Bluetooth MAC addresses, and GSM/CDMA cell IDs.

To search locations by name fragment You should store the locations name in the database with the corresponding pair of coordinates like

// KEY : NAME OF LOCATION : VALUE [LATITUDE, LONGITUDE]
object: {[key: string]:[number,number] } = {"USA":[37.6000,-95.6650]};

then you will be able to search coordinates by their location name.