Develop Reference

OpenLayers source.getExtent() / view.fit() does not show entire feature

Using OL 6.5.0, the following snippet produces a map where the feature goes outside of the bounds of the map, rather than being completely contained (with a 20px margin) within the bounds of the map.
const extent = layer.getSource().getExtent();
view.fit(extent, {
size: map.getSize(),
padding: [20, 20, 20, 20],
});
I tried setting nearest to true / false but the result is the same.
Result (ignore the fuzz):
I expect the entire feature to be within the border of the map, but it is not. Am I missing something?
Expected (or close to it -- again, ignore the fuzz):
Here's how I'm instantiating the map:
const map = this.map = maps[mapTargetId] = new ol.Map({
target: mapTargetId,
overlays: [overlay],
layers: await this.getBaseLayers(),
view: new ol.View({
projection,
center: [0, 0],
zoomFactor: 2,
zoom: defaultZoom,
minZoom: 1,
maxZoom: 12,
})
});

How to use GoogleMaps InfoWindow() on a google.maps.Circle?

The InfoWindow is not displayed if I use it in a loop.
Here is an example of how to use it with Marker:
https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/infowindow-simple
I made similar but with Circle, code below, as you can see, console.log is working, but the Infowindow isn't.
What am I missing?
function initMap() {
// Map settings, location : Barcelona, Spain
let map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.37, lng: 2.17},
zoom: 15,
mapTypeId: 'roadmap',
zoomControl: true,
mapTypeControl: false,
scaleControl: true,
streetViewControl: false,
rotateControl: false,
fullscreenControl: true
});
// Circle distribution data : location, radius, data
let distribution = {
target_garden: {
center: {lat: 41.371400, lng: 2.171942},
population: 1,
data: `<div>Text 01</div>`
},
target_wtc: {
center: {lat: 41.373477, lng: 2.177650},
population: 2,
data: `<div>Text 02</div>`
}
};
// Display 2 red circles on map
let target;
for (target in distribution) {
let circle = new google.maps.Circle({
// colors
strokeColor: '#000',
strokeOpacity: .2,
strokeWeight: 3,
fillColor: '#f00',
fillOpacity: 0.5,
// position
map: map,
center: distribution[target].center,
radius: Math.sqrt(distribution[target].population) * 100,
// settings
draggable: false,
editable: false,
clickable: true
});
let infowindow = new google.maps.InfoWindow({
content: distribution[target].data
});
// Event : on click a circle open infowindow
circle.addListener('click', function () {
infowindow.open(map, circle);
console.log('on');
});
}
}
I expect a click on the red circle to open an InfoWindow.

The problem isn't the loop, it's that you're trying to anchor the InfoWindow to a Circle. This is from the Maps API documentation:
open([map, anchor])
Opens this InfoWindow on the given map. Optionally, an InfoWindow can be associated with an anchor. In the
core API, the only anchor is the Marker class. However, an anchor can
be any MVCObject that exposes a LatLng position property and
optionally a Point anchorPoint property for calculating the
pixelOffset (see InfoWindowOptions).
So, you could extend Circle somehow to make sure it has a position property, or you can set the position of InfoWindow explicitly (and not use anchor):
circle.addListener('click', function () {
infowindow.setPosition(circle.center)
infowindow.open(map);
});

How to define locate control in Leaflet and Angular 2

I would like to define a locate control in my Leaflet Angular 2 project.
For now I have this code
ngOnInit() {
let map = L.map("map", {
center: [48.13, 11.57],
zoom: 13,
zoomControl: true,
maxZoom: 30,
minZoom: 8,
}).addLayer(this.googleStreets);
map.invalidateSize();
map.locate({setView: true, maxZoom: 16, watch: true});
L.control.scale().addTo(map);
function onLocationFound(e) {
var radius = e.accuracy/2;
L.circle(e.latlng, radius).addTo(map);
}
map.on('locationfound', onLocationFound);
}
The map searches location automatically and shows where user is.
I would like to add GPS icon thing to my map, like on the picture.
How could I implement this in Angular 2?

