1

I have a little problem. I started to learn JavaScript and Leaflet not so much time ago, and now I can work with layers, but creating controls that I need is to hard for me right now.

So, I created tile layer based on polygon shapefile (it is really big, around 14 000 000 points. GeoJSON, TopoJSON - can't display it in browser, shapefiles I prefer not to use) and now I try to recreate the bicycle again. I want to create dynamic legend. One part of legend use for detecting of color and displaying type of polygon by color (hex). Another part use for 3-5 dominate colors of chosen map in different positions. So I show some pieces of code:

1) http://jsfiddle.net/DV9Bw/1/

2) Second part is look like (As I think I can use it) http://lokeshdhakar.com/projects/color-thief/

How to create legend that I describe?

As I understand it, I should create canvas tile layer and then get pixel color...

Sorry for my English! I haven't practice for a long time =)

So... this is a part of code to get color, but it doesn't work when I change position on map... What I am doing wrong???

var map = L.map('map').setView([51.505, -0.09], 13);
var tl = L.tileLayer('http://c.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    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>',
    maxZoom: 18
}).addTo(map);
tl.on('tileload', function(tile, url){
    var top = $(tile.tile).css("top");
    var left = $(tile.tile).css("left");
    var url = $(tile.tile).attr("src");
    createCanvas(top, left, url);
}); 
var ourCustomControl = L.Control.extend({   
  options: {
    position: 'topleft' 
    //control position - allowed: 'topleft', 'topright', 'bottomleft', 'bottomright'
  },
  onAdd: function (map) {
    var container = L.DomUtil.create('div', 'leaflet-control-custom');
    return container;
  }
});
map.addControl(new ourCustomControl());
function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);   
        return { x: curleft, y: curtop };
    }   
    return undefined;
}
function rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255) {
        throw "Invalid color component";
    }
    return ((r << 16) | (g << 8) | b).toString(16);
}
$('#map').on("mousemove", "#canvas",function(e) {
    var pos = findPos(this);
    var x = e.pageX - pos.x;
    var y = e.pageY - pos.y;
    var coord = "x=" + x + ", y=" + y;
    var c = this.getContext('2d');
    var imageData = c.getImageData(0, 0, this.width, this.height);
    var pixelArray = imageData.data;      
    var p = c.getImageData(x, y, 256, 256).data; 
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1],p[2])).slice(-6);
    $('.leaflet-control-custom').html(coord + "<br>" + hex).css("background", hex);
});
function createCanvas(top, left, url){
    var canvas = $('<canvas />').attr({
        id: "canvas",
        width: 256,
        height: 256,
        class: "leaflet-tile leaflet-tile-loaded"
    });
    canvas.css("top", top);
    canvas.css("left", left);
    var ctx = $(canvas)[0].getContext('2d');
    var image = new Image();
    image.onload = function() {
        ctx.drawImage(this, 0, 0);
    };
    image.crossOrigin = "Anonymous";
    image.src = url;
    ctx.drawImage(image, 0, 0);
    $(".leaflet-tile-container").append(canvas);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.