मैं पुस्तिका पॉपअप के स्वरूप और अनुभव को कैसे अनुकूलित करूं?

Question

मैं पुस्तिका का उपयोग करके बनाए गए मानचित्र को अनुकूलित करने के लिए देख रहा हूं और मैं पॉपअप (L.popup) को कस्टमाइज़ करना चाहता हूं।

एकमात्र तरीका मैं सोच सकता हूं कि मेरे नए संवाद के साथ एक कस्टम पॉपअप परत बनाना और उपयोगकर्ता द्वारा मार्कर के साथ बातचीत करने पर हर बार इसे स्थानांतरित करना है, इस प्रकार जब उपयोगकर्ता मानचित्र को ड्रैग करता है तो पॉपअप गठबंधन रहता है।

क्या कोई इसे करने के किसी भी विकल्प या मौजूदा तरीकों से अवगत है?

धन्यवाद

Answer 1

आपको सीएसएस का उपयोग करके देखो और महसूस करना चाहिए। निम्नलिखित चयनकर्ताओं शायद दिलचस्प हैं:

.leaflet-popup-content-wrapper { 
} 

.leaflet-popup-content-wrapper .leaflet-popup-content { 
} 

.leaflet-popup-tip-container { 
} 

आपके ब्राउज़र के आधार पर आप Firefox या क्रोम/सफारी (डेवलपर टूल में निर्माण के लिए Firebug जैसे उपकरणों का उपयोग कर सकते हैं सही पृष्ठ पर कहीं भी क्लिक करें और क्लिक तत्व का निरीक्षण करें, या पॉपअप का निरीक्षण करने के लिए shortcuts का उपयोग करें) और अतिरिक्त सीएसएस चयनकर्ता ढूंढें जिन्हें आप संशोधित करना चाहते हैं।

इसकी कार्यक्षमता को विस्तारित करने के लिए आपको popup source code पर देखकर शुरू करना चाहिए। अन्य पत्रकों के घटकों के स्रोतों को तब तक देखें जब तक आपको कुछ भी नहीं हो रहा है कि क्या हो रहा है। निम्नलिखित तरीके से पॉपअप वर्ग का विस्तार, और फिर बदल जो चाहो:

L.CustomPopup = L.Popup.extend({ 
    // You changes here 
}); 

Answer 2

वहाँ MapBox पर एक उदाहरण से अधिक जो leaflet.js का उपयोग करता है। उदाहरण दिखाता है कि custom tooltip in leaflet का उपयोग कैसे करें। आप मैप में div आप bindPopup विधि के साथ मार्कर कस्टम पॉपअप सेट कर सकते हैं

<style> 
/* css to customize Leaflet default styles */ 
.popupCustom .leaflet-popup-tip, 
.popupCustom .leaflet-popup-content-wrapper { 
    background: #e0e0e0; 
    color: #234c5e; 
} 
</style> 

और उसके बाद और एक गुजर:

<style> 
/* 
* These CSS rules affect the tooltips within maps with the custom-popup 
* class. See the full CSS for all customizable options: 
* https://github.com/mapbox/mapbox.js/blob/001754177f3985c0e6b4a26e3c869b0c66162c99/theme/style.css#L321-L366 
*/ 
.custom-popup .leaflet-popup-content-wrapper { 
    background:#2c3e50; 
    color:#fff; 
    font-size:16px; 
    line-height:24px; 
    } 
.custom-popup .leaflet-popup-content-wrapper a { 
    color:rgba(255,255,255,0.5); 
    } 
.custom-popup .leaflet-popup-tip-container { 
    width:30px; 
    height:15px; 
    } 
.custom-popup .leaflet-popup-tip { 
    border-left:15px solid transparent; 
    border-right:15px solid transparent; 
    border-top:15px solid #2c3e50; 
    } 
</style> 

<div class='custom-popup' id='map'></div> 

Answer 3

पॉपअप अनुकूलित करने का एक और तरीका है की तरह पॉपअप के लिए अपने कस्टम सीएसएस वर्ग बनाने के द्वारा है customOptions वस्तु जहां उल्लेख css class name:

// create popup contents 
var customPopup = "<b>My office</b><br/><img src='http://netdna.webdesignerdepot.com/uploads/2014/05/workspace_06_previo.jpg' alt='maptime logo gif' width='150px'/>"; 

// specify popup options 
var customOptions = 
    { 
    'maxWidth': '400', 
    'width': '200', 
    'className' : 'popupCustom' 
    } 


var marker = L.marker([lat, lng], {icon: myIcon}).addTo(map); 

// bind the custom popup 
marker.bindPopup(customPopup,customOptions); 

यह आशा है कि मदद करता है.