I have a leaflet map which consists of a tile layer and above an imageOverlay which is semi transparently showing temperature distribution as colored areas. The Overlay is placed at certain bounds within the tile layer.
When I click somewhere on the the overlay, I want to figure out what color the pixel at that point has.
My problem is to project the clicked position onto the imageOverlay respecting the offset of the imageOverlay to the visible map and the zoom level. Eventually I want to get the pixel coordinates at the image (at it's natural resolution)
The code roughly looks like this:
var imgUrl = 'https://somewhere.somewhere/myImage.png';
var tilesUrl = 'https://somewhere.somewhere/{z}/{x}/{y}.png';
var tilesBounds = [...];
var imgBounds = [...];
var latlng = [...];
var mymap = L.map('mapid').setView(latlng, 9);
L.tileLayer(tilesUrl, {
attribution: 'TILES',
maxZoom: 12,
minZoom: 7,
id: 'tiles',
tms: true,
maxBounds: tilesBounds
}).addTo(mymap);
var imgOverlay = L.imageOverlay(imgUrl, imgBounds {
attribution: 'dataimg',
opacity: '0.4',
id: 'dataImg',
interactive: true
}).addTo(mymap);
imgOverlay.on('click',
(e) => {
var x = ???;
var y = ???;
var color = getColorAt(x, y);
}
)
One possible solution would be to
get the coordinates of the mouse relative to the image at its current size
and then cross multiply to determine the coordinates relative to the original size of the image
For example, imgWidth and imgHeight being the original dimensions of the image:
imgOverlay.on('click', (leafletEvent) => {
// see https://stackoverflow.com/a/42111623/1071630
var e = leafletEvent.originalEvent;
var rect = e.target.getBoundingClientRect();
var zoomedX = e.clientX - rect.left; //x position within the element.
var zoomedY = e.clientY - rect.top; //y position within the element
const x = Math.round(zoomedX * imgWidth / rect.width);
const y = Math.round(zoomedY * imgHeight / rect.height);
console.log(x, y);
});
var map = L.map('map').setView([48.854, 2.2922926], 14);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
const bounds = [[48.85, 2.28], [48.86, 2.29]]
const imgOverlay = L.imageOverlay('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Tour_Eiffel_en_mai_2014.JPG/450px-Tour_Eiffel_en_mai_2014.JPG', bounds, {
attribution: 'Nicolas Halftermeyer / CC BY-SA (https://creativecommons.org/licenses/by-sa/3.0)',
id: 'dataImg',
interactive: true
}).addTo(map);
const imgWidth = 450, imgHeight = 600;
imgOverlay.on('click', (leafletEvent) => {
// see https://stackoverflow.com/a/42111623/1071630
var e = leafletEvent.originalEvent;
var rect = e.target.getBoundingClientRect();
var zoomedX = e.clientX - rect.left; //x position within the element.
var zoomedY = e.clientY - rect.top; //y position within the element
const x = Math.round(zoomedX * imgWidth / rect.width);
const y = Math.round(zoomedY * imgHeight / rect.height);
document.getElementById('log').innerHTML+= x+","+y+"<br>";
});
#map {width: 400px; height: 200px;}
#log {position: absolute; top: 0; right:10px; width: 100px;}
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css" rel="stylesheet"/>
<div style='position: relative'>
<div id="map"></div>
<div id='log'></div>
</div>
Related
Is possible to draw a curve line between 2 near points in leaflet, for example with these coordinates:
point_1 = (23.634501, -102.552783)
point_2 = (17.987557, -92.929147)
Thanks.
As #Wrokar implied this can be achieved using Leaflet.curve library. You can simply use the code provided by this gist and replace your coordinates with the ones defined in variable latlng1 & latlng2 respectively.
var latlng1 = [LATITUDE, LONGTITUDE],
latlng2 = [LATITUDE, LONGTITUDE];
Here is a working example:
var map = L.map('mapid').setView([51.505, -10], 1);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var latlngs = [];
var latlng1 = [23.634501, -102.552783],
latlng2 = [17.987557, -92.929147];
var offsetX = latlng2[1] - latlng1[1],
offsetY = latlng2[0] - latlng1[0];
var r = Math.sqrt(Math.pow(offsetX, 2) + Math.pow(offsetY, 2)),
theta = Math.atan2(offsetY, offsetX);
var thetaOffset = (3.14 / 10);
var r2 = (r / 2) / (Math.cos(thetaOffset)),
theta2 = theta + thetaOffset;
var midpointX = (r2 * Math.cos(theta2)) + latlng1[1],
midpointY = (r2 * Math.sin(theta2)) + latlng1[0];
var midpointLatLng = [midpointY, midpointX];
latlngs.push(latlng1, midpointLatLng, latlng2);
var pathOptions = {
color: 'red',
weight: 3
}
var curvedPath = L.curve(
[
'M', latlng1,
'Q', midpointLatLng,
latlng2
], pathOptions).addTo(map);
body {
padding: 0px;
margin: 0px;
}
#mapid {
height: 300px;
}
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet#1.3.3/dist/leaflet.css">
<script src="https://unpkg.com/leaflet#1.3.3/dist/leaflet.js"></script>
<script src="https://elfalem.github.io/Leaflet.curve/src/leaflet.curve.js"></script>
<div id="mapid"></div>
I have radar raster on my map and i want to show the data color of the radar by the position of the cursor.
An example of a radar
I'm trying to get context of a mapbox canvas by map.getCanvas().getContext('2d') but it returns null.
Is there a way to do that?
You can obtain the canvas context (webgl) this way and inspect colors.
map.on("mousemove", e => {
const canvas = map.getCanvas();
const gl = canvas.getContext('webgl') || canvas.getContext('webgl2');
if (gl) {
const { point } = e;
const { x, y } = point;
const data = new Uint8Array(4);
const canvasX = x - canvas.offsetLeft;
const canvasY = canvas.height - y - canvas.offsetTop;
gl.readPixels(canvasX, canvasY, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, data);
const [r, g, b, a] = data;
const color = `rgba(${r}, ${g}, ${b}, ${a})`;
console.log(`Color at (${x}, ${y}) = ${color}`);
}
});
I had to set map option preserveDrawingBuffer to true to be able to get pixel values.
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/light-v10",
zoom: 4,
center: [77.209, 28.6139],
preserveDrawingBuffer: true
});
This codepen implements a simple color inspector: https://codepen.io/manishraj/full/jONzpzL
Use GL buffer's location rather than mouse's screen coordinates.
As mentioned in the comment on Manish's very good answer, the codepen is not working because it is using the mouse location while it should use the location on the WebGL buffer, as shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1" />
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.css" rel="stylesheet"/>
</head>
<style>
#map canvas {
cursor: crosshair;
}
</style>
<body>
<div
id="map"
style="position: absolute; top: 0px; bottom: 0px; width: 100%;">
</div>
<div
id="colorPicker"
style="height:30px; width:30px; position: absolute; top: 30px; left: 30px; z-index: 999;
border: 3px solid white;">
</div>
<script>
mapboxgl.accessToken =
"pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA";
const map = new mapboxgl.Map({
container: "map",
style: 'mapbox://styles/mapbox/satellite-v9',
zoom: 4,
center: [77.209, 28.6139],
preserveDrawingBuffer: true
});
window.map = map;
map.on("load", () => {
const colorStyle = document.getElementById("colorPicker").style;
map.on("click", e => {
const canvas = map.getCanvas();
const gl = canvas.getContext("webgl") || canvas.getContext("webgl2");
if (gl) {
const data = new Uint8Array(4);
// Canvas width and hwight is what you see on the screen
const canvasWidth = parseFloat(canvas.style.width, 10);
const canvasHeight = parseFloat(canvas.style.height, 10);
// e.point.x and y, specifying the horizontal and vertical pixels read from the lower left corner of the screen
canvasX = e.point.x;
canvasY = e.point.y;
// WenGL buffer is larger than canvas, there
const bufferX = (gl.drawingBufferWidth / canvasWidth * canvasX).toFixed(0);
const bufferY = (gl.drawingBufferHeight / canvasHeight * (canvasHeight - canvasY)).toFixed(0);
gl.readPixels(
bufferX,
bufferY,
1,
1,
gl.RGBA,
gl.UNSIGNED_BYTE,
data
);
const [r, g, b, a] = data;
const color = `rgba(${r}, ${g}, ${b}, ${a})`;
colorStyle.backgroundColor = color;
console.log (`Canvas size (w/h): ${canvasWidth}/${canvasHeight}`);
console.log (`Buffer size (w/h): ${gl.drawingBufferWidth}/${gl.drawingBufferHeight}`);
console.log (`Point on Canvas (x/y): ${canvasX}/${canvasY}`);
console.log (`Point on Buffer (x/y): ${bufferX}/${bufferY}`);
console.log (`Color: ${color}`);
}
});
});
</script>
</body>
</html>
I am trying to flip a group (horizontally) using Konvajs.Following the advice of this post, I am using the scaleX property. This works---mostly. However, it doesn't flip around the center.
function reverse(shape){
var layer = shape.getLayer();
var oldScaleX = shape.attrs.scaleX;
var width = shape.getClientRect().width;
var adjuster = oldScaleX * width;
var startX = shape.attrs.x + adjuster;
var startY = shape.attrs.y;
shape.scaleX(-oldScaleX);
shape.position({x: startX, y: startY});
layer.draw();
};
I tried using the offsetX and offsetY properties like in this post, but it doesn't seem to do anything.
shape.offsetX(shape.width()/2);
shape.offsetY(shape.height()/2);
shape.x(shape.x() - shape.attrs.offsetX);
shape.y(shape.y() - shape.attrs.offsetY);
The shapes will flip initially, but if they are rotated first, they tend to jump around.
Codepen
Based on my function posted in this other question, here is a snippet to rotate a shape around its centre. In this case the shape is a group composed of 2 rects but any shape will work.
// Set up the canvas / stage
var stage = new Konva.Stage({container: 'container', width: 600, height: 200});
var layer = new Konva.Layer({draggable: false});
stage.add(layer);
var shape = new Konva.Group({x: 80, y: 40, width: 60, height: 60 });
var r1 = new Konva.Rect({ x:10, y:10, width: 70, height: 40, fill: 'cyan'})
var r2 = new Konva.Rect({ x:50, y:10, width: 40, height: 100, fill: 'cyan'})
shape.add(r1)
shape.add(r2)
layer.add(shape)
// set the group rotate point. Note - x,y is relative to top-left of stage !
var pos = shape.getClientRect();
RotatePoint(shape, {x: pos.x + pos.width/2, y: pos.y + pos.height/2});
stage.draw();
// This is where the flip happens
var scaleX = 1, inc = -0.2; // set inc = 1 for full flip in one call
function flipShape(){
scaleX = scaleX + inc;
shape.scaleX(scaleX); // and that's it
// fun with colors on front and back of shape
r1.fill(scaleX < 0 ? 'magenta' : 'cyan');
r2.fill(scaleX < 0 ? 'magenta' : 'cyan');
$('#info').html('Set ScaleX(' + scaleX.toFixed(2) + ')'); // What's happening?
layer.draw(); // show the change
inc = (scaleX % 1 === 0 ? -1 * inc : inc); // decide next increment, reversed at 1 & -1
}
$('#flip').on('click', function(e){
flipShape(); // click button - flip shape a bit
})
/*
Set the offset for rotation to the given location and re-position the shape
*/
function RotatePoint(shape, pos){ // where pos = {x: xpos, y: yPos}
var initialPos = shape.getAbsolutePosition();
var moveBy = {x: pos.x - initialPos.x, y: pos.y - initialPos.y};
// offset is relative to initial x,y of shape, so deduct x,y.
shape.offsetX(moveBy.x);
shape.offsetY(moveBy.y);
// reposition x,y because changing offset moves it.
shape.x(initialPos.x + moveBy.x);
shape.y(initialPos.y + moveBy.y);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.js"></script>
<p>Clck the button to progressively flip a shape using scaleX <button id='flip'>Flip a bit</button> <span id='info'></span></p>
<div id='container' style="position: absolute; top: 0; z-index: -1; display: inline-block; width: 600px, height: 200px; background-color: silver; "></div>
I use javascript (not jQuery).
In short
Filled circle
Transparent behind the circle
Number centered in the middle
These values need to be easy to change:
Radius
Background color
Font size
Font family
It should not care if the number will break the circle.
Reason
The reason for me needing this is I have a Google map. It has a lot of markers with different numbers and colors. I found a script that works (in Chrome) but it needed D3 in order to work.
It seems like this is a simple task. That's why I hope I could leave D3 in this case.
Update
Here is my current code. I've read some more and maybe it would be possible to do it with SVG. What ever works.
var karta = (function () {
var fn = {};
var map;
var latitude;
var longitude;
var zoom;
var cache = {};
var colors = [];
var height = 75;
var width = 75;
// Init
fn.init = function(options) {
console.log(options);
markers = options.markers;
latitude = options.latitude;
longitude = options.longitude;
zoom = options.zoom;
colors = fn.setColors();
fn.setMap();
fn.setMarkers();
console.log(options);
};
// Set map
fn.setMap = function() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: zoom,
center: {
lat: latitude,
lng: longitude
},
mapTypeId: 'satellite',
mapTypeControl: false,
zoomControl: false,
streetViewControl: false,
});
};
// Set markers
fn.setMarkers = function() {
var mytest = '<svg height="32" width="32"><foreignObject width="32" height="32" x="16" y="16" transform="translate(-16,-16)"><div class="circle" style="background: blue; border-radius: 100%; text-align: center; line-height: 32px; font-size: 12px;"><span style="display: inline-block; vertical-align: middle; color: #fff; font-weight: bold;">180</span></div></foreignObject></svg>';
var myurl = 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(mytest);
console.log(myurl);
markers.forEach( function( point ) {
fn.icon( point[0], function(src) {
new google.maps.Marker({
position: new google.maps.LatLng( point[1], point[2] ),
map: map,
icon: {
url: myurl,
anchor: new google.maps.Point(25, 25),
origin: new google.maps.Point(0, 0),
scaledSize: new google.maps.Size(50, 50)
}
});
});
});
};
// Set colors
fn.setColors = function() {
colors[65] = "E50000";
colors[80] = "E52500";
colors[95] = "E54A00";
colors[110] = "E56F00";
colors[125] = "E59400";
colors[140] = "B79B00";
colors[155] = "89A200";
colors[170] = "5CA900";
colors[185] = "2EB000";
colors[250] = "00B700";
return colors;
};
// Set circle
fn.setCircle = function(svg, number) {
var circles = svg.append('circle')
.attr('cx', '27.2')
.attr('cy', '27.2')
.attr('r', '12')
.style('fill', colors[number]);
return circles;
};
// Set label
fn.setLabel = function(svg, number) {
var label = svg.append('text')
.attr('dx', 27)
.attr('dy', 32)
.attr('text-anchor', 'middle')
.attr('style', 'font-size: 12px; fill: #FFFFFF; font-family: Arial, Verdana; font-weight: bold')
.text(number);
return label;
};
// Set svg
fn.setSvg = function(number) {
var svg = d3.select(document.createElement('div')).append('svg')
.attr('viewBox', '0 0 54.4 54.4')
.append('g')
fn.setCircle(svg, number);
fn.setLabel(svg, number);
return svg;
};
// Set image
fn.setImage = function(number, node, callback) {
var image = new Image();
image.onload = (function(width, height) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var dataURL;
d3.select(canvas)
.attr('width', width)
.attr('height', height);
context.drawImage(image, 0, 0, width, height);
dataURL = canvas.toDataURL();
generateIconCache[number] = dataURL;
callback(dataURL);
}).bind(this, width, height);
var xmlSource = (new XMLSerializer()).serializeToString(node);
image.src = 'data:image/svg+xml;base64,' + btoa(encodeURIComponent(xmlSource).replace(/%([0-9A-F]{2})/g, function(match, p1) {
return String.fromCharCode('0x' + p1);
}));
};
// Icon
fn.icon = function( number, callback ) {
if( cache[number] !== undefined ) {
callback( cache[number] );
}
var svg = fn.setSvg(number);
var node = svg.node().parentNode.cloneNode(true);
d3.select(node).select('clippath').remove();
fn.setImage(number, node, callback);
}
return fn;
})();
Scaling text to fit a circle.
To scale text to fit a circle you need to find the angle of the diagonal line across the text. To get that you need the font height and the font width. The font height is in the font attribute of the 2D context. Eg "18px Arial" and the font width can be calculated using the 2D context textWidth = ctx.measureText(text).width.
once you have the font width and the font height you can get the diagonal angle with textDiag = Math.atan(fontheight / fontWidth) . This will be the angle where on the circle the corner of the text will touch the side.
We can draw a line from that point on the circle circumference to the horizontal line through the middle of the circle to give us the location of right edge of the text. You get that with halfWidth = Math.cos(textDiag) * radius The total text width should be twice that.
As it is a real pain to find a point size to match a given text width, it is easier just to scale the text using the context transformation matrix.
The scale is simply the required text width divided by then known text width. fontScale = halfWidth * 2) / textWidth then set the transform ctx.setTransform(fontScale,0,0,fontScale,r,r) (r is the radius or center of circle) and draw the text ctx.filltext(text,0,0) with the textAlign and textBaseline 2d context attributes set to "center" and "middle" respectively
The example show this in action by creating a simple text circle img that can be drawn on another canvas, or just added to the DOM as an image. The two properties number and radius set the number to display and the size in pixels. The demo shows it being created and drawn onto a canvas with the number increasing to show how it scales.
// creates a circle image object
// Function arguments.
// radius is the you know ....
// number is the value to display in the circle
// style is this style
// style.color the circle colour. Defaults to "red";
// style.font the font. Defaults to '18px arial';
// style.fontColor is the font colour. Defaults to "white";
// style.fit if true then the number is made to fit te circle as best it can. Defaults to true
// style.decimals number of decimal places to display. Defaults to 0
//
// returns
// Html canvas element with the following custom attributes
// ctx the 2D context
// number the value to display
// radius the radius
// displayStyle the referance to the style arrgument passed when createCircleNumberImage
// was called
// draw the function used to render the image. This function has no arguments
// use the displayStyle atrribute to set the style
function createCircleNumberImage(radius,number,style){
// create HTML 5 image element
img = document.createElement("canvas");
// size it
img.width = Math.ceil(radius * 2);
img.height = Math.ceil(radius * 2);
// get a drawing context
img.ctx = img.getContext("2d");
// set custom attributes
img.radius = radius;
img.number = number;
img.displayStyle = style;
// set defaults
style.color = style.color ? style.color : "red";
style.font = style.font ? style.font : '18px arial';
style.fontColor = style.fontColor ? style.fontColor : "white";
style.fit = style.fit === undefined ? true : style.fit;
style.decimals = style.decimals === undefined || isNaN(style.decimals) ? 0 : style.decimals;
// add draw function
img.draw = function(){
var fontScale, fontWidth, fontSize, number;
// resize
this.width = Math.ceil(this.radius * 2);
this.height = Math.ceil(this.radius * 2);
// clear (incase resize did not do it)
this.ctx.clearRect(0,0,this.width,this.height);
// draw the circle
this.ctx.fillStyle = this.displayStyle.color;
this.ctx.beginPath();
this.ctx.arc(radius,radius,radius,0,Math.PI * 2);
this.ctx.fill();
// setup the font styles
this.ctx.font = this.displayStyle.font;
this.ctx.textAlign = "center";
this.ctx.textBaseline = "middle";
this.ctx.fillStyle = this.displayStyle.fontColor;
// get the value to display
number = this.number.toFixed(this.displayStyle.decimals);
// get the font size
fontSize = Number(/[0-9\.]+/.exec(this.ctx.font)[0]);
if(!this.displayStyle.fit || isNaN(fontSize)){ // Dont fit text or font height unknown
this.ctx.fillText(number,radius,radius);
}else{
// fit font as based on the angle from text center to bottom right
fontWidth = this.ctx.measureText(number).width;
fontScale = Math.cos(Math.atan(fontSize/fontWidth)) * this.radius * 2 / fontWidth;
this.ctx.setTransform(fontScale,0,0,fontScale,this.radius,this.radius);
this.ctx.fillText(number,0,0);
this.ctx.setTransform(1,0,0,1,0,0); // restor the transform
}
if(!this.displayStyle.fit || isNaN(fontSize)){ // Dont fit text or font height unknown
this.ctx.fillText(number,radius,radius);
}else{
fontScale = Math.cos(Math.atan(fontSize/fontWidth)) * this.radius * 2 / fontWidth;
this.ctx.setTransform(fontScale,0,0,fontScale,this.radius,this.radius);
this.ctx.fillText(number,0,0);
this.ctx.setTransform(1,0,0,1,0,0); // restor the transform
}
// return this so you can call the draw function from within a canvas drawImage function
return this;
}
// draw first time
img.draw()
// return new image
return img;
}
var canvas = document.createElement("canvas");
canvas.width = 320;
canvas.height = 200;
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
// set comments above the function declaration for help
var sun = createCircleNumberImage (
60,1,{
fontColor : "white",
font : "24px arial",
color : "#EE0",
fit : true,
decimals : 0,
}
)
function doAgain(){
ctx.fillStyle = "black";
ctx.fillRect(0,0,canvas.width,canvas.height/2)
ctx.fillStyle = "Red";
ctx.fillRect(0,canvas.height /2 ,canvas.width,canvas.height/2)
if(sun.number > 5000000000){
sun.number = 0;
}
sun.number = sun.number + Math.floor(sun.number/10) + 1;
ctx.drawImage(sun.draw(),ctx.canvas.width / 2 - sun.radius,ctx.canvas.height / 2 - sun.radius);
setTimeout(doAgain,200);
}
doAgain();
At the moment I make website for a company who wants a custom map on their page. This map is a big a vector map drawn by a graphic designer. So I use leaflet for this but I have an issue. I make it full screen. The issue is I set the bounds and everything and it works on all side except the bottom so when i start moving up and it not goes back to the bottom. The funny thing if I resize the window so for example I make it small and after back to full window size the bottom part works perfectly.
Here is my code so far:
var winh = $(window).height();
var winw = $(window).width();
var maph = $('#map').height();
var mapw = $('#map').width();
var offset = $('#map').offset();
var centerX = offset.left + mapw / 2;
var centerY = offset.top + maph / 2;
var changem = false;
var cbut = $('#building');
var southWest = new L.LatLng(winh, 0);
var northEast = new L.LatLng(0, winw);
var bounds = L.latLngBounds(southWest, northEast);
var map = L.map('map', {
maxBounds: bounds,
maxZoom: 2,
minZoom: 0,
crs: L.CRS.Simple
}).setView([winh, winw], 0);
// .setView([winh, winw], 0)
map.setMaxBounds(bounds);
// map.panTo(new L.LatLng(centerY,centerX));
// ----------------------------------
// Load the images for the map
// ----------------------------------
var imageUrl = 'http://rigailoveyou.exflairdigital.com/public/img/houses.png'
var imageUrl2 = 'http://rigailoveyou.exflairdigital.com/public/img/road.png'
var imageBounds = [[winh,0], [0,winw]];
var map1 = L.imageOverlay(imageUrl, bounds,'Riga I Love You').addTo(map);
var map2 = L.imageOverlay(imageUrl2, bounds).addTo(map);