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>
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'm trying to design a web app for mapping accessibility on my university. Unfortunately the map only loads until I try resize the map so they would shown on the whole webpage. Most of the plugins I tried to add (like Fullscreenmode or Location doesn't work, too). The page turns white. What did I do wrong?
Here are my snippets:
// Initialize leaflet.js
var L = require('leaflet');
//OSM tiles attribution and URL
var osmLink = 'OpenStreetMap';
var osmURL = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib = '© ' + osmLink;
//Stamen Toner tiles attribution and URL
var stamenURL = 'http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}';
var stamenAttrib = 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap';
//Creation of map tiles
var osmMap = L.tileLayer(osmURL, {
attribution: osmAttrib
});
var stamenMap = L.tileLayer(stamenURL, {
attribution: stamenAttrib,
subdomains: 'abcd',
ext: 'png'
});
//Map creation
var map = L.map('map', {
zoomControl: false,
layers: [osmMap]
}).setView([50.927, 6.931], 16);
//Base layers definition and addition
var baseLayers = {
"OSM Mapnik": osmMap,
"Stamen Toner": stamenMap
};
//Add baseLayers to map as control layers
L.control.layers(baseLayers).addTo(map);
//Fullscreen button
map.addControl(new L.Control.Fullscreen());
map.on('fullscreenchange', function() {
if (map.isFullscreen()) {
console.log('entered fullscreen');
} else {
console.log('exited fullscreen');
}
});
map.isFullscreen() // Is the map fullscreen?
map.toggleFullscreen() // Either go fullscreen, or cancel the existing fullscreen.
// `fullscreenchange` Event that's fired when entering or exiting fullscreen.
map.on('fullscreenchange', function() {
if (map.isFullscreen()) {
console.log('entered fullscreen');
} else {
console.log('exited fullscreen');
}
});
//create custom zoom Control on right bottom
var zoomControl = L.control.zoom(
zoomOptions = {
position: 'bottomright'
}
).addTo(map);
// Initialize the base layer
//offer alternative base layer; include base layer choice toggle on top right of mapbox
var osm_mapnik = L.tileLayer('https://api.mapbox.com/styles/v1/jlambre1/cjtzjn4xv1ceo1fph8wuq1y9u/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoianVzbGFtYnJlIiwiYSI6ImNqeTB1ZGo4eTAxdXUzbmsyOG1xcmQ1NWMifQ.IWZKtDwcnUCq03fo9-ualg', {
maxZoom: 19,
attribution: '© OSM Mapnik OpenStreetMap'
}).addTo(map);
body {
padding: 0;
margin: 0;
}
html,
body,
#map {
height: 100%;
width: 100%;
}
<head>
<meta charset="utf-8">
<title>Mapping Acces #UzK</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<!-- Leaflet CDN-->
<script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>
<!-- Leaflet CSS-->
<link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css">
<link rel="stylesheet" href="styles/style.css">
<!-- Custom Stylesheet -->
<link rel="stylesheet" type="text/css" href="./styles/main.css">
<!-- Leaflet Fullscreen-->
<link rel="stylesheet" href="./leaflet-fullscreen/Control.FullScreen.css" />
<script src="./leaflet-fullscreen/Control.FullScreen.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!--Locate-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol#[VERSION]/dist/L.Control.Locate.min.css" />
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol#[VERSION]/dist/L.Control.Locate.min.js" charset="utf-8"></script>
<!-- jQuery CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--Switching Basemaps-->
<link rel="stylesheet" href="L.Control.Basemaps.css" />
<script src="L.Control.Basemaps-min.js"></script>
<!-- Fullscreen -->
<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' />
</head>
And I receive this error message: https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
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 ?