Inject GPX link to Kakao MAP

inject_gpx_link_to_kakao_map.user.js

// ==UserScript==
// @name         Inject GPX link to Kakao MAP
// @namespace    https://map.kakao.com
// @updateURL    https://gist.github.com/d3m3vilurr/90b85ebb18ac27236d8799ee131ae294/raw/inject_gpx_link_to_kakao_map.user.js
// @downloadURL  https://gist.github.com/d3m3vilurr/90b85ebb18ac27236d8799ee131ae294/raw/inject_gpx_link_to_kakao_map.user.js
// @version      0.4
// @description  try to take over the world!
// @author       Sunguk Lee <[email protected]>
// @match        https://map.kakao.com/*
// @exclude      https://map.kakao.com/mapclick.html*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=kakao.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // hack restore console log
    //var i = document.createElement('iframe');
    //i.style.display = 'none';
    //document.body.appendChild(i);
    //window.console = i.contentWindow.console;

    function makeGPXXML(title, routes, guides) {
        const lines = [
            '<?xml version="1.0" encoding="UTF-8"?>',
            '<gpx xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.topografix.com/GPX/1/1" xmlns:gpxdata="http://www.cluetrust.com/XML/GPXDATA/1/0" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd http://www.cluetrust.com/XML/GPXDATA/1/0 http://www.cluetrust.com/Schemas/gpxdata10.xsd" version="1.1" creator="http://ridewithgps.com/">',
            '  <metadata>',
            `    <name>${title}</name>`,
            `    <time>${new Date().toISOString()}</time>`,
            '  </metadata>',
            '  <trk>',
            `    <name>${title}</name>`,
            '    <trkseg>',
        ];
        for (const route of routes) {
            lines.push(`      <trkpt lat="${route.lat}" lon="${route.lon}"></trkpt>`);
        }
        lines.push('    </trkseg>');
        lines.push('  </trk>');
        lines.push('  <rte>');
        lines.push(`    <name>${title}</name>`);
        for (const wpt of guides) {
            lines.push(`    <rtept lat="${wpt.lat}" lon="${wpt.lon}">`);
            lines.push(`      <name>${wpt.name}</name>`);
            lines.push(`      <desc>${wpt.desc}</desc>`);
            lines.push('    </rtept>');
        }
        lines.push('  </rte>');
        //for (const wpt of guides) {
        //    lines.push(`  <wpt lat="${wpt.lat}" lon="${wpt.lon}">`);
        //    lines.push(`    <name>${wpt.name}</name>`);
        //    // lines.push(`    <desc>${wpt.desc}</desc>`);
        //    lines.push('  </wpt>');
        //}
        lines.push('</gpx>');
        return lines.join('\n');
    }

    function coords2latlon(x, y) {
        const coords = new kakao.maps.Coords(x, y);
        const latlng = coords.toLatLng();
        return {lat: latlng.getLat(), lon: latlng.getLng()};
    }

    function handleToMakeGPXLink(data) {
        const kakaoRoutes = jQuery('div.bikeroute li.BikeRouteItem');

        for (const idx in data.directions) {
            const direction = data.directions[idx];
            const kakaoRoute = jQuery(kakaoRoutes[idx]);
            const guides = [];
            const routes = [];
            if (!direction.sections) {
                continue;
            }
            for (const section of direction.sections) {
                for (const guide of section.guideList) {
                    // console.log(guide);
                    const latlon = coords2latlon(guide.x, guide.y);
                    guides.push({
                        name: guide.guideMent,
                        lat: latlon.lat,
                        lon: latlon.lon,
                    });
                    if (!guide.link || !guide.link.points) {
                        continue
                    }
                    for (const point of guide.link.points.split('|')) {
                        const [x, y, z] = point.split(',').map((v) => parseFloat(v));
                        const latlon = coords2latlon(x, y);
                        if (routes.length && routes[routes.length - 1].lat === latlon.lat && routes[routes.length - 1].lon == latlon.lon) {
                            continue;
                        }
                        routes.push(latlon);
                    }
                }
            }
            // console.log('routes:', routes);
            // console.log('guides:', guides);
            const waypoints = jQuery('.WaypointBoxView input.valueBox').toArray().map((v) => jQuery(v).attr('value').trim());
            // console.log(waypoints);
            const title = waypoints.join('→');
            const filename = [waypoints[0], waypoints[waypoints.length - 1]].join('_');
            const xml = makeGPXXML(title, routes, guides);
            const elem = document.createElement('a');
            elem.setAttribute('href', 'data:text/plain;charset=utf-8,'+encodeURIComponent(xml));
            elem.setAttribute('download', `${filename}.gpx`);
            elem.innerHTML = '<img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Gpx_icon.png" width="24" height="24" />'

            const span = document.createElement('span');
            span.classList.add('gpx_download');
            span.classList.add('distance'); // for left margin
            span.appendChild(elem);
            // console.log(elem);
            kakaoRoute.find('p.header').append(span);
        }
    }

    window.jQuery.origAjax = window.jQuery.ajax;
    window.jQuery.ajax = function ajax(...args) {
        let url;
        let setting;
        if (typeof(args[0]) === 'string') {
            url = args[0];
            setting = args[1];
        } else {
            setting = args[0];
            url = args[0].url;
        }
        // console.log(url, setting.dataType);
        if (url.includes('bikeset.json')) {
            setting.origSuccess = setting.success;
            setting.success = function(data, status, xhr) {
                const ret = setting.origSuccess(data, status, xhr);
                handleToMakeGPXLink(data);
                return ret;
            }
        }
        return this.origAjax(...args);
    }
})();