การนำ OpenstreetMap ไปทำแผนที่แสดงใน Component

ประเภทโค้ด: PHP OOP

การแสดงแผนที่บนเว็บไซต์ไม่เพียงแต่เพิ่มความน่าสนใจและความประทับใจให้กับผู้เยี่ยมชมเท่านั้น แต่ยังเป็นเครื่องมือที่มีประโยชน์ในการแสดงข้อมูลทางพื้นที่และการนำทาง ในบทความนี้เราจะสำรวจวิธีการนำ OpenStreetMap (OSM) ที่เป็นแผนที่ออนไลน์แบบเปิดตัวมาใช้ในเว็บไซต์ Joomla 3 โดยมีวัตถุประสงค์เพื่อให้ผู้ใช้สามารถรับชมแผนที่และข้อมูลทางภูมิศาสตร์ได้อย่างมีประสิทธิภาพและง่ายดาย

OpenStreetMap คืออะไร 

OpenStreetMap (OSM) เป็นโครงการที่รวมข้อมูลแผนที่ที่ถูกสร้างขึ้นโดยชุมชนและเปิดให้สาธารณชนแก้ไขและใช้งานได้ฟรี มันถูกสร้างขึ้นเพื่อเป็นแหล่งข้อมูลแผนที่และข้อมูลทางภูมิศาสตร์ที่มีความเที่ยงตรงและเปิดเผยให้คนทั่วไปใช้งานได้ตามต้องการ นอกจากนี้ OSM ยังเป็นเครื่องมือที่มีประโยชน์สำหรับการนำทาง การแสดงข้อมูลทางพื้นที่ และการสร้างแผนที่ที่กำหนดเองได้ตามความต้องการของผู้ใช้

ฟีเจอร์ของ OpenStreetMap 

1. ข้อมูลที่รวบรวมโดยชุมชน ข้อมูลใน OSM ถูกสร้างขึ้นโดยคนทั่วไปที่เข้าร่วมโครงการ ทั้งจากการระบุตำแหน่งทางภูมิศาสตร์ในแผนที่ การเพิ่มข้อมูลเกี่ยวกับถนน สถานที่ และอื่น ๆ โดยใช้แอปพลิเคชันและเครื่องมือที่เปิดให้ใช้งาน
2. ข้อมูลที่หลากหลาย OSM รวมข้อมูลทางภูมิศาสตร์ที่หลากหลาย เช่น แผนที่ถนน ข้อมูลทางน้ำ ข้อมูลภูเขา สถานที่สำคัญ และอื่น ๆ ที่สามารถใช้ในหลายๆ วัตถุประสงค์
3. การอัพเดทและการคุณภาพ ข้อมูลใน OSM มีการอัพเดทอยู่เสมอและมีความคุณภาพสูง เนื่องจากมีชุมชนผู้ใช้ที่เฝ้าสังเกตและแก้ไขข้อมูลอย่างต่อเนื่อง
4. การใช้งานหลายรูปแบบ OSM มีการใช้งานหลายรูปแบบ เช่น ผู้ใช้สามารถเข้าถึงแผนที่ผ่านเว็บไซต์ แอปพลิเคชันมือถือ และโปรแกรมคอมพิวเตอร์
5. การใช้งานส่วนบุคคลและองค์กร OSM สามารถใช้งานในการแสดงแผนที่บนเว็บไซต์ส่วนตัว หรือในองค์กรต่างๆ โดยใช้เครื่องมือที่เหมาะสม
6. การเข้าถึง API ใน OSM มี API (Application Programming Interface) ที่ช่วยให้นักพัฒนาสามารถนำข้อมูลแผนที่มาใช้ในแอปพลิเคชันหรือเว็บไซต์ที่พัฒนาขึ้นเองได้

ตัวอย่างการทำแผนที่ในตัว Component 

