We Keep Coding

Leaflet.js tileSize command causes lower half of map to not render

I have created a leaflet map of a fictional map. It all works until I want to set tileSize to 512. Then the lower half of the map won't render on any zoom level larger than 0. All tiles are the size of 512.
The zoom 0 is 512, zoom 1 has 4x 512 tiles.
If I leave the tileSize out (default), then it all renders, however apparently at 256. Which is too small for the purposes I would like it to be. And adding more zoom levels is out of the question, because the original map file is only about 6000 pixels. Which is good for 0,1,2,3 zoom.
var mymap = L.map("mapid", {
minZoom: 0,
maxZoom: 3,
}).setView([0, 0], 0);
L.tileLayer('img/map/{z}/{x}/{y}.png', {
continousWorld: false,
noWrap: true,
crs: L.CRS.Simple,
tileSize: 512,
}).addTo(mymap);

Limit Panning OpenLayers 5

I'm using OpenLayers 5 for my project and wasn't able to find anything on here for that. In the past, OpenLayers has had restrictExtent, but that seems to have disappeared. Is there a way to limit or restrict the user's ability to pan vertically so that they can't drag it off the screen?
I've tried using the maxExtent on both the layer containing the map and the View, and I've been able to limit what's visible by doing so on the View. I haven't been able to limit the panning, however. Any help with this would be awesome.
map.js
componentDidMount() {
BASE_VIEW.setMinZoom(this.getMinZoom());
this.resize();
this.map = new Map({
controls: defaultControls().extend([MOUSE_POSITION_CONTROL]),
layers: [BASE_LAYER],
target: 'map',
view: BASE_VIEW
});
}
map-constants.js
const baseView = new View({
center: fromLonLat(conus, projection),
projection: projection,
zoom: 4,
extent: [Number.NEGATIVE_INFINITY, -43, Number.POSITIVE_INFINITY, 43]
});

The nearest equivalent to OpenLayers 2 restrictedExtent in OL3/4/5 is the misleadingly named extent option of ol.View but that is a center constraint which restricts the map center, and depending on resolution and map size it is possible to pan the edges of the map considerably beyond that.
To replicate restrictedExtent you would need to recalculate the center constraint and reset the view as the resolution changes (ignoring very small changes to avoid performance issues). Assuming you have opened the map at the required maximum extent (using .fit() perhaps) you could then use this code
var extent = map.getView().calculateExtent(); // opening coverage
var resolution = 0;
function resChange() {
var newResolution = map.getView().getResolution();
if (resolution == 0 || Math.abs((newResolution-resolution)/resolution) > 0.01) {
resolution = newResolution;
var width = map.getSize()[0] * resolution;
var height = map.getSize()[1] * resolution;
var view = new ol.View({
projection: map.getView().getProjection(),
extent: [extent[0]+(width/2), extent[1]+(height/2), extent[2]-(width/2), extent[3]-(height/2)],
center: map.getView().getCenter(),
resolution: resolution,
maxZoom: map.getView().getMaxZoom(),
minZoom: map.getView().getMinZoom()
});
view.on('change:resolution', resChange);
map.setView(view);
}
}
resChange();
Here's a demo. For efficiency I'm only resetting the view at integer zoom levels (resulting in a stretch and snap back effect when zooming out close to the edges), and for the demo to work full page I reset the map when resized.
var view = new ol.View();
var map = new ol.Map({
layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ],
target: 'map'
});
function openMap() {
map.setView(view);
var extent = ol.proj.transformExtent([ -2, 50.5, 2, 53], 'EPSG:4326', 'EPSG:3857');
// fit the extent horizontally or vertically depending on screen size
// to determine the maximum resolution possible
var size = map.getSize();
var width = ol.extent.getWidth(extent);
var height = ol.extent.getHeight(extent);
if (size[0]/size[1] > width/height) {
view.fit([extent[0],(extent[1]+extent[3])/2,extent[2],(extent[1]+extent[3])/2], { constrainResolution: false });
} else {
view.fit([(extent[0]+extent[2])/2,extent[1],(extent[0]+extent[2])/2,extent[3]], { constrainResolution: false });
}
var maxResolution = view.getResolution();
var resolution = 0;
function resChange() {
var oldView = map.getView();
if (resolution == 0 || oldView.getZoom()%1 == 0) {
resolution = oldView.getResolution();
var width = map.getSize()[0] * resolution;
var height = map.getSize()[1] * resolution;
var newView = new ol.View({
projection: oldView.getProjection(),
extent: [extent[0]+(width/2), extent[1]+(height/2), extent[2]-(width/2), extent[3]-(height/2)],
resolution: resolution,
maxResolution: maxResolution,
rotation: oldView.getRotation()
});
newView.setCenter(newView.constrainCenter(oldView.getCenter()));
newView.on('change:resolution', resChange);
map.setView(newView);
}
}
resChange();
}
map.on('change:size', openMap);
openMap();
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>
UPDATE
In OpenLayers 6 the view extent option does restrict the extent and not the center (useless constrainOnlyCenter is also specified) so no workaround is needed.

