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,
})
});
Related
I'm working on a custom interactive map but I'm running into the issue of my map repeats on the x & z.
I've added the noWarp: true but that is not making a difference.
const mymap = L.map('map', {
crs: L.CRS.Simple,
noWarp: true,
minZoom: 1,
maxZoom: 6,
zoom: 1,
center: [465, 465],
});
L.tileLayer("https://", {
}).addTo(mymap);
I need to constrain the map to only drag within the map view but It also needs to work across multiple resolutions:
var extent = [0, 0, 1685, 895];
var projection = new ol.proj.Projection({
units: 'pixels',
extent: extent
});
var map = new ol.Map({
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'assets/img/map.png',
projection: projection,
imageExtent: [0, 0, 1685, 895]
})
})
],
target: 'map',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 3,
maxZoom: 5,
minZoom: 3
})
});
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.
I am trying to load an image into my openlayers canvas with the ultimate goal of loading a png file of our map legend as a layer on top of our map. I've been able to float the legend above the map with using div tags, but we need the legend to be captured within the canvas so that it can be saved by the user to a png file with the canvas.toBlob() functon.
I am not getting any errors that I can find, but my image is not appearing on top of my map.
my Javascript:
var pixelProjection = new ol.proj.Projection({
code: 'pixel',
units: 'pixels',
extent: [0, 0, 800, 600]
})
var mapLayer = new ol.layer.Tile({
source: new ol.source.OSM({
url: 'http://184.185.140.81/osm_tiles/{z}/{x}/{y}.png'
}),
opacity: 0.3,
isBaseLayer: false
});
var imageLayer = new ol.layer.Image({
source: new ol.source.ImageStatic({
//url: 'http://184.185.140.81/Futura_sample.PNG'
url: 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png',
imageSize: [800, 600],
projection: pixelProjection,
imageExtent: pixelProjection.getExtent()
})
})
var map = new ol.Map({
layers: [
mapLayer,
imageLayer
],
controls: ol.control.defaults().extend([
new ol.control.ScaleLine()
]),
target: 'map',
view: new ol.View({
center: ol.proj.transform([4.666389, 50.009167], 'EPSG:4326', 'EPSG:3857'),
zoom: 4,
minZoom: 1,
maxZoom: 20,
})
});
$('#exportMap').on('click', function() {
console.log('click');
canvas = document.getElementsByTagName('canvas')[0];
canvas.toBlob(function (blob) {
window.saveAs(blob, 'map.png');
})
});
HTML:
<div id="map"></div>
<div id="exportMapDiv">
<input type="button" id="exportMap" value="download map">
</div>
This code is just trying to test the functionality with a sample png from wikipedia as I don't have our legend prepared yet. The commented url: is another sample image I have saved to /var/www/html/Futura_sample.PNG
What is it I am doing wrong?
Edit: solved. I need to fix the projection of my image. It was rendering and projecting the image fine, but somewhere in another galaxy so to speak.
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
})
});