In the head the following code:
<html>
<head>
<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>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" async defer></script>
<script src="https://unpkg.com/leaflet.gridlayer.googlemutant#latest/dist/Leaflet.GoogleMutant.js"></script>
</head>
<body>
<div id="map" style="height: 500px;"></div>
<script>
var mbAttr = 'Map data © OpenStreetMap contributors, ' +
'Imagery © Mapbox',
mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=<my-api-token>';
var grayscale = L.tileLayer(mbUrl, {
id: 'mapbox/light-v9',
tileSize: 512,
zoomOffset: -1,
attribution: mbAttr
}),
streets = L.tileLayer(mbUrl, {
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
attribution: mbAttr
});
var map = L.map('map', {
center: [45.38, 7.88],
zoom: 12,
layers: [streets]
});
var google = L.gridLayer
.googleMutant({
type: "satellite", // valid values are 'roadmap', 'satellite', 'terrain' and 'hybrid'
});
var baseLayers = {
"Grayscale": grayscale,
"Streets": streets,
"Google": google
};
L.control.layers(baseLayers).addTo(map);
</script>
</body>
</html>
When I load the page and I select the "Google" layer, the tiles are loaded correctly, but if I move or zoom the new tiles are not loaded. The other layers work correctly.
If I add the line google.addTo(map); at the end of the script, the google layer is shown on top of the streets layer, but still it doesn't load the new tiles when I move or zoom.
The Google Maps API defines a variable named google in the Window global scope. GoogleMutant depends on that variable being defined and valid.
By doing var google = L.gridLayer.googleMutant(...), you're effectively redefining that variable.
Use any other variable name.
Related
I am trying to use Leaflet in Combination with Custom Tiles to make a fictional Map, but it seems to not be working even when I set the Error Tile URL to a completely different image, it doesn't even show that.
My JS Code looks like this:
axios.get("https://crugg.de/udumap/map1/tiles/tiles.json").then((result) => {
let tilesData = JSON.parse(result.data.replace(/(\/\/)[A-Z a-z,:'()\/.#0-9]*/gm, ""));
console.log(tilesData.center);
let map = L.map('map', {
center: [tilesData.center[0], tilesData.center[1]],
zoom: tilesData.center[2]
}).setView([tilesData.center[0], tilesData.center[1]], tilesData.center[2]);
L.tileLayer('https://crugg.de/udumap/map1/tiles/{z}/{x}/{y}.png', {
attribution: 'Map data © UD:RP Map contributors',
minZoom: tilesData.minzoom,
maxZoom: tilesData.maxzoom,
zoomOffset: -1,
bounds: L.latLngBounds(L.latLng(tilesData.bounds[0], tilesData.bounds[1]), L.latLng(tilesData.bounds[2], tilesData.bounds[3])),
errorTileUrl: "https://crugg.de/udumap/map1/tiles/17/107729/82841.png"
}).addTo(map);
});
JSFiddle: https://jsfiddle.net/5xprc6n3/1/
This is my first time using Leaflet and I have no Idea why this isn't working.
You have to remove the bounds property.
L.tileLayer('https://crugg.de/udumap/map1/tiles/{z}/{x}/{y}.png', {
attribution: 'Map data © UD:RP Map contributors',
minZoom: tilesData.minzoom,
maxZoom: tilesData.maxzoom,
zoomOffset: -1,
errorTileUrl: "https://crugg.de/udumap/map1/tiles/17/107729/82841.png"
}).addTo(map);
Hi i try to set the maxbaounds in a leaflet map but it doesn't work. My first questions is maxbounds stop to pan outside the borders that I set? I follow this examples but something is wrong in my code
Leaflet maxBounds - bounds do not work
https://docs.mapbox.com/mapbox.js/example/v1.0.0/maxbounds/
My code
<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.4.0/dist/leaflet.css" />
<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>
<style>
#map{ height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/leaflet#1.4.0/dist/leaflet.js"></script>
<script>
var southWest = L.latLng(34.072711,31.758391),
northEast = L.latLng(36.113055, 35.124228),
bounds = L.latLngBounds(southWest, northEast);
var counties = $.ajax({
url: "https://gist.githubusercontent.com/vassilaros/3791204ca226d5b236b4cd3106ef23cf/raw/PicnicSites.geojson",
dataType: "json",
success: console.log("County data successfully loaded."),
error: function(xhr) {
alert(xhr.statusText)
}
})
$.when(counties).done(function() {
var map = L.map('map')
.setView([35.126411,33.429859], 9);
//tiles - http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png
var basemap = L.tileLayer('http://tile1.maps.2gis.com/tiles?x={x}&y={y}&z={z}', {
attribution: '© 2GIS © Open Cartography',
subdomains: 'abcd',
maxBounds: bounds,
maxZoom: 19,
minZoom: 9
}).addTo(map);
// Add requested external GeoJSON to map
var kyCounties = L.geoJSON(counties.responseJSON).addTo(map);
var scale = L.control.scale()
scale.addTo(map)
});
</script>
</body>
</html>
Use maxBounds on the L.map to set the bounds limits.
var map = L.map('map')
.setView([35.126411,33.429859], 9)
.setMaxBounds(bounds);
Plus - don't confuse mapbox.js with leaflet.js - they're different.
I am having an issue disabling scrollwheel zoom in Leaflet Minimap.
I am instantiating the minimap with a centerFixed and a zoomLevelFixed option as per https://github.com/Norkart/Leaflet-MiniMap/pull/95 but I can still zoom with the scroll wheel; Panning is disable though.
The following is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="fullscreen.css" />
<!-- Leaflet -->
<link rel="stylesheet"
href="https://unpkg.com/leaflet#1.0.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.1/dist/leaflet.js"
type="text/javascript"></script>
<!-- Leaflet Plugins -->
<link rel="stylesheet" href="Control.MiniMap.css" />
<script src="Control.MiniMap.js" type="text/javascript"></script>
</head>
<body>
<div id="map" ></div>
<script type="text/javascript">
var map = new L.Map('map', { scrollWheelZoom: false});
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {/*minZoom: 5, maxZoom: 18,*/ attribution: osmAttrib});
map.addLayer(osm);
map.setView(new L.LatLng(59.92448055859924, 10.758276373601069),10);
//Plugin magic goes here! Note that you cannot use the same layer object again, as that will confuse the two map controls
var osm2 = new L.TileLayer(osmUrl, {/*minZoom: 0, maxZoom: 13,*/ attribution: osmAttrib });
var miniMap = new L.Control.MiniMap(osm2,
{ position: "topright",
centerFixed: [40.7842, -73.9919],
toggleDisplay: true,
zoomLevelFixed: true
}).addTo(map);
</script>
</body>
</html>
I appreciate any guidance in solving this issue. Thank you!
I suppose you should use disable instead of false.
map.scrollWheelZoom.disable();
It will also work when you pass as arguments:
var map = L.map('map', {
center: [51.505, -0.09],
zoom: 13,
scrollWheelZoom: false
});
This generates an error
leaflet.js:5 Uncaught TypeError: Cannot read property 'call' of
undefined
<!-- Leaflet -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
<!-- Mapbox GL -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.3/mapbox-gl.css" rel='stylesheet' />
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.3/mapbox-gl.js"></script>
mapboxgl.accessToken = YOUR_KEY;
var map = new mapboxgl.Map({
container: 'map',
style: YOUR_STYLE_URL
center: [0, 0],
zoom: 0
});
As far as i know that impossible, however Mapbox.js (built on Leaflet) supports style url's via L.mapbox.styleLayer since version 2.3.0:
L.mapbox.accessToken = YOUR_ACCESS_TOKEN;
var map = L.mapbox.map('map').setView([38.97416, -95.23252], 15);
// Use styleLayer to add a Mapbox style created in Mapbox Studio
L.mapbox.styleLayer('mapbox://styles/mapbox/emerald-v8').addTo(map);
See: https://www.mapbox.com/mapbox.js/example/v1.0.0/stylelayer/
Your question was about using leaflet 1.0 with mapbox styles, so I'll answer that (though you accepted an answer for using mapbox.js) .
The new mapbox style studio raster tiles are 512x512 pixels. You need to set up both tileSize and zoomOffset to make the tiles work correctly in leaflet.js , otherwise the tiles will look too small.
var myCenter = new L.LatLng(50.5, 30.51);
var map = new L.Map('map', {center: myCenter, zoom: 15});
var positron = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v8/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoidHJpbGxpdW10cmFuc2l0IiwiYSI6ImVUQ2x0blUifQ.2-Z9TGHmyjRzy5GC1J9BTw', {
tileSize: 512,
attribution: '© OpenStreetMap contributors, © CartoDB',
zoomOffset: -1
}).addTo(map);
Here you can test it: http://playground-leaflet.rhcloud.com/moy/edit?html,output
I tried out Leafletjs maxBounds with example code I found at Mapbox.
Below you find my complete code, also in a jsfiddle here.
<!DOCTYPE HTML>
<html>
<head>
<title>map - leaflet test bounds</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- leafletjs -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map">
<script>
var southWest = L.latLng(40.712, -74.227),
northEast = L.latLng(40.774, -74.125),
mybounds = L.latLngBounds(southWest, northEast);
var map = L.map('map').setView([40.743, -74.176], 17);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png' , {
maxBounds: mybounds,
maxZoom: 18,
minZoom: 16,
attribution: '© OpenStreetMap contributors'
}) .addTo(map);
L.marker([40.743, -74.176]) .addTo(map);
</script>
</div>
</body>
The jsfiddle result looks odd, I don't know why.
Why doesn't the upper code work like the Mapbox example?
This is the (my) final code.
var map = L.map('map', {
maxZoom: 18,
minZoom: 16,
maxBounds: [
//south west
[40.712, -74.227],
//north east
[40.774, -74.125]
],
}).setView([40.743, -74.176], 17);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}) .addTo(map);
L.marker([40.743, -74.176]) .addTo(map);
You must use bounds as an option of L.tileLayer, and not maxBounds.
Bounds reference
Also, it seems you've loaded a wrong file for the leaflet.css in JSFiddle, the correct source is this: http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css
Finally, avoid to use percent sizes in JSFiddle, use pixel ones instead.
Here's a working JSFiddle: http://jsfiddle.net/1zyL4q4a/4/
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png' , {
bounds: mybounds,
maxZoom: 18,
minZoom: 16,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
Unless im mistaken your example you have followed in the first example is not a leaflet map the api provider is mapbox. The giveaway is in the top html script links of your first example you followed. Another is the unusual behaviour of my leaflet map when using the code from first example.
The correct provider of answer uses the leaflet API as seen in
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png' , {
bounds: mybounds,
maxZoom: 18,
minZoom: 16,
attribution: '© OpenStreetMap contributors'
}).addTo(map);