I have a HTML page that is using leaflet.js and for some reason I cannot get the map to display.
I have the API from mapbox in the correct place but no map. The following is the JS code,the markup and the CSS to see what I messed up on.
HTML :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="en">
<head>
<meta charset="UTF-8">
<title>Learn Maps</title>
<link rel="stylesheet" type ="text/css" href="style.css" />
<link rel="stylesheet" href="night_class/leaflet-0.7.3/leaflet.css" />
<script src="night_class/leaflet-0.7.3/leaflet.js"></script>
<script>
window.onload = function() {
//every part goes here
var map = L.map('map').setView([45.46, -122.739], 4);
L.tileLayer('https://a.tiles.mapbox.com/v4/rodneyabutler.db94e2a6/page.html?access_token=pk.eyJ1Ijoicm9kbmV5YWJ1dGxlciIsImEiOiJiYzd2SVVvIn0.R7uMtxUochQCrDmpiwg6QQ#4/45.51/-122.69', {
attribution: 'Map data © Mapbox contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18
}).addTo(map);
}
</script>
</head>
<body>
<div id="map">MAP</div>
</body>
</html>
CSS :
body{
margin: 0px;
}
#map {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
height:300px;
width:50%;
border: solid crimson 4px;
/*background-color:#000;*/
}
with Leaflet, you need to have the div that holds the map set up before you create the map, or else the map object doesn't know where to go. Try moving your script tags below the map div.
The final script should look something like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="en">
<head>
<meta charset="UTF-8">
<title>Learn Maps</title>
<link rel="stylesheet" type ="text/css" href="style.css" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>
<body>
<div id="map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
window.onload = function() {
var tileLayer = L.tileLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}.png", {maxZoom: 18, attribution: 'MRLC, State of Oregon, State of Oregon DOT, State of Oregon GEO, Esri, DeLorme, HERE, TomTom, USGS, NGA, EPA, NPS, U.S. Forest Service'});
var map = new L.map('map', {
layers: tileLayer
}).setView([45.46, -122.739], 4);
};
</script>
</body>
</html>
Related
This is my first time working with a leaflet map in javascript, and I follow the instructions in the documentation but the map details don't appear.
This is what I get :
I search about that and found many codes that are also not working
this is my code :
<!DOCTYPE html>
<html>
<head>
<title>Leaflet</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.3/leaflet.css" />
</head>
<body>
<div id="map" style="width: 100%; height: 600px"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
var map = L.map('map').setView([38.738853, 0.039328], 13);
bounds = new L.LatLngBounds(new L.LatLng(38.589932205137842, -0.24943472068649825), new L.LatLng(38.834130125688162, 0.250210265053367));
L.tileLayer('http://tiles.primarysolutions.org/tiles/{z}/{x}/{y}.png', {
minZoom: 12,
maxZoom: 15,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
}).addTo(map);
</script>
</body>
</html>
Where is the problem in my code and why doesn't the map appear? How can I solve this?
Look into this default demo: www.leafletjs.com/edit.html
html:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<style>
body {
margin: 0;
}
html, body, #map {
height: 100%
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet/dist/leaflet-src.js"></script>
<script src="script.js"></script>
</body>
</html>
JavaScript:
var map = L.map('map', {
layers: [
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
})
],
center: [0, 0],
zoom: 0
});
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>
The rendered map appears blurry in Chrome Version 49.0.2623.110 m when using 100% Height in CSS.
I am using LeafletJS library version 0.7.7.
I only support zoom level 6,7 & 8 so at zoom level 6, it looks like this:
If I zoom even to max capability, which is 8, it looks quite blurry like this:
This is my index.html (implementation source):
<!doctype html>
<html lang="en">
<head>
<title>Europe Zoom Level 6 & 7</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="leaflet.css">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0;}
#map { height: 100% }
</style>
<script type="text/javascript" src="leaflet.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
(function () {
// Objects
var isOnline = false;
var map = L.map('map').setView([51.505, -0.09], 6);;
// Generate tile layer url
var tileLayerUrl = isOnline
? 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
: 'MapQuest/{z}/{x}/{y}.jpg';
// Set tile layer & add to map
L.tileLayer(tileLayerUrl, {
minZoom : 6,
maxZoom : 8,
attribution: '© <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors'
})
.addTo(map);
// Test marker
L.marker([51.5, -0.09]).addTo(map)
.bindPopup("<b>Hello world!</b><br />I am a <u>html</u> popup.");
})();
</script>
</body>
</html>
Is there a fix for this?
On a separate note, In Internet Explorer (11) it looks crystal clear:
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>
I have a script that opens a popup windows every time the page is loaded. The script is:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>ColorBox demo</title>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
</head>
<body>
<h1>Hello, there!</h1>
<h2>This is some content</h2>
<p>The popup will open in five seconds</p>
<div class="test">
<p>testtest</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
function openColorBox(){
$.colorbox({iframe:true, width:"60%", height:"60%", href: "http://www.sitepoint.com"});
}
setTimeout(openColorBox,0);
</script>
</body>
</html>
It works fine, but if I use it with google maps, the popup windows resizes unexpectedly and the background color that surrounds the popup disappears. The code is:
<!DOCTYPE html>
<html>
<html lang="ro">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
</script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100%; width: 100%; }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7_q4j3wbRGmQr3V-wtKZrlv7Uz_-G7Dk&sensor=true">
</script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng( 44.4325, 26.1039),
zoom: 12
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="map-canvas">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
function openColorBox(){
$.colorbox({iframe:true, width:"30%", height:"30%", href: "http://www.sitepoint.com"});
}
setTimeout(openColorBox,0);
</script>
</body>
</html>
I can't figure out why it won't display properly. Does anyone have an idea?
Thanks a lot!
I'm not sure about that api colorbox but I would go with the jQuery ui modal and just customize the look from there. Run this code below. Note: I added the reference to the jQuery ui css and code base. Then I append a new div to the body with an iframe in it then call the dialog method on that element. Hope this helps.
<!DOCTYPE html>
<html>
<html lang="ro">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7_q4j3wbRGmQr3V-wtKZrlv7Uz_-G7Dk&sensor=true"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100%; width: 100%; }
</style>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng( 44.4325, 26.1039),
zoom: 12
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="map-canvas">
</div>
<script>
function openColorBox(){
$('body').append("<div id='modalBox'><iframe style='height:300px; width:350px;' src='http://www.sitepoint.com'></iframe></div>");
$('#modalBox').dialog({
height:400,
width: 400
});
}
setTimeout(openColorBox,0);
</script>
</body>
</html>