Leaflet map not showing despite following quick-start guide - javascript

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>

Related

leaflet.js map doesn't appearing

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
});

Leaflet routing machine error: Geocoder is undefined

Having a problem with leaflet routing machine. The very basic code
var routingtest = L.Routing.control({
waypoints: [
L.latLng(57.74, 11.94),
L.latLng(57.6792, 11.949)
]
}).addTo(mymap);
does run fine.
But as soon as I add more code like described at http://www.liedman.net/leaflet-routing-machine/tutorials/ I get errors.
For example this does not work:
var routingtest = L.Routing.control({
waypoints: [
L.latLng(57.74, 11.94),
L.latLng(57.6792, 11.949)
],
routeWhileDragging: true,
geocoder: L.Control.Geocoder.nominatim()
}).addTo(mymap);
It throws back TypeError: L.Control.Geocoder is undefined.
I just redownloaded the plugin to make sure nothing has been accidentially modified, but still.
My index.html looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Map</title>
<link type="text/css" rel="stylesheet" href="leaflet/leaflet.css" />
<link type="text/css" rel="stylesheet" href="plugins/Leaflet.fullscreen-gh-pages/dist/leaflet.fullscreen.css" />
<link type="text/css" rel="stylesheet" href="plugins/leaflet-routing-machine-3.2.7/dist/leaflet-routing-machine.css" />
<link type="text/css" rel="stylesheet" href="css/mycss.css" />
<script type="text/javascript" src="leaflet/leaflet.js"></script>
<script type="text/javascript" src="plugins/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="plugins/Leaflet.fullscreen-gh-pages/dist/Leaflet.fullscreen.js"></script>
<script type="text/javascript" src="plugins/leaflet-routing-machine-3.2.7/dist/leaflet-routing-machine.js"></script>
<script type="text/javascript" src="plugins/leaflet-routing-machine-3.2.7/dist/L.Routing.OpenRouteService.js"></script>
</head>
<body>
<!-- mapbox -->
<div id="map" class="map"></div>
<!-- custom script containing routing machine and other stuff (which works all fine)!-->
<script type="text/javascript" src="javascript/myscript.js"></script>
</body>
</html>
Paths to .js and .css files are all fine.
My leaflet map var with one of the basemaps looks like this:
var mymap = L.map('map', {
center: [57.89, 12.02],
zoom: 13.5,
fullscreenControl: true
});
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
{ attribution: '© OpenStreetMap'
}).addTo(mymap);
What could cause the TypeError: L.Control.Geocoder is undefined error and how to fix it?
I installed https://github.com/perliedman/leaflet-control-geocoder plugin and now it works. Its stated nowhere that this is a prerequisiste though...

How to use polylinedecorator plugins in leaflet?

i'm new in html and leaflet, i don't know how to use plugins in leaflet
right now i'm working with polyline decorator plugins but i don't know how to use it right
i'm trying following tutorial on internet, here my code
var arrow = L.polyline([[107.63576,-2.72322], [107.65699,-2.7366]], {}).addTo(map);
var arrowHead = L.polylineDecorator(arrow, {
patterns: [
{offset: '100%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 15, polygon: false, pathOptions: {stroke: true}})}
]
}).addTo(map);
and here my head section
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<script src="polyline/dist/leaflet.polylineDecorator.js"></script>
<script src="polyline/src/L.polylineDecorator.js"></script>
</head>
You have the latitudes and longitudes swapped in the call to L.polyline. Try this line instead:
var arrow = L.polyline([[-2.72322, 107.63576], [-2.7366, 107.65699]], {}).addTo(mymap);

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>

I cannot get my map to display in leaflet JS

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>

Categories