I am trying to "zoom in" (by interpolation if not possible more tham 18)...
var BING_KEY = 'AuhiCJHlGzhg93IqUH_oCpl_-ZUrIE6SPftlyGYUvr9Amx5nzA-WqGcPquyFZl4L'
var map = L.map('map').setView([1.2862100, 103.8541900], 18)
map.options.maxZoom = 20; // NOT WORKING
map.options.maxNativeZoom = 18; // NOT WORKING
var bingLayer = L.tileLayer.bing(BING_KEY).addTo(map)
It is not working (blank image), after 18 (clicking "+")
See Leaflet-JS BING-layer.
The options available for a L.Map are different from the options available for a L.TileLayer. Note how both Map and TileLayer both have a maxZoom option with different meaning, and how TileLayer inherits the maxNativeZoom option from the GridLayer class.
Therefore, apply the options to the TileLayer and not to the Map:
var map = L.map('map');
var bingLayer = L.tileLayer.bing({bingKey: 'ABCD', maxNativeZoom: 18, maxZoom: 20}).addTo(map);
Related
I have a web site to displaying historic maps. The maps have been tiled and are loaded as a tilelayer. Is there a way to getBound so I can set the map with fitBound. By default tilelayer does not have a getBounds method. I have tried making a featureGroup of the layer but that just raises an error. Am I missing something? Thanks.
// Initiate map
var map = new L.Map('map', {minZoom: 8, maxZoom: 18, zoom: 10});
// Display and set boundary
var layer = new L.TileLayer('../../maps/1866/{z}/{x}/{y}.png',{maxNativeZoom: 17});
//create featuregroup
var fgroup = new L.featureGroup([layer]);
fgroup.addTo(map);
map.fitBounds(fgroup.getBounds());
if I add "baseMaps" to my layer control, "huts" is actually a checkbox. But I only have one basemap, so I dont need that in my layer controls. But I still wanted to be able tu turn off my "huts" overlay. But as soon as I remove "baseMaps" "huts" becomes a radio button and cannot be turned off. Is there a way?
var huts = L.layerGroup();
var hut00 = L.marker([0, 0]).bindPopup('This is <b>HTML</b>content').addTo(huts);
bounds = new L.LatLngBounds(new L.LatLng(90, -180), new L.LatLng(-90, 180));
var baseMap = L.tileLayer("mapTiles/{z}_{x}_{y}.jpg", {tileSize: 512, minZoom: 1, maxZoom: 4, noWrap: true});
var pcMap = L.map('pcMapDiv', {
layers: [baseMap, huts],
center: bounds.getCenter(),
zoom: 0,
maxBounds: bounds,
maxBoundsViscosity: 1.0
});
pcMap.setView([0, 0], 0);
var baseMaps = {
"Plan": baseMap,
};
var overlays = {'Hütten': huts};
var layerControl = L.control.layers(baseMaps, overlays).addTo(pcMap);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(pcMap);
}
pcMap.on('click', onMapClick);
The 1st argument of L.control.layers populates the "base maps" (with radio button), while its 2nd argument populates "overlays" (with checkboxes).
If you only want overlays, you can simply pass null to the 1st argument:
L.control.layers(null, overlays)
or initialize an empty Control and explicitly add the overlay:
var layerControl = L.control.layers().addTo(map);
layerControl.addOverlay(huts, "Hütten");
I am trying to find a method of integrating the layer group control with the method of having 2 tile layers visible to enable the labels to sit above the polygons I generate.
http://leafletjs.com/examples/layers-control.html - layergroup guide
http://leafletjs.com/examples/map-panes.html - panes guide
My aim is to have the often used dark and light cartodb maps as options - but still making use of the panes functionality.
I have attempted to have something like the below however I don't believe leaflet is capable of handling it in this way.
Has anyone found a method yet to integrate this correctly?
var darkTile = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png', {
attribution: '©OpenStreetMap, ©CartoDB'
}).addTo(map);
var darkLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_only_labels/{z}/{x}/{y}.png', {
attribution: '©OpenStreetMap, ©CartoDB',
pane: 'labels'
}).addTo(map);
var lightTile = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
attribution: '©OpenStreetMap, ©CartoDB'
});//.addTo(map);
var lightLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
attribution: '©OpenStreetMap, ©CartoDB',
pane: 'labels'
});//.addTo(map);
var light = {
lightTile,
lightLabels
};
var dark = {
darkTile,
darkLabels
};
var baseMaps = {
"Light" : light,
"Dark" : dark
};
L.control.layers(baseMaps).addTo(map);
Make sure you create your pane explicitly:
map.createPane("labels");
Create Layer Groups to gather your Tile Layers (basemap and labels) instead of plain JS objects. Leaflet will not use your plain objects.
var light = L.layerGroup([
lightTile,
lightLabels
]);
var dark = L.layerGroup([
darkTile,
darkLabels
]).addTo(map); // Add the group to map, rather than its individual layers.
Demo: http://jsfiddle.net/3v7hd2vx/45/
I'm working on a dynamic image mapper that will users can load their floor plan of apartment then put markers on parts of floor. So I wan't to change url of image layer of Leaflet map dynamically.
I'm loading map with ChangeMap function for the first time. It loads my image correctly.
function ChangeMap(_url)
{
var map = L.map('map', {
minZoom: 1,
maxZoom: 5,
center: [0, 0],
zoom: 3,
crs: L.CRS.Simple
}).setView([50.4333, 30.5167], 3);
// dimensions of the image
var w = 1526,
h = 626,
url = _url;
// calculate the edges of the image, in coordinate space
var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
var bounds = new L.LatLngBounds(southWest, northEast);
// add the image overlay,
// so that it covers the entire map
var overlay = L.imageOverlay(url, bounds);
overlay.addTo(map);
}
But if I try another time without refresh the page I'm getting an error "map container is alreay initialized". After that error I thought I can add div with id='map' dynamically like this.
var mapContainer = $("#mapContainer");
mapContainer.append("<div id='map' width='100%' height='400px'></div>");
I added that append function at the beginning of my ChangeMap() function. But this time there was no map on page. How can I do this ?
Only initialize the map once...So take var map = L.map('map', {... out of ChangeMap and only run it once before.I'd also recommend only initializing the L.imageOverlay once...and using setUrl to dynamically swap when needed inside ChangeMap.
They asked me for a 'toggle button' to switch the clustering on and off Can someone help me to achieve clustering on/off?
Note: loading more than 30,000 points
Create two layers, one with and one without the marker clustering and add them to the leaflet control. For example:
var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
denver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
aurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
golden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');
var cities = L.layerGroup([littleton, denver, aurora, golden]);
var citiesClustered = new L.MarkerClusterGroup();
markers.addLayer(littleton);
markers.addLayer(denver);
markers.addLayer(aurora);
markers.addLayer(golden);
var streets = L.tileLayer(mapboxUrl, {id: 'examples.map-i86knfo3', attribution: mapboxAttribution});
var map = L.map('map', {
center: [39.73, -104.99],
zoom: 10,
layers: [streets, cities]
});
var baseMaps = {
"Streets": streets
};
var overlayMaps = {
"Cities": cities,
"Clustered cities": citiesClustered
};
L.control.layers(baseMaps, overlayMaps).addTo(map);
You can also create a custom control that will de-cluster the markers but this control already exists and it's easy to implement.