tinyworldmap परिचय
- tinyworldmap offline-first और low-bandwidth web apps के लिए एक world map है
- इसे Leaflet के साथ उपयोग करने के लिए डिज़ाइन किया गया है, और सभी zoom levels समर्थित हैं
- इसका सबसे पूर्ण संस्करण gzip compression के बाद केवल 300kB है
- client-side rendering को 10 साल पुराने low-performance mobile phones पर व्यापक रूप से profile और test किया गया है, और कोई ध्यान देने योग्य latency नहीं है
- डिफ़ॉल्ट रूप से यह OpenStreetMap में जोड़े गए जनसंख्या के आधार पर शीर्ष 10,000 शहर दिखाता है
- लेखन के समय इसमें 48,000 से अधिक आबादी वाले सभी शहर और कस्बे शामिल हैं
tinyworldmap का उपयोग कैसे करें
base map के रूप में उपयोग
- Leaflet base map के रूप में tinyworldmap का उपयोग करने के लिए,
head टैग में निम्न जोड़ें:
- इस script में map दिखाने के लिए आवश्यक सभी data शामिल हैं
- Leaflet map में tile layer जोड़ने के बजाय, निम्न का उपयोग करें:
new L.GridLayer.TinyWorld().addTo(map)
TinyWorld constructor कई options लेता है: backgroundColor, textFillColor, borderStrokeColor, borderFillColor, borderWidth, textStrokeColor(टेक्स्ट को बाकी से अलग दिखाने के लिए), textStrokeWidth, cityFont(उदाहरण: "12px Arial"), countryFont, dotColor- यदि
dotColor निर्दिष्ट किया जाता है, तो प्रत्येक शहर को एक dot के रूप में दिखाया जाता है। यह borders को हटाए गए tinyworldmap के compact version का उपयोग करते समय usability को बेहतर बनाता है
fallback map के रूप में उपयोग
- offline-first web applications में सभी zoom levels पर image-based maps को cache करना संभव नहीं है (tiles की संख्या बहुत अधिक होती है और उनका आकार terabytes में होता है)
- यह repository web app में offline functionality सक्षम करने के लिए service worker प्रदान करती है
- service worker install होने पर fallback map पहले से load हो जाता है। देखे गए सभी pages cache होते हैं, लेकिन base map नहीं
- जब तक server से कनेक्ट किया जा सकता है, cache किया गया data उपयोग नहीं होता
- यदि उपयोगकर्ता offline है, तो website cache से serve की जाती है, और service worker OSM tile server के requests को intercept करके tinyworldmap का उपयोग कर local replacement tiles बनाता है
- service worker register करने से पहले, service worker में 'IMPORTANT' के रूप में चिह्नित सभी sections को पहले संशोधित करना होगा
- register होने के बाद, tile layer में OpenStreetMap और tinyworldmap दोनों को इस प्रकार attribution के रूप में अवश्य दिखाना होगा:
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© [OpenStreetMap](https://www.openstreetmap.org/copyright), [tinyworldmap](https://www.tinyworldmap.com)'
}).addTo(map);
- production application में tinyworldmap को fallback के रूप में उपयोग करने का उदाहरण देखने के लिए Hitchmap देखें। service worker समर्थित browser में website load करें, थोड़ी देर प्रतीक्षा करें, फिर internet बंद करके reload करें; web app को fallback map के साथ सामान्य रूप से काम करना चाहिए। service worker install होने में समय लग सकता है
और भी छोटा world map
- पूर्ण map gzip compression के बाद 300K / uncompressed 694K है। कुछ use cases में यह आकार भी अभी बहुत बड़ा हो सकता है
बिना borders के
tiny-world-noborders-10000.js(on) में पूर्ण संस्करण का सारा data शामिल है, बस borders और coastlines को छोड़कर- gzip compressed version में 100k, और uncompressed version में 200k की कमी होती है
- border-less version का लाभ केवल छोटा आकार नहीं है, बल्कि इसमें शामिल सभी data के सटीक होने का भी है
- पूर्ण संस्करण के borders उच्च zoom levels पर सटीक नहीं हैं, इसलिए borders और coastlines से मेल खाने वाले shapes को overlay करने पर वे अजीब दिख सकते हैं। ऐसे मामलों में border-less version बेहतर बैठता है
- डिफ़ॉल्ट style इस प्रकार है
बिना शहरों के
- city labels के बिना दो versions उपलब्ध हैं:
tiny-world-nocities.js(on) (country labels बरकरार) और tiny-world-borders.js(on) (country labels हटाए गए)
- city labels uncompressed स्थिति में 410K और compressed स्थिति में 172K लेते हैं
कम शहर
- अंत में, city labels वाले प्रत्येक file में 2,000 शहरों और 4,000 शहरों वाले versions भी उपलब्ध हैं
- file name में
10000 को 2000 या 4000 से बदलना भर है
| शामिल शहरों की संख्या |
जनसंख्या |
| 10,000 |
> 48,000 |
| 4,000 |
> 137,000 |
| 2,000 |
> 287,000 |
tinyworldmap hiring
- यदि आपको custom map (उदाहरण: अधिक विस्तृत या किसी अन्य भाषा में) चाहिए, या अपनी website में offline functionality लागू करने में मदद चाहिए, तो business@tinyworldmap.com पर संपर्क करें
attribution
- OpenStreetMap data की तरह tinyworldmap data भी ODBL के तहत licensed है, इसलिए attribution दिखाना आवश्यक है
- यदि आपने ऊपर बताए गए steps का पालन किया है, तो Leaflet footer में OpenStreetMap और tinyworldmap दोनों के attribution शामिल होने चाहिए। अन्यथा, निम्न जोड़ें:
© [OpenStreetMap](https://www.openstreetmap.org/copyright), [tinyworldmap](https://www.tinyworldmap.com)
GN⁺ की राय
- tinyworldmap offline maps या low-spec devices पर उपयोग योग्य एक हल्का world map प्रदान करता है। यह मौजूदा OpenStreetMap आदि का विकल्प बनने वाला समाधान लगता है
- borders, cities आदि को चुनिंदा रूप से हटाकर और भी हल्के versions देना इसका लाभ है। जरूरत के अनुसार custom maps का उपयोग किया जा सकता है, इसलिए इसकी उपयोगिता अधिक लगती है
- हालांकि offline में काम करने के लिए service worker में बदलाव जैसे तकनीकी implementation की जरूरत होती है, इसलिए developer को कुछ हद तक अनुभव होना चाहिए। इस हिस्से पर और विस्तृत guide मिले तो अच्छा होगा
- भारत में Naver, Kakao जैसे पोर्टल map APIs का उपयोग कम होता है, लेकिन यदि इस तरह की सेवाओं के साथ integration करके इसे offline में चलाया जा सके, तो उपयोग के और भी उदाहरण सामने आ सकते हैं
- इसमें दुनिया के प्रमुख शहरों की जानकारी शामिल है, इसलिए यात्रा, logistics आदि क्षेत्रों में यह उपयोगी हो सकता है। multilingual support भी एक महत्वपूर्ण पहलू हो सकता है
1 टिप्पणियां
Hacker News की राय