Leaflet map looks catastrophic
jsa005 opened this issue · comments
Hi there. I'm trying to embed a Leaflet map into my page using this code (prepare for some reading):
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width">
<title>Nintrigue</title>
<!--<meta name="robots" content="noindex, nofollow">-->
<meta name="description" content="Nintrigue: an innovative, modern community website designed for the Nintendo range of games consoles." />
<meta name="keywords" content="nintrigue, jsivi, wiioperasdk, wiipaint, dsipaint, 3dspaint, wii u paint, wiiupaint, wii upaint, gamepadpaint, sdk community, facebook, dsi chatroom, 3ds chatroom, wii u chatroom, nintendo chatroom, nintendo, jsa005" />
<meta name="author" content="jsa005"/>
<!-- remove or comment this line if you want to use the local fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../content/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../content/css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="../content/css/bootmetro.css">
<link rel="stylesheet" type="text/css" href="../content/css/bootmetro-tiles.css">
<link rel="stylesheet" type="text/css" href="../content/css/bootmetro-charms.css">
<link rel="stylesheet" type="text/css" href="../content/css/metro-ui-light.css">
<link rel="stylesheet" type="text/css" href="../content/css/icomoon.css">
<!-- these two css are to use only for documentation
<link rel="stylesheet" type="text/css" href="https://github.com/aozora/bootmetro/content/css/demo.css" target="_blank" rel="nofollow">
<link rel="stylesheet" type="text/css" href="../scripts/google-code-prettify/prettify.css" > -->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="../as/im/favicon.ico">
<!--<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../content/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../content/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../content/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../content/ico/apple-touch-icon-57-precomposed.png">-->
<!-- All JavaScript at the bottom, except for Modernizr and Respond.
Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
<script src="../scripts/modernizr-2.6.1.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3182578-6']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body data-accent="blue">
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
<!-- Header
================================================== -->
<header id="nav-bar" class="container-fluid">
<div class="row-fluid">
<div class="span8">
<div id="header-container">
<a id="backbutton" class="win-backbutton" href="./index.php"></a>
<h5>home</h5>
<div class="dropdown">
<a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#" >
<img src="../as/im/logo.png" alt="nintrigue">
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./chat/">Chat</a></li>
<!--<li><a href="./tiles-templates.html">Tile Templates</a></li>
<li><a href="./listviews.html">ListViews</a></li>
<li><a href="./appbar-demo.html">Demo App-Bar</a></li>
<li><a href="./table.html">Demo Table</a></li>
<li><a href="./icons.html">Icons</a></li>
<li><a href="./scaffolding.html">Bootstrap Scaffolding</a></li>
<li><a href="./base-css.html">Bootstrap Base CSS</a></li>
<li><a href="./components.html">Bootstrap Components</a></li>
<li><a href="./javascript.html">Bootstrap Javascript</a></li>-->
<li class="divider"></li>
<li><a href="./index.php">Home</a></li>
</ul>
</div>
</div>
</div>
<div id="top-info" class="pull-right">
<a href="#" class="pull-left">
<div class="top-info-block">
<h3>jsa005</h3>
<h4>LastName</h4>
</div>
<div class="top-info-block">
<b class="icon-user"></b>
</div>
</a>
<hr class="separator pull-left"/>
<a id="settings" class="pull-left" href="#">
<b class="icon-settings"></b>
</a>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row-fluid">
<form action="javascript:void(0);" onsubmit="void(goto($('#loc1').attr('value')));" style="display:inline;">
<input class="input-block-level" id="loc1" style="width:89%;" placeholder="Enter a location..." type="text" name="loc">
<input class="btn btn-primary" id="submit" style="width:10%" value="Go" type="submit" name="submit">
</form>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div id="map">
Loading map...
</div>
</div>
</div>
<footer class="win-commandlayout navbar-fixed-bottom">
<div class="container">
<div class="row">
<a class="win-command">
<span class="win-commandimage win-commandring">h</span>
<span class="win-label">Zoom in</span>
</a>
<hr class="win-command" />
<button class="win-command">
<span class="win-commandimage win-commandring">i</span>
<span class="win-label">Zoom out</span>
</button>
<button class="win-command" onclick="getDirections(prompt('From'), prompt('To'))">
<span class="win-commandimage win-commandring"></span>
<span class="win-label">Directions</span>
</button>
</div>
</div>
</footer>
<script src="http://leafletjs.com/dist/leaflet.js"></script>
<script src="Polyline.encoded.js"></script>
<script>
var poly;
var marker;
var marker2;
// Leaflet
var map = new L.Map('map');
map.setView(new L.LatLng(51.5112139, -0.1198244
),7);
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
maxZoom: 18
}
).addTo(map);
// End Leaflet
function geocode(location){
$.getJSON("geocoder.php", {
loc: location
}, function(json) {
console.log(json.lat+', '+json.lng);
geo = new Array();
geo['lat'] = json.lat;
geo['lng'] = json.lng;
return geo;
});
}
function getDirections(start, end){
try{
if($.trim(start) == '' || $.trim(end) == ''){
throw "Whoops, it\'s empty somewhere!";
}
$.getJSON("directions.php",
{
start: start,
end: end
},
function(data) {
//console.log(data);
poly = data.polyline;
var polyline = L.Polyline.fromEncoded(poly).addTo(map);
map.fitBounds(polyline.getBounds());
//var gdGeo1 = geocode(start);
//var gdGeo2 = geocode(end);
//map.removeLayer(marker);
//map.removeLayer(marker2);
//marker = L.marker([gdGeo1.lat, gdGeo1.lng], {clickable:false}).addTo(map);
//marker2 = L.marker([gdGeo2.lat, gdGeo2.lng], {clickable:false}).addTo(map);
$("#step_c").text("");
$("<span>").css("font-size", "1.5em").text("Directions from "+data.start+" to "+data.end+"\n").appendTo("#step_c");
// $("<p>").text(data.url+"\n").appendTo("#step_c");
$.each(data.steps, function(i,step){
$("<p>").text(step.text+"\n").appendTo("#step_c");
});
$("#map_c").attr("class", "span8");
$("#step_c").show();
});
}catch(e){
console.log("An exception occured: "+e);
alert("Oops! An error occured!\n"+e);
}
}
function goto(location){
$.getJSON("geocoder.php", {
loc: location
}, function(json) {
console.log(json.lat+', '+json.lng);
//map.clearLayer(marker);
//map.clearLayer(marker2);
// marker = L.marker([json.lat, json.lng], {clickable:false}).addTo(map);
map.panTo(new L.LatLng(json.lat, json.lng));
});
}
</script>
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write("<script src='../scripts/jquery-1.8.2.min.js'>\x3C/script>")</script>
<script type="text/javascript" src="../scripts/google-code-prettify/prettify.js"></script>
<script type="text/javascript" src="../scripts/jquery.mousewheel.js"></script>
<script type="text/javascript" src="../scripts/jquery.scrollTo.js"></script>
<script type="text/javascript" src="../scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="../scripts/bootmetro.js"></script>
<script type="text/javascript" src="../scripts/bootmetro-charms.js"></script>
<script type="text/javascript" src="../scripts/demo.js"></script>
<script type="text/javascript" src="../scripts/holder.js"></script>
</body>
</html>And it looks like this:
Rendered by ctrlq.org/screenshots:
Ug-ly. Help.
which version of bootmetro are you using?
It's nothing related to bootstrap. Try to follow the Leaflet quickstart: http://leafletjs.com/examples/quick-start.html
in your html page, add this before the closing of the head tag:
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
<![endif]-->
<style type="text/css">
#map { height: 180px; }
</style>