NOTICE: By continued use of this site you understand and agree to the binding Terms of Service and Privacy Policy.
// ==UserScript== // @name OpenStreetMap on rent.591.com.tw // @namespace https://github.com/gslin/openstreetmap-on-rent.591.com.tw // @match https://rent.591.com.tw/home/* // @grant GM_xmlhttpRequest // @version 0.20210617.0 // @author Gea-Suan Lin <gslin@gslin.com> // @description Embed OpenStreetMap on rent.591.com.tw. // @require https://unpkg.com/leaflet@1.7.1/dist/leaflet.js // @license MIT // ==/UserScript== (() => { 'use strict'; let sem = 0; let ob = new window.MutationObserver(mutations => { mutations.forEach(mutation => { mutation.addedNodes.forEach(node => { if (sem > 0) { return; } let addr_el = document.querySelector('div.address'); if (!addr_el) { return; } // Uninstall ob.disconnect(); sem++; let addr = addr_el.innerText; let url = 'https://nominatim.openstreetmap.org/search?q=' + encodeURIComponent(addr) + '&format=json'; GM_xmlhttpRequest({ method: 'GET', onload: res => { let r = JSON.parse(res.responseText); let r0 = r[0]; // leaflet css let leaflet_css_el = document.createElement('link'); leaflet_css_el.setAttribute('href', 'https://unpkg.com/leaflet@1.7.1/dist/leaflet.css'); leaflet_css_el.setAttribute('rel', 'stylesheet'); document.getElementsByTagName('head')[0].appendChild(leaflet_css_el); // leaflet map element let map_el = document.createElement('div'); map_el.setAttribute('style', 'height: 400px; width: 800px;'); addr_el.insertAdjacentElement('afterend', map_el); let map = L.map(map_el).setView([r0.lat, r0.lon], 17); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); // L.marker([r0.lat, r0.lon]).addTo(map).bindPopup('House').openPopup(); }, url: url, }); }); }); }); ob.observe(document, { childList: true, subtree: true, }); })();