เทคโนโลยี World Map ขนาดจิ๋วพิเศษ

 (github.com/tinyworldmap)
9 คะแนน โดย GN⁺ 2024-04-22 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

แนะนำ tinyworldmap

  • tinyworldmap คือแผนที่โลกสำหรับเว็บแอปที่เน้นออฟไลน์เป็นหลักและสภาพแวดล้อมแบนด์วิดท์ต่ำ
  • ออกแบบมาให้ใช้งานร่วมกับ Leaflet และรองรับทุกระดับการซูม
  • เวอร์ชันที่สมบูรณ์ที่สุดมีขนาดเพียง 300kB เมื่อบีบอัดด้วย gzip
  • การเรนเดอร์ฝั่งไคลเอนต์ผ่านการทำ profiling และทดสอบอย่างกว้างขวางบนโทรศัพท์สเปกต่ำอายุ 10 ปี และไม่พบอาการหน่วงที่สังเกตได้
  • โดยค่าเริ่มต้นจะแสดงเมือง 10,000 แห่งที่มีประชากรมากที่สุดซึ่งถูกเพิ่มไว้ใน OpenStreetMap
  • ณ เวลาที่เขียน ครอบคลุมทุกเมืองและชุมชนที่มีประชากรตั้งแต่ 48,000 คนขึ้นไป

วิธีใช้ tinyworldmap

ใช้เป็นแผนที่หลัก

  • หากต้องการใช้ tinyworldmap เป็นแผนที่หลักของ Leaflet ให้เพิ่มสิ่งต่อไปนี้ในแท็ก head:
  • สคริปต์นี้มีข้อมูลทั้งหมดที่จำเป็นสำหรับการแสดงแผนที่
  • แทนที่จะเพิ่ม tile layer ลงในแผนที่ Leaflet ให้ใช้สิ่งต่อไปนี้:
new L.GridLayer.TinyWorld().addTo(map)
  • ตัวสร้าง TinyWorld รองรับหลายออปชัน: backgroundColor, textFillColor, borderStrokeColor, borderFillColor, borderWidth, textStrokeColor (ใช้แยกข้อความออกจากส่วนอื่น), textStrokeWidth, cityFont (เช่น "12px Arial"), countryFont, dotColor
  • หากกำหนด dotColor แต่ละเมืองจะถูกแสดงเป็นจุด ซึ่งช่วยเพิ่มการใช้งานเมื่อใช้ tinyworldmap เวอร์ชันย่อที่ตัดเส้นพรมแดนออก

ใช้เป็นแผนที่ fallback

  • ในเว็บแอปที่เน้นออฟไลน์เป็นหลัก การแคชแผนที่แบบภาพในทุกระดับการซูมเป็นไปไม่ได้ (จำนวนไทล์มีมหาศาลและมีขนาดระดับเทราไบต์)
  • ที่เก็บนี้มี service worker สำหรับเปิดใช้งานความสามารถออฟไลน์ให้กับเว็บแอป
  • เมื่อติดตั้ง service worker แล้ว แผนที่ fallback จะถูกพรีโหลดไว้ หน้าเว็บทั้งหมดที่เคยเข้าชมจะถูกแคชไว้ ยกเว้นแผนที่หลัก
  • ตราบใดที่ยังเชื่อมต่อกับเซิร์ฟเวอร์ได้ ระบบจะไม่ใช้ข้อมูลที่แคชไว้
  • หากผู้ใช้ออฟไลน์ เว็บไซต์จะถูกให้บริการจากแคช และ service worker จะดักจับคำขอไปยังเซิร์ฟเวอร์ไทล์ของ OSM แล้วสร้างไทล์ทดแทนในเครื่องด้วย tinyworldmap
  • ก่อนลงทะเบียน service worker ต้องแก้ไขทุกส่วนที่ถูกระบุว่า 'IMPORTANT' ใน service worker ก่อน
  • เมื่อลงทะเบียนแล้ว ต้องใส่การแสดงที่มาของทั้ง OpenStreetMap และ tinyworldmap ใน tile layer ดังนี้:
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);
  • หากต้องการดูตัวอย่างโปรดักชันแอปที่ใช้ tinyworldmap เป็น fallback ให้ไปที่ Hitchmap โหลดเว็บไซต์ในเบราว์เซอร์ที่รองรับ service worker รอสักครู่ จากนั้นปิดอินเทอร์เน็ตแล้วรีโหลด เว็บแอปควรยังทำงานได้ตามปกติด้วยแผนที่ fallback การติดตั้ง service worker อาจใช้เวลาสักระยะ

