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 '/'
Related
I'm using leaflet.js and adding a Fulcrum Mapbox tile layer URL to load a specific map into my website... The tiles load in circles and I'm not sure whats going on! Any help would be awesome.
Image of the resulting tiles:
Here is my code:
var backgroundLayer = L.tileLayer("https://api.mapbox.com/styles/v1/measure/ck8515ktb01vd1ilngup1r6rr/tiles/256/{z}/{x}/{y}#2x?access_token=pk.eyJ1IjoibWVhc3VyZSIsImEiOiJjanV6dW00NjIxY3liNDNwZnc4eWozbjY0In0.zj7VWavAGgdjQpOwWoXDqA",{
minZoom: 2,
maxNativeZoom: 22,
maxZoom: 22,
});
var map = L.map("mymap");
map.setView([35, -95], 14);
map.addLayer(backgroundLayer);
It is working as expected. Maybe there is a conflict with a css from some other library you use or there is an error somewhere else in your code.
Here is how it should be:
<!DOCTYPE html>
<html>
<head>
<title>Quick Start - 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.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>
</head>
<body>
<div id="mymap" style="width: 600px; height: 100vh;"></div>
<script>
var backgroundLayer = L.tileLayer("https://api.mapbox.com/styles/v1/measure/ck8515ktb01vd1ilngup1r6rr/tiles/256/{z}/{x}/{y}#2x?access_token=pk.eyJ1IjoibWVhc3VyZSIsImEiOiJjanV6dW00NjIxY3liNDNwZnc4eWozbjY0In0.zj7VWavAGgdjQpOwWoXDqA", {
minZoom: 2,
maxNativeZoom: 22,
maxZoom: 22,
});
var map = L.map("mymap");
map.setView([35, -95], 9);
map.addLayer(backgroundLayer);
</script>
</body>
</html>
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>
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
I'd like to keep javascript in an external file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<title>Map</title>
</head>
<body>
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js">
</script> -->
<div id="mapid"></div>
<script src="client.js"></script>
</body>
</html>
And this is the js file
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY2RlYmFkcmkiLCJhIjoiY2ptcjh1YmNlMXluajNxcDU0b3NrOWowbiJ9.kGcSMPD0cZyz0tLOTIIilw', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'mapbox.streets'
}).addTo(mymap);
Can someone help me in understanding what is going wrong? I've created a jsfiddle (as to my understanding). But no luck there too!
https://jsfiddle.net/vxb0ces9/
The CSS in your JSFiddle looks like this:
#mapid {
height: 400 px;
width: 600 px;
}
CSS Lengths should be specified without white space between the number and the unit: (emphasis mine)
The format of a length value [...] is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.).
Therefore in your case simply fixing your CSS to:
#mapid {
height: 400px;
width: 600px;
}
...solves your issue: https://jsfiddle.net/hym0bo9p/
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 ?