How to set image with imageOverlay without resize in LeafletJs - javascript

I have a image on a map, in image Overlay i set bounds (left superior and right inferior) but the image have some kind of strech, it is is higher than wide and the original image is square (558x558), I put markers where the bounds should go. l can´t resolve these problem. Thanks alot.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Pruebas2</title>
<!-- LEAFLET -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js"></script>
<!-- Estilos -->
<link rel="stylesheet" href="estilos.css">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="contenedorMapa" style="width: 100%"></div>
<script> /*MAPA EN TODA LA PANTALLA*/ $('#contenedorMapa').height(window.innerHeight);
</script>
<script> // TIPOS DE MAPAS
var map = L.map('contenedorMapa').setView([22.387672, -97.925450], 7);
//[21.893950, -101.440188]
var googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3'],
attribution: ''
}).addTo(map);
</script>
<script>
var marker13 = L.marker([25.078983, -100.772610]).addTo(map)
.bindPopup('supe-iz');
var marker13 = L.marker([19.696318, -95.078198]).addTo(map)
.bindPopup('inf-der');
</script>
<script>
var imageUr6 = 'ecos/altamira/ppi3/ULTIMA.gif';
var bordes6 = [[25.078983, -100.772610], [19.696318, -95.078198]];
var imagen6 = L.imageOverlay(imageUr6, bordes6, {
opacity: 0.7
}).addTo(map);
</script>
</body>
</html>


Please check your image. It works for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Pruebas2</title>
<!-- LEAFLET -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js"></script>
<!-- Estilos -->
<link rel="stylesheet" href="estilos.css">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="contenedorMapa" style="width: 100%"></div>
<script> /*MAPA EN TODA LA PANTALLA*/ $('#contenedorMapa').height(window.innerHeight);
</script>
<script> // TIPOS DE MAPAS
var map = L.map('contenedorMapa').setView([22.387672, -97.925450], 7);
//[21.893950, -101.440188]
var googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3'],
attribution: ''
}).addTo(map);
</script>
<script>
var marker13 = L.marker([25.078983, -100.772610]).addTo(map)
.bindPopup('supe-iz');
var marker13 = L.marker([19.696318, -95.078198]).addTo(map)
.bindPopup('inf-der');
</script>
<script>
var imageUr6 = 'https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif';
var bordes6 = [[25.078983, -100.772610], [19.696318, -95.078198]];
var imagen6 = L.imageOverlay(imageUr6, bordes6, {
opacity: 0.7
}).addTo(map);
</script>
</body>
</html>

Related

Leaflet map not showing despite following quick-start guide

The problem I am having is that the map is not showing up at all, there is a blank spot where the map is meant to be. I have followed Leaflet's quick-start guide and I still have yet to determine why my map does not show.
Below is the code I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="mapid">
</div>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin="">
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox.streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
}).addTo(mymap);
</script>
</body>
</html>

You import the Leaflet JavaScript file and have your page code within the same HTML <script> tag. In such case, browsers are supposed to ignore (not execute) the content between the script tags, i.e. your page code is not executed.
Simply separate in 2 different script tag pairs:
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
// etc.
</script>

Javascript codes not responding

