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
})
});
Related
I want to add a point to the map with coordinates.
The point is always displayed in the center of the map. Here is my code.
// map creation
this.map = new Map({
view: new View({
center: [0, 0],
zoom: 1,
}),
layers: [
new TileLayer({
source: new OSM(),
}),
],
target: 'ol-map'
});
// adding a point
const point = new Point([+latitude, +longitude]);
const feature = new Feature(point);
const vectorSource = new VectorSource({features: [feature]});
const pointLayer = new VectorLayer({zIndex: 3, source: vectorSource});
this.map.addLayer(pointLayer);
map
When I get the coordinates of a point they are correct
point.getCoordinates()
Make sure you know your projection and your lat lon are the other way around.
let latitude = 41.18702782291;
let longitude = 15.450187402143;
let map;
$(document).ready(function() {
// CREATE MAP
map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
wrapX: false
}),
projection: 'EPSG:4326',
visible: true
})
],
target: 'map',
view: new ol.View({
projection: 'EPSG:4326',
center: [longitude, latitude],
zoom: 7,
})
});
// adding a point
const point = new ol.geom.Point([longitude, latitude]);
const feature = new ol.Feature(point);
const vectorSource = new ol.source.Vector({features: [feature]});
const pointLayer = new ol.layer.Vector({zIndex: 3, source: vectorSource});
map.addLayer(pointLayer);
});
I found this Question Show only United States when using Leaflet.js and OSM which is exactly what I'm looking for but the problem is I don't use leaflet. Currently using OpenLayers at the moment, saw some example here but no luck any ideas?
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([125.126012,6.066714]),
zoom: 17,
minZoom: 17,
maxZoom: 18
})
});
</script>
You would need to use the view extent property. Note that it restricts the location of the center of the map.
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([125.126012,6.066714]),
zoom: 17,
minZoom: 17,
maxZoom: 18,
extent:ol.proj.transformExtent([113,4, 119, 8], 'EPSG:4326', 'EPSG:3857')
})
});
I need to implement a function with openlayers-3.
Description:There are a series of images .png. I need to play them like a animation.I set the image source as ImageStatic,but When I set the current image visible is false ,it doesn't work. the visible property seems like not work.
Code:
var extent = [0, 0, 418, 600];
var projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: extent
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Group({
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'http://localhost:2265/images3/test2.png',
projection: projection,
imageExtent: extent,
})
}),
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'http://localhost:2265/images2/test1.png',
projection: projection,
imageExtent: extent,
})
})
]
})
],
target: 'map',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 2,
maxZoom: 8
})
});
var layers = map.getLayers().getArray();
var frame = 1;
setInterval(function () {
layers[frame].setVisible = false;
frame = (frame + 1) % 2;
layers[frame].setVisible = true;
},500);
map.layers[1] is a group, to get the image layers try:
var layers = map.getLayers().getArray()[1].getLayers().getArray();
You can also do 'real' animation by rendering directly to the canvas:
http://openlayers.org/en/latest/examples/feature-move-animation.html
http://openlayers.org/en/latest/examples/flight-animation.html
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
})
});
I am working with openlayers 3 with a layer from mapbox or openstreetmap and I need to draw some circles on it.
I am able to print the circles with a view with a projection EPSG:4326, but then I have no map. Changing the projection with a transform the map is displayed, but the points are all together. The only way I am made it work is using TileWMS as a source, but I am not able to use it in production environment
Here is my code:
version 1: working with TileWMS
var source = new ol.source.GeoJSON({
url: 'geojson url'
});
var pointsLayer = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 15,
fill: new ol.style.Fill({color: 'rgba(170,33,33, 0.8)'}),
stroke: new ol.style.Stroke({color: 'rgba(170,33,33, 0.3)', width: 8})
})
})
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
title: "Global Imagery",
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
})
}),
pointsSource
],
view: new ol.View({
projection: 'EPSG:4326',
center: [-82.3, -10.65],
zoom: 3
})
});
This is the result
Using mapbox or osm, failing:
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://api.tiles.mapbox.com/v4/XXXXX.kcp9cpdn/{z}/{x}/{y}.png?access_token=token'
})
}),
/*
new ol.layer.Tile({
source: new ol.source.OSM()
}),*/
pointsSource
],
view: new ol.View({
projection: 'EPSG:4326',
center: [-82.3, -10.65],
zoom: 3
})
});
This is the result
And finally, changing the view the map is displayed but the circles
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://api.tiles.mapbox.com/v4/XXXXX.kcp9cpdn/{z}/{x}/{y}.png?access_token=token'
})
}),
/*
new ol.layer.Tile({
source: new ol.source.OSM()
}),*/
pointsSource
],
view: new ol.View({
center: ol.proj.transform([-82.3, -10.65], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
And the result
Is there a way to make this work?
Thanks in advance.
I found the solution, here it is for it is helping anyone
Following this answer in gis stackexchange https://gis.stackexchange.com/a/118818/42868 There is an unstable option for the ol.source.GeoJSON object, so adding it in this way made it work
var source = new ol.source.GeoJSON({
url: 'geojson url',
projection: 'EPSG:3857'
});