I am writing a map application using openlayers3. I am upgrading from openlayers2 which works well. My issue is that the image returned from my wms server is not displaying in the div. The image returned is a png image. I know it returns a correct image because I save it in my api call to the WMS server as well as check the debugging tools in my browser and the image shows up, returned as a "image/png". I also have a div with id="map" and I set the width and height of the div. The zoom in and zoom out controls show up for the map but the actual image does not.
Code:
map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Image({
extent: parameters.maxExtent,
source: new ol.source.ImageWMS({
url: '../../WMS/floorplan?',
params: { 'LAYERS': '#Model.LayerName', 'VERSION': '1.3.0', 'FORMAT': "image/png", 'SHAPEFILE': '#Model.ShapeFile'},
ratio: 0.8,
serverType: 'mapserver'
})
})
],
view: new ol.View({
projection: '#Model.Projection',
center: [#Model.CenterLon, #Model.CenterLat],
extent: parameters.maxExtent,
zoom: 0.5
})
});
It seems setting a ratio on the ImageWMS source that is less than one causes this. See http://jsfiddle.net/zL9jhgqf/ (setting ratio to one and running it again makes it work).
source: new ol.source.ImageWMS({
url: 'http://demo.boundlessgeo.com/geoserver/wms',
params: {'LAYERS': 'topp:states'},
ratio: 0.8,
serverType: 'geoserver'
})
I created an issue about it, since I don't know what the expected behaviour is: https://github.com/openlayers/ol3/issues/3926
BTW. What is the use case for having a WMS layer covering less than the viewport?
Related
in the current Version of Google Maps Api v3 (using latest 3.x) the option "enableCloseButton" for StreetView has no effect, the close button remains hidden as by default, while others like "fullscreenControl", "linksControl" etc. work as expected.
The corresponding documentation is here: https://developers.google.com/maps/documentation/javascript/examples/streetview-controls?hl=en
It can be tested with the JSFiddle provided on the same page.
Slightly changed code:
function initPano() {
// Note: constructed panorama objects have visible: true
// set by default.
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map'), {
position: {lat: 42.345573, lng: -71.098326},
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
},
linksControl: false,
panControl: false,
fullscreenControl: false,
enableCloseButton: true
});
}
https://jsfiddle.net/f0490gnp/
Setting "enableCloseButton" to "true" in the example has no effect, the "x" is not showing in the upper right corner.
Is this a known bug, is there any workaround for this, or am I missing something? Currently when dragging the 'pegman' onto the map it is not possible to switch back to map view.
Thanks for any hint.
(Update: fixed jsfiddle link)
The "close button" is the right arrow that appears to the left of the address (when enableCloseButton:true, but not when enableCloseButton:false. If clicked, the panorama turns grey in the fiddle.
I'm using leaflet with custom CRS.Simple projection. If I draw a polyline at the page Load it is more or less drawn ok (Although much more accurate in firefox than in chrome) but if I drag the map the polyline remains in the same place of the browser window, so then appears shifted respect of the background map.
Example:
Initial load
After drag the map, the map moves but the polyline remains in the same place
To add the polyline I'm converting the coordinates to the CRS.Simple projection. I don't think there is a problem here as every other map marker or text appears correctly
.....
//initialize leaflet map
map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
zoomControl: false,
crs: L.CRS.Simple //simple coordinates system
}).setView([0, 0], mapMaxZoom);
//set the bounds of the map to the current dimension
var mapBounds = new L.LatLngBounds(
map.unproject([0, mapHeight], mapMaxZoom),
map.unproject([mapWidth, 0], mapMaxZoom)
);
//load the tiles
map.fitBounds(mapBounds);
L.tileLayer(mapData.info.tiles+'/{z}/{x}/{y}.png', {
minZoom: mapMinZoom,
maxZoom: mapMaxZoom,
bounds: mapBounds,
attribution: '',
noWrap: true,
continuousWorld: true
}).addTo(map);
.....
var pointList = [getMapCoordinates(1750,1750),
getMapCoordinates(1520,1764),
getMapCoordinates(1300,1560),
getMapCoordinates(1132,1258),
getMapCoordinates(1132,1060),
getMapCoordinates(926,960)];
polyline = new L.Polyline(pointList, {
color: 'red',
weight: 3,
opacity: 0.5,
smoothFactor: 1
});
polyline.addTo(map);
....
function getMapCoordinates(px,py)
{
//as we use simple system, transform the point (based on pixel) on map coordinates that leaflet understand
return map.unproject([px, py], map.getMaxZoom());
}
Any idea what I'm doing wrong, or is it a bug? Any workaround would be appreciated
Ok, it seems the problem was in stable version (0.7.3) Using dev version (1.0-dev) works ok and even solves the problem with the different browser drawing
Is it possible change the style of a external wms layer??
im trying to use this layer:
https://firms.modaps.eosdis.nasa.gov/wms/?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&LAYERS=fires24&width=400&height=250&BBOX=-26,34,35,82
with this code on openlayers3
var fill = new ol.style.Fill({color: 'GREEN'});
var stroke = new ol.style.Stroke({color: 'GREEN'});
var styles = [new ol.style.Style({
image: new ol.style.Circle({
fill: fill,
stroke: stroke,
radius: 5
})
})];
var fires = new ol.layer.Image({
name: 'fires',
source: new ol.source.ImageWMS({
url: 'https://firms.modaps.eosdis.nasa.gov/wms/',
params: {
'LAYERS': 'fires24',
'VERSION': '1.1.1'
}
}),
style: styles
});
the layer is displayed correctly but without my own styles.
Is it possible to do that or replace with a custom icon?
The WMS link you use is returning a PNG file, which I believe OpenLayers cannot style 'after the fact'. Once you've got it it's immutable - it's not 'data' but an image with transparency that is overlaid on top of your underlying map source.
There are some params you can pass into a wms call (as you've done) and the standard looks like it can support you passing styles into the call to the WMS server to get it to use those when rendering the image.
I've got a list of possible parameters from the geoserver website (a GIS server) - http://docs.geoserver.org/stable/en/user/services/wms/reference.html
Looking at that link it looks like sld or sld_body parameters may work. SLD is like OL styles but in XML. Details of these stylesheets are here - http://docs.geoserver.org/stable/en/user/styling/index.html#styling
I've had a go at this jsfiddle : https://jsfiddle.net/y7fj57dj/ but it's not working as such - it could either be my SLD (I'm not up to speed with it) or the NASA server doesn't know what to do with it/is ignoring it.
You may need to contact NASA server admins to confirm if you can style the WMS calls (support#earthdata.nasa.gov, retrieved by going to https://firms.modaps.eosdis.nasa.gov/wms/?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetCapabilities).
I am trying to use Jcrop with preview pane in the page of changing avatar. However, after uploading new image file, when I call setImage to set the new image(with different width/height) and also set the attr of the preview image, the preview pane show up incorrectly. I use firebug the trace, it seems the img is still using the height, width of previous image. I modify the tutorial3 in the download package, simply adding a botton to change the image to see if the preview pane is correct or not. I seem to be the same error. Here below is the code for button click function.
Any solutions?
$('#img1').click(function(e) {
$('#preview').attr('src','demo_files/img50d5753eb067c.jpg');
jcrop_api.setImage('demo_files/img50d5753eb067c.jpg');
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: 1,
boxWidth: 450
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});
});
I see the same problem with yours in this topic Change an Image while using JCrop and the answer of AdmSteck in which is the best one.
Hope this help!
within the unminified version of the plugin "boundx and boundy" are declared as local variables that do not get updated outside of the setImage function. All you need to do is remove the 'var' for these two variables and make them global.
from line 328,
var boundx = $img.width(),
boundy = $img.height(),
$div = $('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css({
position: 'relative',
backgroundColor: options.bgColor
}).insertAfter($origimg).append($img);
change to
boundx = $img.width();
boundy = $img.height();
var $div = $('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css({
position: 'relative',
backgroundColor: options.bgColor
}).insertAfter($origimg).append($img);
Pardon my noobishness, but, although I've seen this issue discussed, I haven't found an answer. I am trying to draw concentric circles on a Google Map using the API v3, making each clickable as on a bullseye target, but always the largest one ends up on top, which means it is the only clickable one.
The following uses an array called "subjects" that consists of increasing radii and various fillcolors.
for (i=0;i<subjects.length;i++) {
radi = subjects[i][0];
fillcolr = subjects[i][1];
zindx = subjects.length - i;
newcircle = new google.maps.Circle({
radius: radi,
center: centerPoint,
strokeWidth: 1,
fillOpacity: 1.0,
fillColor: fillcolr,
zIndex: zindx
});
// display it
newcircle.setMap(map);
// make outer circle clickable
google.maps.event.addListener(newcircle, 'click', function() {
circleClickedInfo(i);
});
The circles are there, the zIndex is set, but the biggest circle is always on top. I have tried setting zIndex on a pass afterwards, boosting each zIndex by 10000, reversing the order in which I create the circles, not setting the zIndex explicitly, etc. I'm sure I am missing something obvious (see the aforementioned noobishness), but I can't figure out what it is. TIA for any pointers...
Try this for every shape you need:
selectedShape.setOptions({zIndex:0});