My javascript code is not responding at all. Even simple codes like alert("Hello World"); both external files and internal scripts, jQuery etc are not all responding
example
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./assets/Animate CSS/animate.min.css">
<link rel="stylesheet" href="./assets/OWL JS/owl.carousel.min.css">
<link rel="stylesheet" href="./assets/Bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="./assets/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 class="animate__animated right-0 wow animate__zoomIn bg-primary"><span class="fa fa-bars"></span> Hello World</h1>
<div class="wow backInRight">
Content to Reveal Here
</div>
<noscript>Hello</noscript>
<script>
new WOW().init();
alert("Hello word");
for (i = 0; i < 10; i++) {
alert("Hello" + i);
}
</script>
<script src="./assets/JQuery/jquery.min.js"></script>
<script src="./assets/Popper JS/popper.min.js"></script>
<script src="./assets/Wow JS/wow.js"></script>
<script src="./assets/Bootstrap/bootstrap.min.js"></script>
<script src="./assets/OWL JS/owl.carousel.min.js"></script>
</body>
</html>```

js google maps showing dark screen

I have a simple code which would display the location on the google maps. But for some reasons its showing a dark screen. Any idea what's happening?
<html>
<head>
<title> Using Google Maps API in PHP- InfoTuts </title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<div id="display_map" style="width:450px;height:350px; "></div>
<div id="myad">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9165168790934890";
/* top */
google_ad_slot = "6414226949";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
this is the console:

Do you have Google App Key?
<script src="https://maps.googleapis.com/maps/api/js?key=<your app key>&callback=<your endpoint>"></script>

Load a leaflet map from a link

I am trying to load a leaflet map from a link. If I click the first link, the map loads, then if I click the second link, the map does not load. Both links call the same function. I cannot understand what is happening.
Thanks in advance!
<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
</head>
<body>
OpenStreetMap<br>
Thunderforest<hr>
<div id="map" style="width: 600px; height: 400px"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> </script>
<script>
function showMap(url){
var map = L.map('map').setView([-33.4387,-70.647], 14);
var mapLink = 'OpenStreetMap';
L.tileLayer(url, {
attribution: 'Map data © ' + mapLink,
maxZoom: 18,
}).addTo(map);
}
</script>
</body>
</html>

You are getting an error because your are trying to initialize the map container for a second. Here is how you can solve this:
<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
</head>
<body>
OpenStreetMap<br>
Thunderforest<hr>
<div id="map" style="width: 600px; height: 400px"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> </script>
<script>
var map;
function showMap(url){
if(!map)
{
map = L.map('map').setView([-33.4387,-70.647], 14);
}
var mapLink = 'OpenStreetMap';
L.tileLayer(url, {
attribution: 'Map data © ' + mapLink,
maxZoom: 18,
}).addTo(map);
}
</script>
</body>
</html>

Bootstrap with JS, result of a function in popover

This is the code to get temperature of London from weather API. It works correctly (images are local hence won't show):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/body.css" />
<meta name="msapplication-tap-highlight" content="no" />
</head>
<body>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script language="javascript" type="text/javascript">
<!--
function foo(callback) {
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?q=London",
dataType: 'JSON',
success: callback
});
}
function myCallback(result) {
var temp = JSON.stringify(JSON.parse(result.main.temp));
var Kelvin = 272;
var Centigrade = Math.round(temp-Kelvin);
if (Centigrade <= 25) {
//alert("Temperature : "+Math.round(Centigrade)+" C");
var temp = document.getElementById("temp");
temp.style.fontSize = "20px";
temp.innerHTML = Centigrade+"° C , Cool "+"<img src= \"img/Tlogo2.svg\"/>";
//document.getElementById("temp").innerHTML = Centigrade+"° C , Cool "+"<img src= \"img/Tlogo2.svg\"/>";
}
else if (Centigrade > 25) {
var temp = document.getElementById("temp");
temp.style.fontSize = "20px";
temp.innerHTML = Centigrade+"° C , Cool "+"<img src= \"img/Tlogo3.svg\"/>";
//document.getElementById("temp").innerHTML = Centigrade+"° C , It's Hot !!! "+"<img src= \"img/Tlogo3.svg\"/>";
}
}
</script>
<div style="position: absolute; left: 30px; top: 75px;">
<img src="img/temlogo.svg" width="35" height="35" onclick="foo(myCallback);"/>
</div>
<p id="temp"></p>
</body>
</html>
From tutorials point and Bootstrap website I have tried to use a dissmissable popover. It works fine too:
<!DOCTYPE html>
<html>
<body>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("[data-toggle='popover']").popover();
});
</script>
</body>
Temperature
</html>
Now what I am trying is I want get temperature as popover element. ie. if I click on image button, it should trigger temperature acquiring function and then show the temperature and the image related to that in popover box. So here is two challenge I am facing.
Setting a image instead of the red button and then temperature data
List item and the image ie. Tlogo2.svg to be appeared in that pop over box.
So can anyone suggest how to set that?
EDIT : I have tried this to attain what I said. but nothing happened. The code goes here:
<!DOCTYPE html>
<html>
<body>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript">
//Function
function foo(callback) {
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?q=London",
dataType: 'JSON',
success: callback
});
}
function myCallback(result) {
var temp = JSON.stringify(JSON.parse(result.main.temp));
var Kelvin = 272;
var Centigrade = temp-Kelvin;
alert("Temperature : "+Math.round(Centigrade)+" C");
//document.getElementById("temp").innerHTML = "Temperature : "+Math.round(Centigrade)+" C";
}
$(function() {
$("[data-toggle='popover']").popover(myCallback(result));
});
</script>
</body>
Temperature
</html>
I am adding some addition. SO that people don't get confuse and see what really I want. I want the result of the function ie temperature is 23 C to that pop over element
The code:
<!DOCTYPE html>
<html>
<body>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript">
//Function
function foo(callback) {
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?q=London",
dataType: 'JSON',
success: callback
});
}
function myCallback(result) {
var temp = JSON.stringify(JSON.parse(result.main.temp));
var Kelvin = 272;
var Centigrade = temp-Kelvin;
alert("Temperature : "+Math.round(Centigrade)+" C");
//document.getElementById("temp").innerHTML = "Temperature : "+Math.round(Centigrade)+" C";
}
$(function() {
$("[data-toggle='popover']").popover(myCallback);
});
</script>
</body>
<a href="#" tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Temperature" data-content= "myCallback(result);" >Temperature</a>
</html>
So let me know where I need to change.

Maybe you can do popover on hover, here is example
$(function() {
$('[title]').attr("data-rel", "tooltip");
$("[data-rel='tooltip']")
.attr("data-placement", "top")
.attr("data-content", function() {
return $(this).attr("title")
})
.removeAttr('title');
var showPopover = function() {
$(this).popover('show');
};
var hidePopover = function() {
$(this).popover('hide');
};
$("[data-rel='tooltip']").popover({
trigger: 'manual'
}).click(showPopover).hover(showPopover, hidePopover);
});
Use it like this
Temperature

Categories