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
Related
So I have been trying to place BoatMarker or WindBarbs to a leaflet map but when I put this code in, it returns a blank map. If I remove these variables the map will suddenly show up. I have no idea why this does not work, as there arent any errors or messages that pop up. I've put my code below, mostly taken from Awesome Panel example (https://awesome-panel.org/reactive_leaflet):
import panel as pn
class LeafletMap(pn.reactive.ReactiveHTML):
_template = """<div id="mapid" style="height:100%"></div>"""
__css__ = ["https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"]
__javascript__ = ["https://unpkg.com/leaflet#1.7.1/dist/leaflet.js", "https://unpkg.com/leaflet.boatmarker/leaflet.boatmarker.min.js"]
_scripts = {
"render": """
var mymap = L.map(mapid).setView([50, 0], 6);
state.map=mymap
var tileLayer = 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.eyJ1IjoibWFyY3Nrb3ZtYWRzZW4iLCJhIjoiY2s1anMzcG5rMDYzazNvcm10NTFybTE4cSJ9.TV1XBgaMfR-iTLvAXM_Iew'
}).addTo(mymap)
var marker1 = L.marker([48, -2], name='marker1');
var marker2 = L.marker([50, 0], name='marker2');
var marker3 = L.marker([52, 2], name='marker3');
var boatmarker = L.boatMarker([48, -2], name='marker4');
var layer1 = L.layerGroup([marker1, marker2, marker3, boatmarker]);
layer1.addTo(mymap)
""",
# Need to resize leaflet map to size of outer container
"after_layout": """
state.map.invalidateSize();console.log("invalidated");
""",
}
leaflet_map = LeafletMap(min_height=700, sizing_mode="stretch_both")
pn.Row(leaflet_map, sizing_mode="stretch_both").servable()
I've tried the same method for other leaflet custom markers and markings, like wind barbs (https://github.com/spatialsparks/Leaflet.windbarb/blob/master/README.md). The same issue also occurs.
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.
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);
I am looking for a way to add images to a 'leaflet map' using Javascript.
What I want to do is to load image, adjust its size and position, and attach it to a leaflet map.
Here's a basic demo showing how to add an image using imageOverlay.
You adjust the position and size of the image by providing imageBounds
// center of the map
var center = [-33.8650, 151.2094];
// Create the map
var map = L.map('map').setView(center, 5);
// Set up the OSM layer
L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Data © OpenStreetMap',
maxZoom: 18
}).addTo(map);
// add a marker in the given location
L.marker(center).addTo(map);
L.marker([-35.8650, 154.2094]).addTo(map);
var imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Sydney_Opera_House_-_Dec_2008.jpg/1024px-Sydney_Opera_House_-_Dec_2008.jpg',
imageBounds = [center, [-35.8650, 154.2094]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
html,
body {
height: 100%;
}
#map {
height: 100%;
}
<script src="https://unpkg.com/leaflet#1.0.2/dist/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet#1.0.2/dist/leaflet.css">
<div id="map"></div>
I built a map using Node+Jade+Express+Sqlite. I am trying to add a minimap using a plugin. I added a function to show it but nothing happens.
Here is the code I am using
HTML //here my html code, I use a spin while loading the layers and a function to load the minimap, but the minimap does not show.
According to Minimap's documentation, you cannot use the same layer object again, as that will confuse the two map controls, so, that's why needs to create a new object.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./stylesheets/leaflet-0.7.7/leaflet.css">
<body>
<input value=" + " onclick="showLayer('outdoors','http://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png')" id="addOutdoors" type="button">
<div id="map" style="width: 100%; height: 800px"></div>
<script src="./javascripts/leaflet-0.7.7/leaflet.js"></script>
<!-- Spin's include files: https://github.com/makinacorpus/Leaflet.Spin -->
<!-- MiniMap's include files: https://github.com/Norkart/Leaflet-MiniMap -->
<script>
var map;
var mbTiles = new L.tileLayer('tiles?z={z}&x={x}&y={y}', {
tms: true,
attribution: 'test',
opacity: 0.7
});
map = new L.Map("map",{
fullscreenControl: true,
zoom: 3,
center: [-33.49702,-70.65462],
layers: [mbTiles]
});
function showLayer(layerName,layerURL){
tileLayer = L.tileLayer(layerURL, {
attribution: 'Map data © OpenStreetMap',
});
showLoading(layerName,layerURL);
}
function showLoading(layerName, layerURL) { //this function show the spin image while loads the layer
map.spin(true);
setTimeout(function () {
map.addLayer(layerName);
map.spin(false);
}, 3000);
showMiniMap(layerURL);
}
function showMiniMap(layerURL){//this function must show the minimap
var osm2 = new L.TileLayer(layerURL, {minZoom: 0, maxZoom: 13, attribution: osmAttrib });
var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true }).addTo(map);
}
</script>
</body>
</html>
Any ideas?
Besides several other mistakes, the probable one that kills your mini-map is the missing definition for osmAttrib variable.
Other mistakes:
Missing head closing tag.
Use of addLayer with a string as argument, instead of a Layer object.
Demo: http://plnkr.co/edit/ipy91EvabCmKAzAQ4yes?p=preview