1. ซึ่งก่อนเริ่มเราโหลดตัวไลบรารี่ซึ่ง่เราใช้ตัวของ Leaflet js ซึ่งเป็นไลบรารี่ในการทำ OpenStreetMap ใน Component อีกตัวหนึ่งซึ่งสามารถโหลดได้ที่ลิงก์นี้
2. ให้เราทำการนำไฟล์มาใส่ในโฟลเดอร์ของ Component ของเรา ซึ่งในส่วนของโฟลเดอร์ administrator/components/com_mexample/assets และก็แบ่งโฟลเดอร์ css และ js

   

3. จากนั้นให้เราทำการเพิ่ม tag div map มาทำแผนที่นั้นเองในไฟล์ edit.php ส่วนของหน้าบ้านเรา
   ตัวอย่าง path
   components/com_mexample/views/customer/tmpl/edit.php
โค้ดที่เพิ่ม

   <?php
   /**
    * @package     M example
    * @subpackage  com_mexample
    */
   
   defined('_JEXEC') or die;
   
   JHtml::_('behavior.formvalidator');
   JHtml::_('behavior.keepalive');
   JHtml::_('formbehavior.chosen', 'select');
   
   $doc = JFactory::getDocument();
   $root = JUri::root();
   $doc->addScript($root . "administrator/components/com_mexample/assets/js/leaflet.js");
   $doc->addStyleSheet($root . "administrator/components/com_mexample/assets/css/style.css");
   $doc->addStyleSheet($root . "administrator/components/com_mexample/assets/css/leaflet.css");
   $doc->addScript($root . "components/com_mexample/assets/js/script.js");
   
   $doc->addScriptDeclaration("
   	Joomla.submitbutton = function(task)
   	{
   		if (task == 'customer.cancel' || document.formvalidator.isValid(document.getElementById('item-form'))) {
   			Joomla.submitform(task, document.getElementById('item-form'));
   		}
   	};
   ");
   
   ?>
   <form action="<?php echo JRoute::_('index.php?option=com_mexample&layout=edit&id=' . (int) $this->item->id); ?>"
       method="post" name="item-form" id="item-form" enctype="multipart/form-data" class="form-horizontal">
       <fieldset>
           <?php foreach ($this->form->getFieldset('detail') as $field): ?>
               <div class="control-group">
                   <div class="control-label">
                       <?php echo $field->label; ?>
                   </div>
                   <div class="controls">
                       <?php if ($field->id == 'jform_image' && $this->item->image): ?>
                           <img src="/<?php echo JUri::base() . 'components/com_mexample/assets/images/' . $this->item->image; ?>"
                               alt="#" style="max-width: 150px; width:100%;">
                           <br>
                       <?php endif; ?>
                       <?php echo $field->input; ?>
                   </div>
               </div>
           <?php endforeach; ?>
       </fieldset>
   
       <label for="map">
           <?php echo JText::_('COM_MEXAMPLE_ADDRESS_MAP'); ?>
       </label>
       <div class="map d-flex-map" id="map"></div>
   
       <a class="btn btn-primary" onclick="Joomla.submitbutton('customer.save')">
           <?php echo JText::_('COM_MEXAMPLE_SAVE'); ?>
       </a>
       <a class="btn" onclick="Joomla.submitbutton('customer.cancel')">
           <?php echo JText::_('COM_MEXAMPLE_CANCEL'); ?>
       </a>
       <input type="hidden" name="task" value="" />
       <?php echo JHtml::_('form.token'); ?>
   </form>​

4. จากนั้นให้เพิ่มโค้ดตกแต่ง map ที่ไฟล์ style.css

   .map {
       width: 450px;
       height: 250px;
       background-color: #2d618c;
       border: 0.25rem solid #2d618c;
       border-radius: 10%;
   }​

5. ต่อไปให้เราเขียนสคริป์ของ jQuery โดยให้เราสร้างไฟล์ที่มีชื่อว่า script.js
   ตัวอย่าง path
   components/com_mexample/assets/js/script.js

   โค้ด script.js

   jQuery(function ($) {
     var val_latitude = $('#jform_latitude').val();
     var val_longitude = $('#jform_longitude').val();
     var map = '';
     var marker = '';
     var markers = [];
   
     if (val_latitude !== '' && val_longitude !== '') {
       map = L.map("map").setView([val_latitude, val_longitude], 10);
        marker = L.marker([val_latitude, val_longitude]).addTo(map);
     } else {
       map = L.map("map").setView([13.8047478, 100.433413], 10);
       marker = L.marker([13.8047478, 100.433413]).addTo(map);
   
     }
   
     L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
       maxZoom: 19,
       attribution:
         '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
     }).addTo(map);
   
     map.on("click", onMapClick);
   
     function onMapClick(e) {
       removeAllMarkers();
       var newMarker = L.marker(e.latlng).addTo(map); 
       newMarker.bindPopup("ตำแหน่ง: " + e.latlng.toString()).openPopup(); 
       markers.push(newMarker);
       let latitude = e.latlng.lat; 
       let longitude = e.latlng.lng;
       $('#jform_latitude').val(latitude);
       $('#jform_longitude').val(longitude);
     }
   
     map.on("click", onMapClick);
   
     function removeAllMarkers() {
       map.removeLayer(marker);
       for (var i = 0; i < markers.length; i++) {
         map.removeLayer(markers[i]);
         markers = [];
       }
     }
   });​

   อธิบายการทำงานของโค้ด
   

   • เมื่อหน้าเว็บโหลดเสร็จเสมอ (เมื่อ jQuery เป็นพร้อมใช้), โค้ดที่อยู่ภายใน jQuery(function ($) { ... }); จะถูกเรียกใช้.

   • โค้ดด้านในเริ่มต้นโดยการดึงค่าละติจูดและลองจิจูดจากฟอร์ม HTML โดยใช้ $('#jform_latitude').val(); และ $('#jform_longitude').val();.

   • คำตอบจะถูกเก็บไว้ใน val_latitude และ val_longitude.

   • จากนั้นโค้ดตรวจสอบว่าค่า val_latitude และ val_longitude ไม่ว่าง (ถูกตั้งค่าจากฟอร์ม) หากมีค่าแล้ว จะสร้างแผนที่ Leaflet และ Marker ที่ตำแหน่งดังกล่าว. ถ้าไม่มีค่ากำหนดให้ใช้ตำแหน่งเริ่มต้นที่ [13.8047478, 100.433413] และสร้าง Marker ในตำแหน่งนี้.

   • จากนั้น, โค้ดทำการเพิ่มเลเยอร์แผนที่ (Tile Layer) จาก OpenStreetMap เพื่อแสดงแผนที่บนหน้าเว็บ.

   • โค้ดทำการเพิ่มการตรวจสอบเหตุการณ์คลิกบนแผนที่ (event listener) ซึ่งเรียกใช้ฟังก์ชัน onMapClick เมื่อคลิก.

   • ในฟังก์ชัน onMapClick, โค้ดทำการลบ Marker ที่มีอยู่ทั้งหมดจากแผนที่ด้วย removeAllMarkers() และสร้าง Marker ใหม่ที่ตำแหน่งที่คลิกเพื่อแสดง Popup และบันทึกละติจูดและลองจิจูดลงในฟอร์ม HTML.

   • สุดท้าย, มีฟังก์ชัน removeAllMarkers() ที่ใช้สำหรับการลบ Marker ออกจากแผนที่ หากมี Marker อยู่ใน markers และลบ Marker หลักที่เริ่มต้น.

