I'm trying to build a map that pans by a few relative degrees a second by longitude, but I'm only seeing a way to pan by a number of pixels. This means it pans farther when zoomed out than zoomed in. What's a clean way to do this?
Here's the code I'm using to pan right now:
var map = L.map('map', {
minZoom: 1,
maxZoom: 6,
worldCopyJump: true,
}).setView([0, 0], 3);
L.tileLayer('maps/{z}/{x}/{y}.png', {
maxNativeZoom: 3,
reuseTiles: true,
unloadInvisibleTiles: false
}).addTo(map);
setInterval(function(){map.panBy([100, 0], {animate: true, duration: 1});}, 1000);
You can always convert latlng to pixels http://leafletjs.com/reference.html#map-project
Or you just use panTo http://leafletjs.com/reference.html#map-panto Which takes latlng
Related
Google Maps doesn't support 19 or 20+ zoom in the area where I want to use it. I'm trying it to do with css.
I'm creating the map, adding wheel event to recognize which zoom-level user in. If it's equal to 20, I'm adding css zoom property to the map. However, this time infowindow creating in wrong positions on my click.
map = new google.maps.Map(document.getElementById("map"), {
center: { lng: 1.393307, lat: 52.824281 },
fullscreenControl: false,
type: "HYBRID",
minZoom: 8,
maxZoom: 0,
zoom: 5,
gestureHandling: 'greedy',
mapTypeId: 'hybrid',
streetViewControl: false,
controlSize: 27,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.HYBRID, "Map"],
},
});
Wheel Event and the class' css
.zoom {
zoom: 2;
}
window.addEventListener('wheel', function (event) {
if (event.deltaY < 0) {
if (map.getZoom() == 20) {
$('#map > div').eq(0).addClass("zoom");
}
}
else if (event.deltaY > 0) {
if (map.getZoom() <= 20) {
$('#map > div').eq(0).removeClass("zoom");
}
}
});
Google Maps Click Event
google.maps.event.addListener(map, "click", (function (mapsMouseEvent) {
var position = mapsMouseEvent.latLng;
infowindow.setPosition(position);
infowindow.setContent("test");
infowindow.open(map);
}));
Jsfiddle live test is here; https://jsfiddle.net/mylayf/ubeaL9s2/13
By doing this:
.zoom {
zoom: 2;
}
You are changing the size of container. But zoom in map is done by loading a new layer data. By multiplying the size of container, the pictures will be bigger (along with buttons and etc.) but it's not loading a new layer. So the front window and container will have a shift. For example if you use a zoom of 2, the front window will be 1/4 of zoomed background image and if you click in middle, it will be exactly at the bottom right of background image.
So just change the maxZoom: 0 to something like maxZoom: 30. It will load the maximum resolution images (equal to maxZoom: 18). If it's not enough for your, there are no more resolution by this map and you need to switch to another map provider with more layers for zoom.
I'm trying to draw a circle on my Leaflet Map that should be always visible and centered even when user move or zoom in the map.
The following code works well when user move the map, but when the user zoom in or zoom out, the size of the circle is not updated. I would like to keep always the same dimension for the circle.
HTML
<div id="map" class="map" style="height:75vh;"></div>
JS
// Init Leaflet Map basically
this.map = L.map("map").setView([38.63, -90.23], 12);
window.map = this.map;
this.tileLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 20,
maxNativeZoom: 18,
attribution: '© OpenStreetMap, © CARTO'
});
this.tileLayer.addTo(this.map);
// Create circle that will be always visible and will have alwaus the same width.
this.circle = L.circle([38.63, -90.23], 3000, {
color: '#5d78ff',
fillOpacity: 0
}).addTo(this.map);
// Set circle always centered when map is moved.
this.map.on("moveend", (s) => {
this.circle.setLatLng(this.map.getCenter());
});
// todo: Set circle always centered when map is zoom in/out
this.map.on("zoomend", (s) => {
this.circle.setLatLng(this.map.getCenter());
console.log('test');
});
JSFIDDLE
https://jsfiddle.net/4uorasdn/
You can use CircleMarker instead of using Circle.
The relevant part of your code that needs to be changed should look something like this.
this.circle = L.circleMarker([38.63, -90.23], {
radius: 200,
color: '#5d78ff',
fillColor: '#f03',
fillOpacity: 0.2,
opacity: 1,
title: "test"
}).addTo(this.map);
And you can find a working jsfiddle here.
I have a map that is 8576x8576, and I keep getting console errors:
Failed to load resource: net::ERR_FILE_NOT_FOUND
Because leaflet are trying to load tiles that doesn't exists.
I have my bounds set and MaxBounds to prevent panning outside map area (to keep map on the center of the screen).
var map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
zoomControl: false,
crs: L.CRS.MySimple
}).setView([0, 0], 3);
L.tileLayer('assets/map/{z}_{x}_{y}.jpg', {
minZoom: mapMinZoom,
maxZoom: mapMaxZoom,
tileSize: 268,
noWrap: true,
reuseTiles: true,
tms: false,
bounds: mybounds,
errorTileUrl: "assets/map/404.jpg",
continuousWorld: true
}).addTo(map);
new L.Control.Zoom({position: 'topright'}).addTo(map);
var sidebar = L.control.sidebar('sidebar').addTo(map);
var mybounds = [[-8576 / 2, -8576 / 2],[8576 / 2, 8576 / 2]];
map.setMaxBounds([[-5600, -5600], [5600, 5600]]);
What I am doing wrong? Why leaflet keeps trying to load those tiles?
I tried to set MaxBounds like this:
map.setMaxBounds([[-8576 / 2, -8576 / 2],[8576 / 2, 8576 / 2]]);
And still get those errors.
You need to define mybounds before creating your tilelayer. If your bounds lie exactly on the edges of your tiles, you may also need to bring the bounds in by a tiny amount to keep the map from trying to load adjoining tiles. Here is an example with OSM tiles:
http://fiddle.jshell.net/nathansnider/2g4h5eu5/
I have a map and I want to center it to concrete point. Following implementation is working correctly:
var map = L.map('map', {
crs: crs
}
);
map.setView([58.66, 25.05], 2);
However, implementation below is not working correctly and does not center the map. Why it is happening? I get just blank grey area instead of my map. According to the documentation it does completely the same as the code above.
var map = L.map('map', {
crs: crs,
center: L.latLng(58.66, 25.05)
}
);
map.setZoom(2);
Why?
I think if you specify the center option when creating the map you also have to specify the zoom option or leaflet doesn't know what tiles to request.
var map = L.map('map', {
center: L.latLng(58.66, 25.05),
zoom: 2
});
When you use setView, you are setting center and zoom so leaflet knows the tiles to request.
Have you tried
var map = L.map('map', {
crs: crs,
center: L.latLng(58.66, 25.05),
zoom: 2
});
?
Here is the project
var map = new google.maps.Map(document.getElementById('map-canvas'), {
disableDoubleClickZoom: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
zoom: 15,
center: new google.maps.LatLng(34.239415, -118.529339),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
https://jsfiddle.net/yxg7spbp/2/
the problem is i want to zoom in closer to see the buildings outlines of the campus however if i change the zoom value past 15 it does not have any effect, how can i zoom in closer.
The Terrain map type is limited to a zoom of 15. If you want to zoom in more, use the ROADMAP map type (up to about 19) or SATELLITE map type (use the MaxZoom Service to determine the maximum zoom available)
related question: Google maps: change from map view to satellite view
fiddle that changes the mapType when the current type reaches its maxZoom
google.maps.event.addListener(map, 'zoom_changed', function () {
var maptype = map.getMapTypeId();
if (map.getZoom() >= map.mapTypes[maptype].maxZoom) {
if (map.getMapTypeId() == google.maps.MapTypeId.TERRAIN) {
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
} else if (map.getMapTypeId() != google.maps.MapTypeId.HYBRID) {
map.setMapTypeId(google.maps.MapTypeId.HYBRID)
map.setTilt(0); // disable 45 degree imagery
}
}
});;
The Google Maps API provides map tiles at various zoom levels for map type imagery. Most roadmap imagery is available from zoom levels 0 to 18, for example. Satellite imagery varies more widely as this imagery is not generated, but directly photographed.