লিফলেট চিহ্নিতকরণে পপআপ অবস্থান পরিবর্তন করছেন?

Question

আমি লিফলেটে আমার চিহ্নিতকারী আইকনের নীচে একটি পপআপ খুলতে চাই।

আমার কোড:

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(mymap);

var lati = 51.51;
var longi = -0.09;

var popupLocation1 = new L.LatLng(lati, longi);
var popupContent1 = 'This is a nice popup';

popup1 = new L.Popup();
popup1.setLatLng(popupLocation1);
popup1.setContent(popupContent1);

var m1 = L.marker([ lati, longi ]).addTo(mymap);

m1.bindPopup(popup1);

m1.openPopup();

সুতরাং আমি আমার চিহ্নিতকারী এর উপরে একটি পপআপ পেতে।

আমি নীচে যেমন একটি পপআপ পেতে চাই:

Comments

এই প্রশ্ন / এ, পরীক্ষা করে দেখুন stackoverflow.com/questions/27144334/...

— artwork21

আপনার লিঙ্কে কোনও কার্যনির্বাহী সমাধান নেই। সম্ভবত মন্তব্যটি সত্য: "আপনি যা করতে পারলেন তা মার্কারের ক্লিকের দিকে ঝুঁকে পড়ে এবং কাস্টম কোডের সাথে আপনার নিজস্ব পপআপ আঁকুন" নীচের পপআপের কোনও সহজ উপায় নেই?

— জর্ড

বর্তমান পরিস্থিতি আর্টওয়ার্ক 21 এর মন্তব্য লিঙ্কের মতো, মার্কারের নীচে পপআপের জন্য আপনার প্রশ্ন সম্পর্কিত। FranceImage এর উত্তর (দেখুন stackoverflow.com/a/27144900/5108796 প্রস্তাবিত প্লাগইন সহ)। আপনার নিজের পছন্দমতো পপআপ তৈরি করতে আপনি সেই প্লাগইনটি ব্যবহার করতে পারেন বা এ থেকে অনুপ্রেরণা পেতে পারেন।

— ghybs

আমরা কী পপআপের সিএসএস পজিশনিংয়ে এটি করতে পারি না? কারণ ডিফল্টরূপে নীচের অংশে উল্লেখ করা হয়, আমরা যদি শীর্ষে স্যুইচ করি তবে এটি ঠিক হবে [একটি নির্দিষ্ট অফসেট পর্যন্ত] ফন্ট / ফন্টফাইজগুলি / লাইনহাইটগুলি বেছে নেওয়া এবং পাঠ্যের লাইনের সংখ্যা নির্বিশেষে? আমি সম্ভবত কিছু উপেক্ষা করছি।

— ব্যবহারকারী 3445853

Answer 1

আপনি popupAnchorবিকল্পগুলি ব্যবহার করে অফসেটগুলি নির্দিষ্ট করতে পারেন , তবে যেখানে আপনি এটি আশা করবেন তা নয়। প্রথমত, আপনাকে এই জাতীয় আইকন নির্দিষ্ট করতে হবে:

var myIcon = L.divIcon({ popupAnchor: [0, -30] });

তারপরে আপনি আপনার চিহ্নিতকারী বিকল্পগুলিতে এই আইকনটি ব্যবহার করতে পারেন:

var marker = L.marker(location, {
                 icon: myIcon
             }).bindPopup(function (marker) {...}); //Shortened

এখন আপনার পপআপটি আপনার চিহ্নিতকারীটির উপরে 30 পিক্সেল আপ খুলবে। এটি আপনার পপআপের শীর্ষে ছোট তীরচিহ্নটি রেখে দেওয়ার জন্য আপনি যা চেয়েছিলেন ঠিক তা নয়, তবে আমি এখনও এটি উল্লেখ করার মতো বলে মনে করি।

Comments

@ জোহান্নেসের সাম্প্রতিক [২৯ আগস্ট 2019] উত্তরের সাথে একই সমস্যা: পপআপে পাঠ্যক্রমের দ্বিতীয় বা আরও লাইন যত দ্রুত আছে এই অফসেটটি তত দ্রুত ভুল; বা সিএসএসে পরিবর্তন (ফন্ট-আকার, ফন্ট, লাইন-উচ্চতা, প্যাডিং, মার্জিন, পপআপ আকার, ...)। অতএব মূল উত্তর "কোনও দেশীয় সমাধান নেই" দাঁড়িয়েছে।

— ব্যবহারকারী 3445853

Answer 2

কোনও নেটিভ লিফলেট সমাধান নেই।

আর একটি উপায় হল https://github.com/erictheise/rrose ব্যবহার

সুন্দর ডেমো:

http://jsfiddle.net/asleepwalker/6m81vtad/

Answer 3

আমি জানি যে এটি একটি পুরানো প্রশ্ন, তবে আপনাকে তার উত্তরে বর্ণিত ডিফল্ট @ রবার্ট নেওয়ার দরকার নেই।

যেমনটি Popupউত্তরাধিকার সূত্রে প্রাপ্ত হয় DivOverlay, আপনি সূচনা করার সময় সরাসরি অফসেট বিকল্পটি সেট করতে পারেন Popup:

    var popup = L.popup({
        offset: [0, -30]
    })
      .setLatLng(location)
      .setContent("Test Text")
      .openOn(mapId);