You can just use the location that you got from the locationFound() function and add a new marker with that latlngs.

Leaflet map keeps moving infinitely when using maxbounds

I created a crs leaflet map and I'm trying to set its maxbounds to the bounds of the crs image.
When I add the maxbounds attr there are three leaflet events that keep firing infinitely which cause the map to move infinitely.
These are the events:
leafletDirectiveMap.move
leafletDirectiveMap.movestart
leafletDirectiveMap.moveend
This is my code. I'm using leaflet angular directive
angular.module('pyvMap').controller('mainCtrl', [ '$scope', 'leafletData', 'leafletBoundsHelpers', function($scope, leafletData, leafletBoundsHelpers) {
var mapMinZoom = 2;
var mapMaxZoom = 6;
var maxBounds = leafletBoundsHelpers.createBoundsFromArray([[0,241.59375], [-132.65625, 0]]);
angular.extend($scope, {
defaults: {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
zoomControl: false,
crs: 'Simple',
attributionControl: false,
detectRetina: true,
tileLayer: "http://d30jy4vw1d2n56.cloudfront.net/tiles/{z}/{x}/{y}.png",
tileLayerOptions: {
minZoom: mapMinZoom,
maxZoom: mapMaxZoom,
// bounds: maxBounds,
opacity: 0.9,
// reuseTiles: true,
continuousWorld: true,
noWrap: true,
tileSize:256,
crs: 'Simple',
detectRetina: true,
},
},
center: {
zoom: 2
},
maxBounds: maxBounds
});}]);
HTML:
<leaflet center="center" maxBounds="maxBounds" defaults="defaults"></leaflet>
Thanks!

Once width and height attributes are added to the <leaflet> tag as required, your issue does not look reproducible, whether using Leaflet version 0.7.7 or 1.2.0:
https://plnkr.co/edit/iqiz29Jmz2WOgaNeNZIv?p=preview

openlayers 3 - Load TileLayer with highest zoom level tiles but display at all zoom levels

Is is possible to load a Tile layer from a TileImage source with tiles in its highest resolution (zoom) for a specific extent and have these tiles show for all zoom levels. I have high resolution imagery I wish to show as a layer above another Tile layer such as Bing or OSM.
Example source
var source = new ol.source.TileImage({
projection: 'EPSG:900913',
tileGrid: new ol.tilegrid.TileGrid({
projection: 'EPSG:900913',
extent: projectionExtent,
//extent: ol.proj.transformExtent([-83.7893967, 42.851353, -83.7855987, 42.849371], "EPSG:4326", "EPSG:900913"),
resolutions: resolutions,
tileSize:[pictometryImageSize, pictometryImageSize]
}),
tileUrlFunction: function(tileCoord, pixelRatio, projection){
var zoom = tileCoord[0];
console.log(zoom)
if(zoom == 21){
var tileGrid = this.getTileGrid();
var center = ol.proj.transform(ol.extent.getCenter(tileGrid.getTileCoordExtent(tileCoord)),"EPSG:900913", "EPSG:4326");
return 'www.myrealtileurl;
}
//return undefined;
//return 'https://dummy.com';
},
minZoom: 0,
maxZoom: 21
});

I hope I understand you correctly. First, you can restrict layer extent with extent. Second, you can lock zoom with maxZoom and minZoom properties. OpenLayers will resize tiles on his own. Here is an example, where ArcGIS tile layer is locked in extent and zoom:
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({ source: new ol.source.OSM() }),
new ol.layer.Tile({
extent: ol.proj.transformExtent([-110, 42, -100, 48], "EPSG:4326", "EPSG:3857"),
source: new ol.source.XYZ({
maxZoom: 6,
minZoom: 6,
url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +
'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-105.89, 45.09]),
zoom: 6
})
});