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
Related
I'm quite new to coding.
Basically, I'm trying to use the below external JS file in my HTML but it doesn't work when I include this in my HTML file:
var map = L.map('map').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/satellite-v9',
tileSize: 512,
zoomOffset: -1,
accessToken: 'pk.eyJ1IjoidGhhaWxlZSIsImEiOiJjbDFxYmUzZGwxZWFzM2lxcjJkOWNmZmlsIn0.B57x2tvc2UbNrR1jdV0nrg'
}).addTo(map);
But when I include these codes in the same script tag in HTML, it works? My html code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map</title>
<meta name="description" content="thai Yik Lee Portfolio">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<h1>MAP</h1>
<div id="map" style="height: 500px">
Here
</div>
<script src="/libs/map.js" type="text/javascript"></script>
</body>
</html>
Any help is appreciated, thank you!
Found the answer, the path to my file had an extra '/'
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 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.
I am trying to display the full map using leaflet.
Code Pen
I am trying to achieve the following via leaflet:
I thought using mymap.fitWorld() would achieve the effect but it is not.
You can provide minZoom and maxZoom levels to be 1 like this:
var map = L.map('map', {
minZoom: 1,
maxZoom: 1,
});
and then define setView as follows:
map.setView([0, 0], 0);
<!DOCTYPE html>
<html>
<head>
<title>Zoom Levels Tutorial - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<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>
<style>
html, body {
height: 100%;
margin: 0;
}
#map {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = L.map('map', {
minZoom: 1,
maxZoom: 1,
});
var cartodbAttribution = '© OpenStreetMap contributors, © CartoDB';
var positron = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', ).addTo(map);
map.setView([0, 0], 0);
</script>
</body>
</html>
By using Leaflet Routing Machine, OSRM and OpenStreetMap, I try to draw route between two places. Despite of numerous attemps, I've got always the same error:
Error: language code [object Object] not loaded
status: -3
The markers appear on map but the road is not visible.
Here my code:
<html>
<head>
<meta charset="utf-8" />
<title>Leaflet Routing Machine Example</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" href="leaflet-routing-machine-master/dist/leaflet-routing-machine.css" />
<style>
#mapid {
height: 580px;
}
</style>
</head>
<body>
<div id="mapid"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="leaflet-routing-machine-master/dist/leaflet-routing-machine.js"></script>
<script>
var mapid = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(mapid);
L.Routing.control({
waypoints: [
L.latLng(57.74, 11.94),
L.latLng(57.6792, 11.949)
],
routeWhileDragging: true,
router: L.Routing.osrmv1({
serviceUrl: 'http://router.project-osrm.org/route/v1'
})
}).addTo(mapid);
</script>
</body>
</html>
How to resolve this issue?
<html>
<head>
<meta charset="utf-8" />
<title>Leaflet Routing Machine Example</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" href="http://www.liedman.net/leaflet-routing-machine/dist/leaflet-routing-machine.css" />
<style>
#mapid {
height: 580px;
}
</style>
</head>
<body>
<div id="mapid"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://www.liedman.net/leaflet-routing-machine/dist/leaflet-routing-machin.js"></script>
<script>
var mapid = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(mapid);
L.Routing.control({
waypoints: [
L.latLng(57.74, 11.94),
L.latLng(57.6792, 11.949)
],
routeWhileDragging: true,
router: L.Routing.osrmv1({
serviceUrl: 'http://router.project-osrm.org/route/v1'
})
}).addTo(mapid);
</script>
</body>
It works properly. Will You explain what is the issue ?