6. ให้เราเพิ่มฟิลด์เก็บค่า longitude และ latitude
   

   ALTER TABLE IF NOT EXISTS `#__mexample_customers` ADD `latitude` DECIMAL(9,6) NOT NULL AFTER `image`, ADD `longitude` DECIMAL(9,6) NOT NULL AFTER `latitude`;​

7. และในไฟล์ customer.xml ให้เพิ่มฟิลด์ longitude และ latitude เวลาบันทึกข้อมูลลงใน Database

   <?xml version="1.0" encoding="utf-8"?>
   <form>
       <fieldset name="detail">
           <field
                   name="name"
                   type="text"
                   label="COM_MEXAMPLE_NAME"
                   description="COM_MEXAMPLE_NAME_DECS"
                   required="true"
           />
           <field
                   name="birthday"
                   type="calendar"
                   label="COM_MEXAMPLE_BIRTHDAY"
                   description="COM_MEXAMPLE_BIRTHDAY_DECS"
                   required="true"
           />
           <field
                   name="gender"
                   type="radio"
                   label="COM_MEXAMPLE_GENDER"
                   description="COM_MEXAMPLE_GENDER_DECS"
                   class="btn-group"
                   default="1"
                   >
                   <option value="1">COM_MEXAMPLE_MALE</option>
                   <option value="2">COM_MEXAMPLE_FEMALE</option>
           </field> 
           <field
                   name="age"
                   type="text"
                   label="COM_MEXAMPLE_AGE"
                   description="COM_MEXAMPLE_AGE_DECS"
                   required="true"
           />    
           <field
                   name="address"
                   type="textarea"
                   label="COM_MEXAMPLE_ADDRESS"
                   description="COM_MEXAMPLE_ADDRESS_DECS"
                   required="true"
           /> 
           <field
                   name="phone"
                   type="text"
                   label="COM_MEXAMPLE_PHONE"
                   description="COM_MEXAMPLE_PHONE_DECS"
           />
           <field
                   name="image"
                   type="file"
                   label="COM_MEXAMPLE_IMAGE"
                   description="COM_MEXAMPLE_IMAGE_DECS"
           /> 
           <field
                   name="latitude"
                   type="hidden"
           /> 
           <field
                   name="longitude"
                   type="hidden"
           />    
           <field
                   name="id"
                   type="hidden"
           />            
       </fieldset>
   </form>​

