leafletपत्रक के साथ आरंभ करना


टिप्पणियों

CAT लोगो

पत्रक इंटरैक्टिव नक्शे बनाने के लिए एक खुला स्रोत जावास्क्रिप्ट पुस्तकालय है।

संस्करण

संस्करण रिलीज़ की तारीख
1.0.3 2017/01/23
1.0.2 2016/11/21
1.0.1 2016/09/30
1.0 2016/09/27
0.7 2013-11-18
0.6 2013-06-26
0.5 2013-01-17
0.4 2012-07-30
0.3 2012-02-13
0.2 2011-06-17
0.1 2011-05-16

HTML और जावास्क्रिप्ट के साथ CAT.js को लागू करना

USC का उपयोग करने के लिए, इसकी स्टाइलशीट और जावास्क्रिप्ट फ़ाइल को अपने पेज पर लोड करें:

<link rel="stylesheet" href="/css/leaflet.css" />
<script src="/js/leaflet.js"></script>
 

ये संसाधन विभिन्न प्रकार के स्थानों से डाउनलोड किए जा सकते हैं जैसे कि USC का मुखपृष्ठ या USC Github भंडार , या आप सीधे CDP का उपयोग कर सकते हैं,

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" ></script>
 

आपको अपने नक्शे के लिए एक कंटेनर की आवश्यकता है। डेवलपर्स के लिए इसके लिए "मैप" की आईडी के साथ एक div का उपयोग करना आम है। अपने नक्शे देना सुनिश्चित करें div के रूप में अच्छी तरह से एक ऊंचाई या नक्शे दिखाई न देने के।

<div id="map" style="height: 200px;"></div>
 

Leaflet.map(mapContainerId) विधि का उपयोग करके एक मानचित्र ऑब्जेक्ट बनाकर मानचित्र को Leaflet.map(mapContainerId) किया जाता है। नीचे दिए गए उदाहरण में, एक अक्षांश और देशांतर डिफ़ॉल्ट डिफ़ॉल्ट स्तर 13 के साथ तय किए जाते हैं।

var map = L.map('map').setView([42.35, -71.08], 13);
 

यह हमारा खाली नक्शा बनाता है, अब हमें अपने आधार मानचित्र के रूप में कार्य करने के लिए एक टाइल की परत प्रदान करनी चाहिए। एक टिल्लेयर एक ऐसी सेवा है जो टाइलों में मानचित्र चित्र प्रदान करती है, छोटी छवियां जो किसी विशेष क्रम में x, y और z मापदंडों द्वारा एक्सेस की जाती हैं (नीचे देखें)।

एक टाइल परत URL इस तरह दिख सकता है, जहाँ {s} , {z} , {x} और {y} प्लेसहोल्डर हैं जो ऑपरेशन के दौरान स्वतः ही बदल जाएंगे:

"http://{s}.domain.com/foo/{z}/{x}/{y}.png"
 

अब हम अपने टिल्लेयर को जोड़ सकते हैं, एट्रिब्यूशन की जानकारी और अधिकतम संभव ज़ूम स्तर के साथ, और इसे मानचित्र में जोड़ सकते हैं:

L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
  attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
  maxZoom: 17,
  minZoom: 5
}).addTo(map);
 

नोट: मैप आरंभीकरण और टाइल परत को लोड करने की आवश्यकता leaflet.js और मैप कंटेनर div एलिमेंट के शामिल होने के बाद होने वाली है।

जल्दी शुरू करो

<!DOCTYPE html>
<html>

  <head>
    <title>My Leaflet Map</title>
    <link rel="stylesheet" href="//unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
    <style type="text/css">
      #map { 
        height: 500px; 
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script src="//unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>    
    <script>
      var map = L.map('map').setView([51.505, -0.09], 13);

      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);
      
      L.marker([51.5, -0.09]).addTo(map)
          .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
          .openPopup();
    </script>
  </body>

</html>