OpenLayers, how restricting WMS layer extent - gis

I'm able to create an OpenLayers Map with maxExtent and restrictedExtent properties.
Also I have play with WMS layer and its maxExtent property, but the problem comes when use singleTile in the WMS layer.
What I want is to have a WMS layer that gets only one image from server but restricted to the bounds I want. Because this I used singleTile=true, ratio=1 and maxExtend=my_desired_extent.
But it always request the whole map view.
Any ideas how to achieve it.
Thanks in advance.
Next code shows a map with a base layer and a costline line layer I would like to use in singleTile mode and limiting the are they must request to WMS:
<script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
<div id="map" style="width: 700px; height: 500px;"></div>
<script type="text/javascript">
var map = new OpenLayers.Map("map");
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS Basic", "http://labs.metacarta.com/wms/vmap0",
{
layers: 'basic'
});
map.addLayer(wms);
var restricted = new OpenLayers.Layer.WMS("Coast Line", "http://labs.metacarta.com/wms/vmap0",
{
layers: 'coastline_01,coastline_02'
},
{
opacity: 0.6,
singleTile: true,
ratio: 1,
isBaseLayer: false,
maxExtent: OpenLayers.Bounds.fromString("-10,-90,30,90")
});
map.addLayer(restricted);
map.setCenter(new OpenLayers.LonLat(0,40), 3);
</script>
I'm looking at OpenLayers source and seems what I want is not implemented so I need to create some WMS subclass or redefine some WMs layer methods.
I would appreciate any help.
Thanks.

If you are looking at restricting the whole map to the extent your talking about and not allowing users to pan outside of the extent you can try something like the following.
var extent = new OpenLayers.Bounds({-10,-90,30,90});
function init() {
var options = {
restrictedExtent: extent
};
map = new OpenLayers.Map('map', options);
var restricted = new OpenLayers.Layer.WMS("Coast Line", "http://labs.metacarta.com/wms/vmap0",
{
layers: 'coastline_01,coastline_02'
},
{
opacity: 0.6,
singleTile: true,
ratio: 1,
isBaseLayer: false
});
map.addLayer(restricted);
The difference here is that I have set the extent on the whole map not just the layer. Note that you will need to control the maximum zoom level as well. If you don't a user can still zoom out and data passed the extents will be shown though they will not be able to pan the view on the map.
If you want the map to pan outside of the extent specified but just not that layer then there are a number of approaches.
If you have access the the WMS server that the layer is served from you could add a setting there to restrict the extent of the layer server.
Check this link http://docs.geoserver.org/latest/en/user/webadmin/data/layers.html and read the "Bounding Boxes Section"
If you don't have access to the WMS server and you just want to restrict the area that is requested from the WMS server from the client side you could try using the OpenLayers.layer.WMS class with a different strategy. See below for an example:
var myfilter = new OpenLayers.Filter.Spatial({
type: OpenLayers.Filter.Spatial.BBOX,
value: OpenLayers.Bounds.({-10,-90,20,90})})
var filterStrategy = new OpenLayers.Strategy.Filter({filter: myFilter});
var restricted = new OpenLayers.Layer.WMS("Coast Line", "http://labs.metacarta.com/wms/vmap0",
{
layers: 'coastline_01,coastline_02'
},
{
opacity: 0.6,
singleTile: true,
ratio: 1,
isBaseLayer: false,
strategies: [filterStrategy]
});
map.addLayer(restricted);
Please note that I have not tested this code and it may take a little refining to get it to work.

Related

is there possible for set rotation and scale to raster static image source in open layer 6

I am using open layers 6 lib for map rendering and events.
my application needed same like this example http://viglino.github.io/ol-ext/examples/layer/map.geoimage.html i.e. Example have ol.source.GeoImage..
I have tried
I am displaying raster images on map using this sample code is
const url = imagurl;
const extent = [0, 0, imageData.width, imageData.height];
const projection = new Projection({
code: 'xkcd-image',
units: 'pixels',
extent,
});
const imageLayer = new ImageLayer({
source: new Static({
url,
projection,
imageExtent: extent,
}),
});
and i am using affine transformation lib and returns scaling, rotation and transformation..
its giving the values
scaling : 327.805670381418,327.805670381418
rotation : -0.1310210334156003
transformation : 7179251.8557908312,6022627.228704552
i need to add this code into ol-6 static image source
source: new ol.source.GeoImage(
{ image,
imageCenter: transformation,
imageScale: scaling,
imageRotate: rotation,
//projection: pixelProjectio
})
suggest or help on this.. thanks in advance.. and save my days..

Cesium - Applying color filter to ImageryLayer

Has anyone attempted to do this? As far as I can tell from the documentation, there doesn't seem to be a built in function for achieving this. Does anyone know if this is possible? Is it, possibly, a feature that the authors might intend to add to the platform?
The ImageryLayer documentation shows how to control brightness, contrast, hue, saturation, and gamma correction.
To get a globe with a solid color, you can remove the imagery layers like so:
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false
});
var globe = viewer.scene.globe;
globe.imageryLayers.removeAll();
globe.baseColor = Cesium.Color.LIGHTSLATEGRAY;
A "minimalist map" (as you mention in the comments) is something you would probably need to get from a custom imagery provider. You may want to check out Stamen Maps for some examples of this. In particular, note their "Toner" map comes in a number of sub-varieties, any of which can be selected in Cesium.
For example, to try the "Toner Background" version, you would use:
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
imageryProvider: Cesium.createOpenStreetMapImageryProvider({
url : 'https://stamen-tiles.a.ssl.fastly.net/toner-background/',
credit : 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.'
})
});
EDIT: #EmmanuelBuckski (OP) took this idea and ran with it, mixing the above two techniques together to produce a result that looks really nice! Check it out:
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false
});
var globe = viewer.scene.globe;
globe.imageryLayers.removeAll();
globe.baseColor = Cesium.Color.fromCssColorString('#f3f3f3');
var tonerLayer = globe.imageryLayers.addImageryProvider(
Cesium.createOpenStreetMapImageryProvider({
url : 'https://stamen-tiles.a.ssl.fastly.net/toner-background/',
credit : 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.'
})
);
tonerLayer.alpha = 0.1;