leaflet.js ImageOverlay zoom changes marker position

Am using ImageOverlay to use an image as a map, using Leaflet.js - but when changing the zoom the markers change position.
Have followed guideance in this tutorial and a code pen example is here.
// Markers
var markers = [{"title":"OneOcean Port Vell","description":"Super yacht marina","link":"http:\/\/www.oneoceanportvell.com\/","x":"68.28125","y":"68.443002780352178"}];
var map = L.map('image-map', {
minZoom: 2,
maxZoom: 4,
center: [0, 0],
zoom: 2,
attributionControl: false,
maxBoundsViscosity: 1.0,
crs: L.CRS.Simple
});
// dimensions of the image
var w = 3840,
h = 2159,
url = 'map.png';
// 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
L.imageOverlay(url, bounds).addTo(map);
// tell leaflet that the map is exactly as big as the image
map.setMaxBounds(bounds);
// Add Markers
for (var i = 0; i < markers.length; i++){
var marker = markers[i];
// Convert Percentage position to point
x = (marker['x']/100)*w;
y = (marker['y']/100)*h;
point = L.point((x / 2), (y / 2))
latlng = map.unproject(point);
L.marker(latlng).addTo(map);
}
In the codepen, change zoom to 4 to see the markers lose their position.
Ideally I'm trying to change the zoom to allow for different screen sizes and to get more of the map visible on mobile devices.
Also perhaps related, I can't see to get the zoomSnap feature to work to allow for fractional zooming.
Any pointers greatly appriciated.

map.unproject needs the zoom value at which you want the un-projection to be applied.
You correctly specify your static imageZoom value to unproject when computing your bounds and center, but not for your markers positions.
If the zoom parameter is not specified, then unproject uses the current map zoom level, i.e. what you have defined in your zoom variable. That is why when you change its value, unproject for your markers uses a different value, and they are positioned in different locations.
You even had to divide your x and y values (relative to your image) by 2, to account for the fact that in your initial situation, they are correct for an imageZoom of 4, but since you do not specify the zoom for unproject, the latter uses the current zoom (i.e. 3), so coordinates should be divided by 2 to be "correct".
Updated codepen: https://codepen.io/anon/pen/pLvbvv

Circle in map (size scalable)

