কাস্টম লিফলেট নিয়ন্ত্রণ

Question

লিফলেটটির জন্য কাস্টম নিয়ন্ত্রণ তৈরি করতে আমার কিছুটা সহায়তা হয়েছে তবে লিফলেটটির সর্বশেষতম সংস্করণগুলি দ্বারা ব্যবহৃত সিএসএস শৈলীতে আপগ্রেড করতে আমার এখনও সমস্যা হচ্ছে। মূলত, আমার যা দরকার তা হ'ল সাদা বাক্সে একটি আইকন, এর চারপাশে ড্রপ ছায়া।

আমি এখন অবধি যা কাজ করছি তা এখানে দেখুন, একবার দেখুন এবং এটিকে কাঁটাচামচ করুন:

http://codepen.io/DrYSG/pen/zJsiG

Answer 1

বুঝেছি.

কোডপেন ডেমোটিতে একটি ডেমো দেখুন: http://codepen.io/DrYSG/pen/zJsiG

এখানে জেএস এবং সিএসএস স্নিপেটগুলি যা সম্পর্কিত কাজ করে:

L.Control.Command = L.Control.extend({
    options: {
        position: 'topleft',
    },

    onAdd: function (map) {
        var controlDiv = L.DomUtil.create('div', 'leaflet-control-command');
        L.DomEvent
            .addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
            .addListener(controlDiv, 'click', L.DomEvent.preventDefault)
        .addListener(controlDiv, 'click', function () { MapShowCommand(); });

        var controlUI = L.DomUtil.create('div', 'leaflet-control-command-interior', controlDiv);
        controlUI.title = 'Map Commands';
        return controlDiv;
    }
});

L.control.command = function (options) {
    return new L.Control.Command(options);
};

এবং সিএসএস:

.leaflet-control-command-interior
{
    background-image: url(images/command.png);
    width: 20px;
    height: 20px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block;
    padding: 3px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
    cursor: auto;
    text-align: center;
    background-color: #FFFFFF;
}

.leaflet-control-command-interior:hover
{
    background-color: #F4F4F4;
}

Comments

ঠিক যেমনটি একটি মন্তব্য সহজ বোতাম প্লাগইন ভবিষ্যতে এটির জন্য একটি ভাল রেফারেন্স তৈরি করে।

— জেসন শায়িয়ার

আরে, আমি কোডেপেন ( কোডেপেন.ওয়ে / ডিআরআইএসজি / স্পেন / জেএসজি ) তে ডেমো দেখতে পাচ্ছি না ।

— কেদার.এইটওয়াদেকার

হ্যাঁ, এটি সরানো হয়েছে। তবে কোডটি আপনার পক্ষে কাজ করা উচিত।

— ডাঃ ওয়াইএসজি

Answer 2

ডঃ ওয়াইএসজি এর উত্তর পছন্দ করুন তবে লিফলেট.ড্র সিএসএস ক্লাস ব্যবহার করে:

L.Control.RemoveAll = L.Control.extend(
{
    options:
    {
        position: 'topleft',
    },
    onAdd: function (map) {
        var controlDiv = L.DomUtil.create('div', 'leaflet-draw-toolbar leaflet-bar');
        L.DomEvent
            .addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
            .addListener(controlDiv, 'click', L.DomEvent.preventDefault)
        .addListener(controlDiv, 'click', function () {
            drawnItems.clearLayers();
        });

        var controlUI = L.DomUtil.create('a', 'leaflet-draw-edit-remove', controlDiv);
        controlUI.title = 'Remove All Polygons';
        controlUI.href = '#';
        return controlDiv;
    }
});
var removeAllControl = new L.Control.RemoveAll();
map.addControl(removeAllControl);

Comments

হ্যাঁ, এটিও কাজ করে।

— ডাঃ ওয়াইএসজি

ফ্যাব, ঠিক আমি যা খুঁজছিলাম

— ফিয়োনা - myaccessible.website

Answer 3

হ্যাঁ, সহজ বোতামটিও একটি ভাল ধারণা। আমি সম্প্রতি এটি পুনর্বিবেচনা করেছি এবং আমি এই প্রয়োজনীয়তা জেএস মডিউল (এএমডি) তৈরি করেছি যা প্লেসমেন্টটিকে প্যারামিটারাইজ করতে দেয় (কেবল কোণে নয়, একটি সঠিক অবস্থানেও) এবং এটি এইচটিএমএল ডকুমেন্ট থেকে এইচটিএমএল বিষয়বস্তু নিয়ে আসে এবং তারপরে এটি ছিন্ন করে দেয় out ডিওএম এবং এটি নিয়ন্ত্রণে রাখে। আপনি চাইলে এটি সরল করতে পারেন।

এই জাতীয় কিছু চালানো এবং এটি একটি নতুন উদাহরণ তৈরি করবে:

var zoomIn = new Button(map);
zoomIn.setup('zControl', 'zoomInCtrl', Config.ZinTop, Config.ZinLeft, "zoomIn");

...

define(['jquery', 'leaflet', 'Config', 'Tools'], function ($, L, Config, Tools) {
    function Button(Map, className, id, top, left) {
        var self = this;
        self.bbox = null;
        self.Map= Map;
        self.top = top;
        self.left = left;
        self.action = null;

        self.setup = function (className, id, top, left, action) {
            var button = L.control({
                position: 'bottomleft'
            });
            self.action = action;
            button.onAdd = function (map) {
                var box = L.DomUtil.create('div', className);
                box.innerHTML = $("#" + id).html();
                $("#" + id).remove();
                $(box).attr("id", id);
                $(box).css("position", "fixed");
                $(box).css("top", top);
                $(box).css("left", left);
                self.bbox = box;
                return box;
            };
            self.Map.MAP.addControl(button);
        }

        self.hit = function (cmd) {
            var rect = self.bbox.getBoundingClientRect();
            var box = { top: rect.top, bottom: rect.bottom, left: rect.left, right: rect.right };
            var target = Tools.outset(box, Config.ButtonOutset);
            var hit = Tools.contains(Tools.cmdToPoint(cmd), target);
            return hit;
        }

        self.pick = function (cmd) {
            $(self.bbox).addClass("large");
        }

        self.unpick = function () {
            $(self.bbox).removeClass("large");
        }

        self.invoke = function (cmd) {
            self.Map[self.action]();
        }
    }
    return Button;
});

Answer 4

লিফলেট দেখে মনে হচ্ছে.এসি বাটনের উপরে উল্লিখিত ছিল, তবে এখানে কয়েকটি উদাহরণ কোড রয়েছে:

var myImage = '<img class="button-image" src="image-for-icon.jpg"/>';

L.easyButton( myImage, function(btn,map){ 
    // your stuff to do 'on click' 
}, 'title for the button').addTo(map);

এবং কিছু সিএসএস:

.button-image{
  display: block;
  height: auto;
  margin: auto;
  max-width: 100%;
}

এবং যদি আপনি আরও অনুসন্ধান করেন তবে একগুচ্ছ ডেমোস ।