TypeScript में जियोलोकेशन और मैप्स: लाइब्रेरी और व्यावहारिक उदाहरण

TypeScript में जियोलोकेशन और मैप्स: टूल्स का अवलोकन और कोड उदाहरण

आधुनिक वेब एप्लीकेशन में भौगोलिक डेटा के साथ काम करने की ज़रूरत बढ़ती जा रही है - उपयोगकर्ता का स्थान दिखाने से लेकर जटिल रूट और क्लस्टरिंग तक। TypeScript अपनी सख्त टाइपिंग के साथ ऐसे फीचर्स को और अधिक विश्वसनीय और सुविधाजनक बनाता है। इस लेख में हम मैप्स और जियोलोकेशन के लिए लोकप्रिय लाइब्रेरीज़ पर चर्चा करेंगे, TypeScript के साथ इंटीग्रेशन के उदाहरण दिखाएंगे और व्यावहारिक सुझाव देंगे।

1. ब्राउज़र में जियोलोकेशन की मूल बातें

मैप्स कनेक्ट करने से पहले, उपयोगकर्ता के कोऑर्डिनेट्स प्राप्त करना ज़रूरी है। बिल्ट-इन जियोलोकेशन API (navigator.geolocation) TypeScript में अच्छी तरह से टाइप किया जाता है।

interface Position {
  latitude: number;
  longitude: number;
  accuracy?: number;
}

function getCurrentPosition(): Promise<Position> {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        resolve({
          latitude: pos.coords.latitude,
          longitude: pos.coords.longitude,
          accuracy: pos.coords.accuracy
        });
      },
      (error) => reject(error)
    );
  });
}

// उपयोग
getCurrentPosition()
  .then((pos) => console.log(`अक्षांश: ${pos.latitude}, देशांतर: ${pos.longitude}`))
  .catch((err) => console.error('जियोलोकेशन त्रुटि:', err));

2. Leaflet — हल्की और लोकप्रिय लाइब्रेरी

Leaflet मैप्स प्रदर्शित करने के लिए सबसे सरल और तेज़ लाइब्रेरीज़ में से एक है। TypeScript के लिए @types/leaflet पैकेज उपलब्ध है।

इंस्टॉलेशन

npm install leaflet
npm install --save-dev @types/leaflet

उदाहरण: मार्कर के साथ मैप

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

// टाइप की गई इनिशियलाइज़ेशन फंक्शन
function initMap(containerId: string, coords: [number, number]): L.Map {
  const map = L.map(containerId).setView(coords, 13);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap योगदानकर्ता'
  }).addTo(map);

  L.marker(coords)
    .addTo(map)
    .bindPopup('आप यहाँ हैं!');

  return map;
}

// उपयोग
const map = initMap('map', [28.6139, 77.2090]); // दिल्ली

उन्नत इवेंट टाइपिंग

map.on('click', (e: L.LeafletMouseEvent) => {
  const { lat, lng } = e.latlng;
  console.log(`क्लिक: ${lat}, ${lng}`);
});

3. OpenLayers — जटिल कार्यों के लिए शक्तिशाली टूल

OpenLayers कई फॉर्मेट (GeoJSON, KML, WMS) को सपोर्ट करता है और पेशेवर जियोइन्फॉर्मेशन सिस्टम के लिए उपयुक्त है। टाइप्स पैकेज के साथ ही आते हैं।

इंस्टॉलेशन

npm install ol

उदाहरण: मार्कर और टूलटिप के साथ मैप

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { fromLonLat } from 'ol/proj';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Style from 'ol/style/Style';
import Icon from 'ol/style/Icon';
import Overlay from 'ol/Overlay';

function createMap(containerId: string, lon: number, lat: number): void {
  const container = document.getElementById(containerId) as HTMLElement;

  // मार्कर बनाएँ
  const marker = new Feature({
    geometry: new Point(fromLonLat([lon, lat]))
  });

  marker.setStyle(new Style({
    image: new Icon({
      anchor: [0.5, 1],
      src: 'https://openlayers.org/en/latest/examples/data/icon.png'
    })
  }));

  // वेक्टर लेयर
  const vectorLayer = new VectorLayer({
    source: new VectorSource({
      features: [marker]
    })
  });

  // मैप
  const map = new Map({
    target: container,
    layers: [
      new TileLayer({ source: new OSM() }),
      vectorLayer
    ],
    view: new View({
      center: fromLonLat([lon,