I make map using Leaflet with one circle.
index code:
<div id="mapid" style="height: 500px;"></div>
<script type="text/javascript">
var mymap = L.map('mapid').setView([52.233333, 19.016667], 6);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
minZoom: 6,
}).addTo(mymap);
var x = 52.233333;
var y = 19.016667;
showCircle(x,y);
</script>
ShowCircle :
function showCircle(x,y)
{
var circle = L.circle([x,y], 1900, {
color: 'blue',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(mymap);
}
The problem is : the circle always have the same size.
I want to get: if i zoomout map the circle is bigger, when i zoomin the circle is smaller. (zoomin, zoomout is from scroll)
How to get this effect?

There are two kinds of circles in Leaflet: L.Circle and L.CircleMarker. L.Circle has a radius specified in meters, and L.CircleMarker has a radius specified in pixels.
Your question is not fully clear (what do you mean by "always have the same size"? Meters or pixels?); but I guess that you want to use L.CircleMarker instead of L.Circle.

Try the following , and tweak it as per your requirement :
var radiusQuantifier=100;
map.on('zoomend',function (e) {
circle.setRadius(map.getZoom()*radiusQuantifier);
});
This will change the radius of the circle on zoomend event.You can combine it with zoomstart event to get the desired result.
Note : Increase/Decrease the value of radiusQuantifier as it seems fit.

Tiling contiguous polygons in Google Maps

I'm trying to draw a hexagonal grid in Google Maps. I've come up with a solution based off this answer which looks fine at higher zooms, but when zoomed further out I find that the classic "orange-peel" problem occurs: The hexagons no longer fit together like they should:
I'm using this rather cool geodesy library to calculate hexagon centers based on an ellipsoidal model (since a 2d model clearly doesn't work on a real-world map) but it's still looking pretty bad when zoomed out.
Preferably, I'd like to draw the hexagons in such a way that they are exactly the same shape and size on screen.
Here's the code I've been working with, also available as a Plunker here. I've tried calculating the vertices of each polygon using the same geodesy library that I'm using to calculate the polygon centers, but it still doesn't look right when zoomed out.
var hexgrid = [];
function initialize(){
// Create the map.
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 51.5, lng: 0},
scrollwheel: true,
zoom: 8
});
// This listener waits until the map is done zooming or panning,
// Then clears all existing polygons and re-draws them.
map.addListener('idle', function() {
// Figure out how big our grid needs to be
var spherical = google.maps.geometry.spherical,
bounds = map.getBounds(),
cor1 = bounds.getNorthEast(),
cor2 = bounds.getSouthWest(),
cor3 = new google.maps.LatLng(cor2.lat(), cor1.lng()),
cor4 = new google.maps.LatLng(cor1.lat(), cor2.lng()),
diagonal = spherical.computeDistanceBetween(cor1,cor2),
gridSize = diagonal / 20;
// Determine the actual distance between tiles
var d = 2 * gridSize * Math.cos(Math.PI / 6);
// Clear all the old tiles
hexgrid.forEach(function(hexagon){
hexagon.setMap(null);
});
hexgrid = [];
// Determine where the upper left-hand corner is.
bounds = map.getBounds();
ne = bounds.getNorthEast();
sw = bounds.getSouthWest();
var point = new LatLon(ne.lat(), sw.lng());
// ... Until we're at the bottom of the screen...
while(point.lat > sw.lat()){
// Keep this so that we know where to return to when we're done moving across to the right
leftPoint = new LatLon(point.lat, point.lon).destinationPoint(d, 150).destinationPoint(d, 210).destinationPoint(d, 270).destinationPoint(d, 90)
step = 1;
while(point.lon < ne.lng()){
// Use the modulus of step to determing if we want to angle up or down
if (step % 2 === 0){
point = new LatLon(point.lat, point.lon).destinationPoint(d, 30);
} else {
point = new LatLon(point.lat, point.lon).destinationPoint(d, 150);
}
step++; // Increment the step
// Draw the hexagon!
// First, come up with the corners.
vertices = [];
for(v = 1; v < 7; v++){
angle = v * 60;
vertex = point.destinationPoint(d / Math.sqrt(3), angle);
vertices.push({lat: vertex.lat, lng: vertex.lon});
}
// Create the shape
hexagon = new google.maps.Polygon({
map: map,
paths: vertices,
strokeColor: '#090',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#090',
fillOpacity: 0.1,
draggable: false,
});
// Push it to hexgrid so we can delete it later
hexgrid.push(hexagon)
}
// Return to the left.
point = leftPoint;
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);

Please consider that Google Maps is in Mercator Projection.
You have to compensate for the sphere of the globe on the projection.
https://en.wikipedia.org/wiki/Mercator_projection