แผนที่โลกที่เล็กยิ่งกว่าเดิม

  • แผนที่แบบเต็มมีขนาด 300K เมื่อบีบอัดด้วย gzip / 694K เมื่อคลายบีบอัด สำหรับบางกรณีการใช้งาน ขนาดเท่านี้ก็อาจยังใหญ่เกินไป

ไม่มีเส้นพรมแดน

  • tiny-world-noborders-10000.js(on) มีข้อมูลทั้งหมดเหมือนเวอร์ชันเต็ม ยกเว้นเส้นพรมแดนและเส้นชายฝั่ง
  • เวอร์ชัน gzip ลดลง 100k และเวอร์ชันคลายบีบอัดลดลง 200k
  • เวอร์ชันไม่มีพรมแดนไม่เพียงแต่เล็กกว่า แต่ยังมีข้อดีคือข้อมูลทั้งหมดที่รวมอยู่มีความแม่นยำ
  • เส้นพรมแดนในเวอร์ชันเต็มไม่แม่นยำในระดับการซูมสูง จึงอาจดูแปลกเมื่อวางทับด้วยรูปร่างที่ตรงกับพรมแดนและชายฝั่ง ในกรณีเช่นนี้ เวอร์ชันไม่มีพรมแดนจะเหมาะกว่า
  • สไตล์เริ่มต้นเป็นดังนี้

ไม่มีเมือง

  • มีสองเวอร์ชันที่ไม่มีป้ายชื่อเมือง ได้แก่ tiny-world-nocities.js(on) (คงป้ายชื่อประเทศไว้) และ tiny-world-borders.js(on) (ละป้ายชื่อประเทศออก)
  • ป้ายชื่อเมืองกินพื้นที่ 410K แบบไม่บีบอัด และ 172K แบบบีบอัด

เมืองน้อยลง

  • สุดท้าย แต่ละไฟล์ที่มีป้ายชื่อเมืองยังมีเวอร์ชันที่รวม 2,000 เมืองและ 4,000 เมืองด้วย
  • เพียงเปลี่ยน 10000 ในชื่อไฟล์เป็น 2000 หรือ 4000
จำนวนเมืองที่รวม ประชากร
10,000 > 48,000
4,000 > 137,000
2,000 > 287,000

จ้าง tinyworldmap

  • หากต้องการแผนที่แบบกำหนดเอง (เช่น ละเอียดมากขึ้นหรือเป็นภาษาอื่น) หรือต้องการความช่วยเหลือในการติดตั้งความสามารถออฟไลน์บนเว็บไซต์ โปรดติดต่อ business@tinyworldmap.com

การแสดงที่มา

  • เช่นเดียวกับข้อมูล OpenStreetMap ข้อมูลของ tinyworldmap ได้รับอนุญาตภายใต้ ODBL จึงจำเป็นต้องแสดงที่มา
  • หากคุณทำตามขั้นตอนที่อธิบายไว้ข้างต้นแล้ว ส่วนท้ายของ Leaflet ควรมีการแสดงที่มาของทั้ง OpenStreetMap และ tinyworldmap อยู่แล้ว หากไม่เป็นเช่นนั้น ให้เพิ่มสิ่งต่อไปนี้:
© [OpenStreetMap](https://www.openstreetmap.org/copyright), [tinyworldmap](https://www.tinyworldmap.com)

ความเห็นจาก GN⁺

  • tinyworldmap นำเสนอแผนที่โลกน้ำหนักเบาที่สามารถใช้กับแผนที่ออฟไลน์หรืออุปกรณ์สเปกต่ำได้ และดูมีแนวโน้มจะเป็นโซลูชันทดแทน OpenStreetMap แบบเดิมได้
  • ข้อดีคือมีเวอร์ชันที่เบากว่าโดยเลือกตัดพรมแดน เมือง ฯลฯ ออกได้ตามต้องการ และยังสามารถใช้แผนที่แบบกำหนดเองได้ จึงดูมีความยืดหยุ่นสูง
  • อย่างไรก็ตาม การให้ทำงานแบบออฟไลน์จำเป็นต้องมีการแก้ไข service worker จึงต้องอาศัยการลงมือเชิงเทคนิคพอสมควรและเหมาะกับนักพัฒนาที่มีประสบการณ์ระดับหนึ่ง หากมีคู่มือเชิงลึกในส่วนนี้เพิ่มเติมก็น่าจะดี
  • ในเกาหลีมักมีการใช้ API แผนที่จากพอร์ทัลอย่าง Naver และ Kakao กันมาก หากสามารถเชื่อมต่อกับบริการเหล่านี้และให้ทำงานออฟไลน์ได้ ก็น่าจะมีกรณีใช้งานเพิ่มขึ้นอีกมาก
  • เนื่องจากมีข้อมูลเมืองสำคัญทั่วโลกอยู่ด้วย จึงน่าจะเป็นประโยชน์ในด้านการเดินทาง โลจิสติกส์ และงานลักษณะใกล้เคียงกัน โดยประเด็นสำคัญอีกอย่างคือการรองรับหลายภาษา

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-04-22
ความเห็นจาก Hacker News
  • ผู้เขียนเสนอว่าควรทุ่มข้อมูลให้กับแนวชายฝั่งและการแยกแยะมหานครหลัก ๆ มากกว่ารายละเอียดของพื้นที่ชานเมืองดีทรอยต์
  • มีข้อสังเกตว่ารายละเอียดของแนวชายฝั่งยังไม่เพียงพอ และในขณะที่เมืองบางแห่งในสหราชอาณาจักรถูกทำให้จมอยู่ในทะเล แต่กรีนแลนด์และแคนาดาตอนเหนือกลับกินจำนวนจุดยอดมากเกินไป ดูเหมือนว่ามีการสะท้อนการฉายแผนที่แบบ Mercator อยู่แล้ว แต่ก็ควรลดลำดับความสำคัญของพื้นที่ที่ไม่มีประชากรด้วย
  • ผู้ใช้คนหนึ่งได้สร้างแผนที่ลักษณะคล้ายกันที่เน้นการทำให้เป็นสากล (i18n) สำหรับภาษาใช้งานทางการของสหประชาชาติ (ยกเว้นภาษาสเปน) โดยเป็นแผนที่แบบออฟไลน์ก่อน ขนาดเล็กมาก และอิงเวกเตอร์ ชื่อประเทศและเมืองใช้ชื่อที่สหประชาชาติประกาศอย่างเป็นทางการ
  • มีความเห็นว่าพบว่าการตั้งถิ่นฐาน 10,000 อันดับแรกของโลกนั้นครอบคลุมไปจนถึงประชากรเพียง 48,000 คน และยังตัดสินไม่ได้ว่านี่เป็นตัวเลขที่น่าประหลาดใจหรือไม่
  • มีการประเมินว่าแนวคิดการบีบอัดข้อมูลเชิงพื้นที่ให้เป็น Path นั้นน่าประทับใจและโหลดบนมือถือได้เร็วมาก อย่างไรก็ตามก็มีข้อเสนอว่าแทนที่จะใช้ OSM ควรใช้ข้อมูลจาก Natural Earth เพื่อตัดภาระไลเซนส์ ODbL ออก และควรมีเครื่องมือสำหรับแปลงข้อมูลเชิงพื้นที่ให้เป็น Path รวมมาด้วย
  • มีความเห็นว่าควรรวมเมืองหลวงและทำเครื่องหมายเป็นพิเศษโดยไม่คำนึงถึงขนาดประชากร และอีกความเห็นหนึ่งก็มองว่าแผนที่นี้น่าจะเหมาะกับการตอบในหน้าสายพันธุ์ว่าพบสายพันธุ์นั้นได้คร่าว ๆ ที่ไหนในโลก
  • มีข้อชี้ว่าการใช้ service worker สำหรับเวอร์ชันออฟไลน์ดูแปลก และควรมีบทสอนที่กระชับกว่านี้เพื่อให้ผู้คนติดตั้งและใช้งานได้อย่างรวดเร็ว การแจกเป็นไฟล์ HTML ที่เข้ารหัสไทล์แบบ base64 หรือเป็นไฟล์ ZIP อาจดีกว่า
  • น่าสนใจที่มีการสะท้อนการเปลี่ยนชื่อที่ต้องการล่าสุดของประเทศอย่างเช็กและมาซิโดเนียแล้ว แต่ของตุรกีและติมอร์ตะวันออกยังไม่ถูกสะท้อน
  • การโหลดแบบ progressive ค่อนข้างไม่เสถียร ทำให้บางครั้งเมื่อซูม/เลื่อนอย่างรวดเร็ว ไทล์ไม่แสดงผล