দস্তাবেজগুলি পড়ুন: https://leafletjs.com/references-1.5.0.html#popup

Comments

এই পদ্ধতির সমস্যাটি হ'ল অফসেটের জন্য আপনার কাছে ম্যাজিক নম্বর রয়েছে: হরফ-আকার বা ফন্ট এমনকি লাইন-উচ্চতা পরিবর্তিত হলে অফসেটটি খারাপ। আরও সমস্যাযুক্তভাবে, যদি কিছু পপআপগুলিতে পাঠ্যের একটি সেকেন্ড (বা তৃতীয়, ইত্যাদি) লাইন থাকে তবে সেগুলি এখন একটি সম্পূর্ণ লাইন-উচ্চতা (বা দুটি, ইত্যাদি) খুব বেশি এবং সম্ভবত মার্কার এবং এর আশেপাশেরটিকে পুরোপুরি ওভারল্যাপ করে। আপনাকে সম্ভবত পপআপের ভিতরে পাঠ্যের উচ্চতা পরিমাপ করতে হবে এবং অফসেটটিকে গতিশীলভাবে পরিবর্তন করতে হবে এবং রেন্ডারিংয়ের সময় / পরে জেএস ব্যবহার করে এটিকে সরাতে হবে; অথবা খুব নির্দিষ্ট সিএসএস আছে এবং মার্কার যুক্ত করার আগে আপনার লিফলেট মানচিত্রের সময় এটি গণনা করুন।

— ব্যবহারকারী 3445853

Answer 4

এটি কেবল সিএসএসে সম্ভব বলে মনে হচ্ছে। আমি নীচে !importantকেবল তিনটি সিএসএস উপাদানকে (ওভাররাইড ) করছি এবং একটি :beforeছদ্ম-উপাদান যুক্ত করছি। আমি প্রথমে নীচের পরিবর্তে শীর্ষের সাথে পপআপটি আস্তে আস্তে আছি , যেখানে কেবল আপনার নির্বাচিত চিহ্নিতকারী এবং ব্যক্তিগত স্বাদের উপর নির্ভর করে।55px

তারপরে আমি পপআপের "টিপ "টিকে একইভাবে নীচ থেকে সরিয়ে নিয়ে যাই top:0pxএবং আবিষ্কার করি এটি" স্বাভাবিক "কৌশল ব্যবহার করে তৈরি করা হয়নি (এটি: বুদ্বারের প্রান্তে প্রথম অবস্থান একটি ঘন স্বচ্ছ সীমানাযুক্ত 0x0 আকারের সিউডো-উপাদান, তারপর রঙ আপনি যেখানে নির্দেশ করতে চান তার উপাদানগুলির বিপরীত সীমানা; আমাদের ক্ষেত্রে, নীচের দিকের সীমানা)। পরিবর্তে এটি মনে হয় যে কোনও আয়তক্ষেত্রটি উপরের-বাম থেকে কোথাও ঘোরানো হয়েছে (সম্ভবত: কারণ এটি ব্রাউজারকে জিপিইউ ব্যবহার করতে বাধ্য করে এবং তাই সবকিছুকে ত্বরান্বিত করে?) এবং আমি বিন্দুটি (পাপ ক্ষমা করে) ভালভাবে পাই না ( আমার টিপটি সঠিক জায়গায় তবে অদৃশ্য); সুতরাং আমি ঠিক বাক্সের ছায়াটি এখন ভুল জায়গায় সরিয়ে ফেললাম এবং এটিকে ঠিক যেমন রেখেছি --- যে কেউ "পুরাতন টিপ" বোঝে দয়া করে এটিকে সামঞ্জস্য করুন।

সুতরাং পরিবর্তে আমি "স্বাভাবিক" প্রক্রিয়াটি দিয়ে আমার নিজস্ব টিপ তৈরি করি (যদি আপনি নিশ্চিত না হন তবে 3x স্বচ্ছ এবং 1x সাদা --- এর পরিবর্তে নীচে চারটি সীমানা রঙ পরিবর্তন করুন border-bottom-color: blue; border-left-color: green; border-top-color: yellow' border-right-color: red)।

#map {
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   z-index: 0;
}
.leaflet-popup {top: 55px !important;}
/* Here I move the "tip" to the right location, but didn't succeed in making it visible. So I just remove the box-shadow and leave it: */
.leaflet-popup-tip-container {
   top: 0px !important;
}
.leaflet-popup-tip {
   box-shadow: none !important;
}
.leaflet-popup:before 
    {
    content: "";
    position: absolute;
    border: 13px solid transparent;
    border-bottom-color: white;
    bottom: 0px;
    margin-left: -13px;
}

যেহেতু এই JSFiddle প্রমান (বিভিন্ন প্রস্থ, বিভিন্ন textheight) বিভিন্ন পপআপ-আকারের সঙ্গে কোন সমস্যা নেই আপনি উভয় চিহ্নিতকারী চেষ্টা করে।

এই সমস্ত কিছুই লিফলেটের আপডেটগুলির বিরুদ্ধে দৃ seems় বলে মনে হচ্ছে কারণ আমি যে আইটেমগুলিকে ওভাররেড করছি সেগুলি পরিবর্তন হওয়ার সম্ভাবনা বলে মনে হচ্ছে না।