I need to have a popover which can present a map inside its body. I did this basic example:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<link rel="stylesheet" href="css/style.css">
<script src="script/script.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
Toggle popover
</div>
<script>
let script = `
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
<\/script>`;
console.log(script);
$(document).ready(function() {
$('[data-toggle="popover"]').popover({
title: 'A nice map inside a popover!',
content: "<div id='map' style='background: gray;'></div>" + script,
html: true
});
});
</script>
</body>
</html>
It sends html content which contains a div and script for the leaflet map. It doesn't work.
I am not sure this approach would work out and maybe you know a better way to have a map once a table cell or any other element is clicked.
You cannot append script tags directly on the content prop of the popover method. To make this, you will need listen to some event triggered after the popover is rendered, like shown.bs.popover:
$('[data-toggle="popover"]').on('shown.bs.popover', () => {});
Inside, you'll be able to call Leaflet and create the map instance. I attach a CodePen with the concept (I applied some CSS to make adjustments on the popover layout to show the map correctly) https://codepen.io/geekzolanos-dev/pen/gOpwRrR
Please check following code snippet:
$(document).ready(function() {
$('[data-toggle="popover"]').popover({
title: 'A nice map inside a popover!',
content: "<div id='map' style='background: gray;'></div>",
html: true
});
$("[data-toggle=popover]").on('shown.bs.popover', function () {
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
});
});
#map{
height:300px;
width:300px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<div class="container">
<h3>Popover Example</h3>
Toggle popover
</div>
Hope this will helps you.
Related
Not sure how I have managed this but my leaflet zoom controls are not clickable? They do show up on the screen but there is no mouse change when hovering over them.
Do I need to create another layer for the controls or am I missing something else from my code?
update: The map will also not scroll or zoom in - it appears static
This is my script relating to the map:
var mymap = L.map('mapid');
var Jawg_Streets = L.tileLayer('https://{s}.tile.jawg.io/jawg-streets/{z}/{x}/{y}{r}.png?access-token={accessToken}', {
attribution: '© <b>Jawg</b>Maps © OpenStreetMap contributors',
minZoom: 0,
maxZoom: 22,
subdomains: 'abcd',
accessToken: foo
}).addTo(mymap);
mymap.zoomControl.setPosition('bottomleft');
mymap.setView([51.505, -0.09], 13);
Also not sure if it might relate to my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gazetteer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="favicon.ico" rel="icon">
<!--Stylesheets-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link href="css/styles.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.Default.css' rel='stylesheet' />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton#2/src/easy-button.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">
<script src="https://use.fontawesome.com/acad2da5ff.js"></script>
</head>
<body>
<div id="mapid" class="container-fluid">
</div>
etc
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton#2/src/easy-button.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/leaflet.markercluster.js"></script>
<script type="application/javascript" src="js/jquery-2.2.3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script type="application/javascript" src="js/script.js"></script>
</body>
</html>
Or CSS
#mapid {
height: 100vh;
z-index: -1;
}
Thanks
Remove the z-index: -1 from the css styling and it should work.
WORKING DEMO
MapPanes - Leaflet Docs
I'm trying to use a map, but it doesn't seem to work it just shows an empty white space. I hard reseted my pc days ago, so I'm not sure if something is missing in my pc or my code is wrong, but here it is:
header.php:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/menu_style.css">
<link rel="stylesheet" href="css/index_style.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.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/main.css">
</head>
main.css:
div.mapa{
height: 420px;
}
footer.php:
</footer>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="js/main.js"></script>
</body>
</html>
main.js:
(function(){
"use strict";
document.addEventListener('DOMContentLoaded',function(){
var mapa = document.getElementById('mapa');
if(mapa) {
var map = L.map('mapa').setView([-12.088507, -76.995052], 16);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([-12.088507, -76.995052]).addTo(map)
.bindTooltip('Paris WebCamp 2020<br> Boletos disponibles.')
.openTooltip();
}
});
});
index.php:
<div id="mapa" class="mapa"></div>
After everything... it doesnt show, it's just a blank space in my web
Your IIFE is never invoked:
(function () {
// some code...
}); // Function is expressed but not invoked
Should be:
(function () {
// some code...
})(); // Make sure to add the final parenthesis pair
Just for completeness, it also works with the calling parenthesis pair just after the braces:
(function () {
// some code...
}());
I'm trying to create a small webpage with an Openstreetmap and a icon to get my current position.
Heree is my code, but it's not working and I don't know why (small noob)
Thansk in adavnce for your help.
Best regards
Ossy
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css"
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>
<title>My Openstreetmap Test</title>
</head>
<body>
<style>#mymapid{height:700px;}</style>
<div id="mymapid"></div>
<script>
var mylat = 46.9;
var mylon = 4.6833;
var myzoom = 16;
var mymapid = null;
function initMap() {
var mymap = L.map('mymapid').setView([mylat,mylon], myzoom);
L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
attribution: 'données à OpenStreetMap/ODbL - rendu OSM France',
minZoom: 1,
maxZoom: 20
}).addTo(mymap);
var mk = L.marker([mylat,mylon]).addTo(mymap);
var lc = L.control.locate().addTo(mymap);
};
window.onload = function(){
initMap();
};
</script>
</body>
</head>
You have some typos in your html, otherwise this works fine. The last two <link tags are not terminated with /> as they should be and your final tag should be </html> and not </head>
I ran this on Glitch and it worked ok with the typos fixed:
https://glitch.com/~ianc-leaflet2
I'm using a plugin for leaflet map geosearch https://github.com/smeijer/leaflet-geosearch this is the repository. My code is very simple but I can't get the result in my map.
I don't know what is happening. The error I get in the console is
TypeError: can't convert undefined to object
I expect when click on the result of the search I get a marker similar to this website have in the Google Map section https://investigadoresparaguayosenelmundo.com/registration/
Here is my code :
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<!--CDN para agregar los cluster de Leaflet-->
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster#1.4.1/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster#1.4.1/dist/MarkerCluster.Default.css" />
<script src="https://unpkg.com/leaflet.markercluster#1.4.1/dist/leaflet.markercluster.js"></script>
<!--CDN para el plugin de fullscreen del mapa-->
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
<!--CDN para agregar la barra de busqueda-->
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch#3.0.0/dist/geosearch.css"/>
<!-- Make sure you put this AFtER leaflet.js, when using with leaflet -->
<script src="https://unpkg.com/leaflet-geosearch#3.0.0/dist/geosearch.umd.js"></script>
</head>
<body>
<div id="leafletMap-registration"></div>
</body>
</html>
CSS:
#leafletMap-registration {
height: 400px; /* The height is 400 pixels */
}
Javascript:
// you want to get it of the window global
const providerOSM = new GeoSearch.OpenStreetMapProvider();
//leaflet map
var leafletMap = L.map('leafletMap-registration', {
fullscreenControl: true,
// OR
fullscreenControl: {
pseudoFullscreen: false // if true, fullscreen to page width and height
},
minZoom: 2
}).setView([0,0], 2);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(leafletMap);
const search = new GeoSearch.GeoSearchControl({
provider: providerOSM,
style: 'bar',
searchLabel: 'Buscar institución',
autoClose: true,
});
leafletMap.addControl(search);
https://jsbin.com/lukikafalo/1/edit?html,css,js,console,output
You need to create the refs for your element.
In order to show the results lat lng on the map by placing a marker, you need to use keep result: true.
Use my elaborative blog:
https://medium.com/#jadhavshivam0228/open-street-maps-vuejs-integration-39c39b85b5bc
I try to make a leaflet map and added Openstreetmap as a background map. But if I load the map, nothing appears. Checking the firefox network analysis all the required tiles are loaded succesfully, but they do not show.
My HTML code :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
<link rel="stylesheet" href="main.css">
<title>title</title>
</head>
<body>
<div id="map">
</div>
<div id="logo">
<!--- a logo will appear here --->
</div>
<script src="map.js"></script>
</body>
My javascript code :
var map = L.map('map', {
center: [51.505, -0.09],
zoom: 13
});
var osm = new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
});
osm.addTo(map);
The div "map" has a higher z-index than "logo", so that should not be the problem.
Where is map style ?
You should give a height and a width to your map in order to be rendered
<div id="map" style="width: 600px; height: 400px;">
Demo