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());
Related
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);
I am working on a Nuxt, Leaflet, Mapboxgl project.
This is how I init my map:
let mapOptions = {
container: 'map',
style: 'http://linkToMapStyle.com',
attributionControl: false,
center: [13.404954, 52.520008],
zoom: 5,
minZoom: 1,
preserveDrawingBuffer: true
};
_this.map = new mapboxgl.Map(mapOptions);
I'll be loading marker data from my REST endpoint on every map moveend event. So I'll be loading and deleting markers quite a lot. That's why I wanted to use layerGroup to group all my markers so I can remove them easier.
On the map.load event I'm trying to add the layerGroup and the markers to my layerGroup:
var marker1 = L.marker([13.404954, 52.520008]);
var marker2 = L.marker([14.404954, 51.520008]);
var markers = L.layerGroup();
markers.addLayer(marker1);
markers.addLayer(marker2);
markers.addTo(_this.map)
And it's giving my errors:
Error: layers.undefined: either "type" or "ref" is required
...
Error: layers.undefined: missing required property "source"
...
Error: layers.undefined: missing required property "id"
..
All the examples I found where without specifying any type of layer options so I don't understand why this is not working for me.
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.
I have a listener that will detect changes of the location of objects on databases. It will pass all the information of the object that is being changed.
I want to get all markers from the current map and find the marker that is affected. Once found, update the location.
But, I am still looking for the best ways to get all markers from the map and then I can update the location.
var map = L.map('map').setView([37.78541,-122.40787], 13);
var markers = new L.FeatureGroup();
var mapLink =
'OpenStreetMap';
L.tileLayer(
'https://{s}.tiles.mapbox.com/v4/examples.map-i87786ca/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZ2Vja29iIiwiYSI6IndzVjRGN0kifQ.lToORsjE0lkt-VQ2SXOb-Q', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
var marker = createCircleMarker([44.977368, -93.232659]);
marker._id = "69"; // Id of the marker
map.addLayer(marker);
var socket = io();
socket.on('update location', function(obj) {
// Get all markers and find markers with attribute obj.name to
// update the location to [obj.lat,obj.lon]
});
Use eachLayer method on L.map. Like
map.eachLayer(function (layer) {
if (layer.options.name === 'XXXXX') {
layer.setLatLng([newLat,newLon])
}
});
Documentation at http://leafletjs.com/reference-1.2.0.html#map-eachlayer
To add an option without using map.eachLayer; all layers within the map are internally stored in map._layers.
Use
map._layers.forEach(function (layer) {
...
});
to iterate over ALL Layer elements. Not just the ones currently visible.
I need high-res map images for my application (solar power system design). Bing Maps in OL is good for finding the right building, but too low-res for laying out solar panels. So, I want to use a small high-res static map for doing the layout. Here's what I have currently. First load the Bing Maps layer:
var layers = [];
var baseBingMapLayer = new ol.layer.Tile({
source: new ol.source.BingMaps({
key: 'XXXXX',
imagerySet: 'AerialWithLabels',
})
});
layers.push(baseBingMapLayer);
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
center: [-13569845.9277,4485666.89612],
zoom: 5,
})
});
Then when I want to load the static map, the strategy is to remove the Bing Maps layer and then add the static image layer. I'm doing the following:
var extent = [0, 0, 1024, 768];
var projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: extent
});
var staticURL =
"https://maps.googleapis.com/maps/api/staticmap"
+ "?center=37.7431569802915,-121.4451930197085&"
+ "zoom=20&size=1024x768&scale=2&zoom=3&"
+ "format=jpg&maptype=satellite"
+ "&key=XXX";
map.removeLayer(baseBingMapLayer);
var imageLayer = new ol.layer.Image({
source: new ol.source.ImageStatic({
url: staticURL,
imageSize: [1024,768],
projection: projection,
imageExtent: extent
})
});
var imageLayerView = new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 2
});
map.addLayer(imageLayer);
map.addView(imageLayerView);
Needless to say, this isn't working. I just get a blank screen with no exceptions thrown.
I actually had some success using jQuery to just empty the entire map div and start over with a new map object. However this seems to cause other problems and didn't seem like the right approach to me.
I'm going to continue working on this problem, but thought I would post since I'm sure I won't be the last person to try this little stunt :-)
Gary