In OL3, vector data layer not visible after map setCenter or zoom

Migrating a map to use OL3. When I call map.getView().setCenter or map.getView().zoom on the map, the map behaves correctly, but my vector data layer is no longer visible. I have to do a MouseWheelZoom interaction on the map and then the data layer shows up. This is similar to the issue found in this unanswered Stackoverflow post (How to reload WMTS Tiles after progromattically changing the map center and zoom?) except my map tiles render properly, it is my vector layer that is not visible.
I am creating the WMS tiles layer and map with this:
div = #get 'element'
layers = [ new (ol.layer.Tile)(
title: 'Imagery'
source: new (ol.source.TileWMS)(
url: WMS_VMAP_MAP_SERVER_URL
name: 'VMAP'
params:
LAYERS: 'basic'
FORMAT: 'image/png'
TRANSPARENT: true)) ]
map = new (ol.Map)(
interactions: ol.interaction.defaults().extend([ new (ol.interaction.Select)(style: selectedIconStyle) ])
controls: ol.control.defaults().extend([ new (ol.control.ScaleLine)(units: 'nautical') ])
layers: layers
target: div
view: new (ol.View)(
projection: 'EPSG:4326'
center: [
0
0
]
zoom: 1
maxResolution: 0.703125))
an individual feature is created using this:
feature = new ol.Feature({
geometry: new ol.geom.Point([lng, lat], 'XY'),
title: 'some title'
latitude: lat
longitude: lng
})
vectorSource.addFeature feature
the vector layer is add using this:
vectorLayer = new (ol.layer.Vector)(
source: vectorSource #new (ol.source.Vector)({})
style: circleIconStyle #my defined icon style
id: 'MYDATA'
)
map.addLayer vectorLayer
and when the following event fires...
map.on('singleclick', (e) ->
map.forEachFeatureAtPixel(e.pixel, ((feature, layer) ->
...
)
)
...as part of the event handler I am doing this:
map.getView().setCenter [
feature.get('longitude')
feature.get('latitude')
]
map.getView().setZoom 3
The map centers and zooms correctly, but my vector layer data does not show up by default. Is there something else I am not doing or calling in order to refresh the data layers after setCenter or zoom on the view? or is it something else I have incorrect in how I am setting this up?
thanx
Fixed. The issue was the coordinates were being treated as strings for the Geometry and not numbers. The fix is to ensure that where coordinates are being set, that they are explicitly treated as a number to remove ambiguity from the equation. So everywhere I set a lat/lon (or latitude/longitude) in the map code, I used Number(lat) and Number(lon) instead.
Props to Eric Lemoine for his answering of another issue located at http://comments.gmane.org/gmane.comp.gis.openlayers.devel.ol3/4773 as that is where I saw his solution to that marker display problem and thought it might address mine as well. And it did.

custom control position for street view google map

I am using street view on my site with pancontrols and zoomControls in it. For now google provides us some defined positions like RIGHT_CENTER etc. I want my custom position using css, I have taken help from this link Google Maps API V3 custom controls position but it is not working may be because it is for Road map and I need for street view. The code which I have used for calling street view is
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var panoOptions = {
position: fenway,
pov: {
heading: 280.19,
pitch: -22.444,
zoom:0.2
},
addressControl: false,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
},
panControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_CENTER
},
enableCloseButton: false
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'), panoOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
Thanks in Advance.
Check Custom Street View examples and this CUSTOM STREET VIEW FIDDLE
AFAIK you must link your panorama to the image of the streetview, thats nice if you want to make your own street view, if you want to get a google one, you must get the URL to force the view enter in streetview.
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
// Note: robust custom panorama methods would require tiled pano data.
// Here we're just using a single tile, set to the tile size and equal
// to the pano "world" size.
return 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQTaHe0F0J39SXbiRF43pz2wtyfD6kypCMrLxhWPkq9EACNgwO0iaMbJFM';
}
You have everything that you need to do this in the answer that you linked to above. You can pick from one of two choices:
The hack... This isn't recommended because if google maps decides to
change their layout, your code will break. To do this for
streetview, inspect the streetview window to find which 'gmnoprint'
you want to move. As an example, putting this after the panorama
load, moves the controls:
setTimeout( function() {
$($('div.gmnoprint')[4]).css({left: '-300px', background: 'red'});
}, 1000);
The best way to do it, as suggested at Google Maps API V3 custom controls position is to hide the streetview controls, create your own controls, and put them wherever you like. This takes much more effort, but it will not break when the streetview layout changes.