8. แล้วเพียงเท่านี้ในฟอร์มของเราก็สามารถข้อมูลที่อยู่แบบติ๊กจุดมาร์คในแผนที่ได้แล้ว

   

การนำ OpenStreetMap (OSM) มาใช้ในระบบเว็บ Joomla 3 ในการสร้างแผนที่แสดงข้อมูลทางภูมิศาสตร์ที่น่าสนใจและมีประโยชน์บนเว็บไซต์ของเรา โดยมีข้อสรุปหลักดังนี้ OSM เป็นโครงการข้อมูลแผนที่แบบเปิดตัวที่สร้างขึ้นโดยชุมชนและเปิดให้สาธารณชนใช้งานฟรี มันไม่เพียงแค่เป็นแหล่งข้อมูลแผนที่ที่เที่ยงตรงและมีคุณภาพสูง แต่ยังเป็นเครื่องมือที่ทรงพลังสำหรับการแสดงแผนที่และข้อมูลทางภูมิศาสตร์ในการนำทาง การแสดงข้อมูลทางพื้นที่ และการสร้างแผนที่ที่ปรับเพื่อตอบสนองความต้องการของผู้ใช้ และการนำ OSM เข้ามาใช้ใน Joomla 3 ช่วยให้ผู้ใช้สามารถแสดงแผนที่ที่เป็นประโยชน์และน่าสนใจบนเว็บไซต์ ไม่ว่าจะเป็นการแสดงตำแหน่งสถานที่ท่องเที่ยว การแสดงแผนที่สถิติ หรือแม้กระทั่งการแสดงแผนที่การจราจร โดยมีความยืดหยุ่นในการปรับแต่งแผนที่ให้ตรงกับสไตล์และความต้องการของเว็บไซต์ และการเรียนรู้เกี่ยวกับวิธีการเตรียมข้อมูล OSM และการนำมาแสดงใน Joomla 3 อาจเหมือนศึกษาความสามารถในการนำ OSM มาใช้ในโปรเจค เพื่อเพิ่มความมีนิยมและประโยชน์ให้กับเว็บไซต์ มันเป็นวิธีที่ดีในการเสริมสร้างประสบการณ์ผู้ใช้และการแสดงข้อมูลทางพื้นที่ที่มีค่าสำหรับเว็บไซต์