Google Street View in building worked - now broken

So, i have a problem. I had google maps street view on my site, there was a building panorama (inside), now API shows only street view near this building. Why and how can i fix it?
Here is my code:
function initialize() {
var fenway = new google.maps.LatLng(52.4980685,13.2951895);
var panoramaOptions = {
zoom: 1,
panControl:false,
zoomControl:false,
mapTypeControl:false,
scaleControl:false,
rotateControl:false,
streetViewControl:false,
overviewMapControl:false,
disableDefaultUI: false,
addressControl: false,
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM,
hide: true
},
position: fenway,
pov: {
heading: 0,
pitch: 0
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
google.maps.setStreetView(panorama);
}
google.maps.event.addDomListener(window, 'load', initialize);
This may be a kind of bug(feel free to report it).
I guess you are talking about the place "Shebell Institut".
Let me explain why it's a bug:
Currently
the ID for this panorama is (at least for me):ag1bfIf47xUAAAGuxVUjCQ
and the location of the panorama(reported by the StreetViewService): (52.498042,13.29517199999998)
The location in your code differs a little bit, but when I use the exact location it should show the desired panorama(because it's the nearest)...but it doesn't.
Also when I query the panorama via StreetViewService.getPanoramaByLocation another panorama (with another location) will be returned, although the documentation says:
If the radius is less than 50 meters, the nearest panorama will be returned.
...but when I use the exact location it shouldn't return a panorama with another location.
I don't have a solution, because regarding to the documentation panorama-ID's are only stable within sessions.
But this must not mean that the panorama-ID must change often(I don't know what forces the change of a panorama-ID, but I can't imagine that the ID will be changed randomly).
So let's give it a try and use the panorama-ID(optionally).
set the panorama-location(fenway in this case) to
(52.498042,13.29517199999998)
request the panoramaData based on the ID (ag1bfIf47xUAAAGuxVUjCQ)
when both locations (fenway and the location of the returned panorama) are equal you may assume that it's still the ID of the desired panorama and use this panorama
new google.maps.StreetViewService()
.getPanoramaById('ag1bfIf47xUAAAGuxVUjCQ',
function(data,status){
if(google.maps.StreetViewStatus.OK===status
&&
data.location.latLng.toUrlValue()==fenway.toUrlValue()
){
panorama.setPano(data.location.pano);
}
});
Demo: http://jsfiddle.net/doktormolle/uwqvr5ee/
When it's sometimes not the desired panorama you may send a notification to the site-admin so that he may update the pano-ID.
I know it's not perfect, but it's the only approach I can think of so far(apart from a custom panorama)