I'm trying to figure how to use GPS coordinates in OpenLayers
A lot of older posts are referring to new OpenLayers, well that isn't available in 3.4 where everything is embedded in ol.
I figured this should be doable by something like this
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.BingMaps({
key: '',
imagerySet: 'Aerial'
})
})
],
//projection: "EPSG:4326",
//displayProjection: "EPSG:3857",
view: new ol.View({
//center: [-13553864, 5918250],
center: new ol.geom.Point(ol.proj.transform([58.4108600, 15.6215700], 'EPSG:4326', 'EPSG:3857')),
zoom: 4
})
});
But no, it sais TypeError: undefined is not a function
It is the new ol.geom.Point(ol.proj.transform([58.4108600, 15.6215700], 'EPSG:4326', 'EPSG:3857')) that is causing all the trouble, this is where almost any example say "use var lonlat = new OpenLayers.LonLat..."
Thanks
I was looking for this function too, and I have found it in some of the examples on their site.
You can use ol.proj.fromLonLat([19.062072, 47.473478]).
https://openlayers.org/en/latest/apidoc/module-ol_proj.html#.fromLonLat
Old link: http://openlayers.org/en/v3.13.1/apidoc/ol.proj.html#.fromLonLat
The ol.View center property expect as a input an object of type ol.Coordinate. This is basically an Array with lon/lat in it (e.g. [-13553864, 5918250]) What you do is you use an Object of type ol.geom.Point as center property. Simple pass as center this:
ol.proj.transform([58.4108600, 15.6215700], 'EPSG:4326', 'EPSG:3857')
and it should work.
Related
I am trying to label vector tile point features but they always gets cropped at the tile border. I have tried (among many other things) using the renderBuffer option with no success.
I am using OL 3.19 and the vector tiles are served with Geoserver 2.10RC1 and I get the same errors in my production environment as well as editing an Boundless example (http://suite.opengeo.org/docs/latest/dataadmin/vectortiles/index.html).
I think maybe the tiles are served correctly from Geoserver and that Openlayers somehow render and then slices the tiles before presentation but I am kind of stuck on this.
Any ideas?
Screenshot of the way it looks
And the code snippet:
<script>
var style_simple = new ol.style.Style({
fill: new ol.style.Fill({
color: '#ADD8E6'
}),
stroke: new ol.style.Stroke({
color: '#880000',
width: 1
}),
text: new ol.style.Text({
text:'LOREMIPSUM'})
});
function simpleStyle(feature) {
return style_simple;
}
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: [0,0],
zoom: 4
}),
layers: [new ol.layer.VectorTile({
renderBuffer:50, //doesn't matter
style:simpleStyle,
source: new ol.source.VectorTile({
tilePixelRatio: 1,
tileGrid: ol.tilegrid.createXYZ({maxZoom: 19}),
format: new ol.format.MVT(),
url: 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/testlayer#EPSG%3A3857#pbf/{z}/{x}/{-y}.pbf'
})
})]
});
</script>
I have the same problem with ol.layer.VectorTile and text labels.
All labels are sliced on the tile boundaries.
Full example: https://jsfiddle.net/rn3qc4ca/
I asked the openlayers developers for help: https://github.com/openlayers/ol3/issues/6275
-> This is not a bug in openlayers. The mapbox tiles really repeat the label points in neighbored tiles. If you use very big fonts the label will still be cropped.
My (unimplemented) idea is to place all labels into a separate ol.layer.Vector layer. As this type of layer is not sliced into tiles it is always printed completely.
I am using OpenLayers 3.5.0 to embed a map in my website, and place a marker overlay at specific coordinates. I've also added a fullscreen control. Both work individually, but in full-screen mode the marker is no longer at the specified coordinates. It also moves around when panning instead of staying fixed to one map position.
Here's the code that sets up the map:
function map(lon, lat) {
var coords = ol.proj.fromLonLat([lon, lat], 'EPSG:3857');
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.FullScreen()
]),
layers: [ layer ],
target: 'map',
view: new ol.View({
maxZoom: 19,
zoom: 15,
center: coords
}),
interactions: ol.interaction.defaults({mouseWheelZoom:false})
});
map.addOverlay(new ol.Overlay({
position: coords,
positioning: 'bottom-center',
element: $('<img>')
.addClass('location-popover')
.attr('src', 'pin.jpg')
}));
}
Is there a way I can make the overlay play nicely in full-screen mode?
I had a similar issue with the popovers/markers being in the wrong position. Not sure if it's the same thing you're experiencing but in my case I was appending data to the page along with the markers, and this was adding a scrollbar to the window. This affected the positioning, so what I had to do was call
map.updateSize();
after I was done adding everything. After that everything lined up correctly.
I am trying to display two layers using Openlayers 3, one is a map of Greenland, and the other one is an area of interest. Both layers are tiled.
It seems to be working, but all I get are transparent tiles, so somehow I am placing the view in an area where there is nothing. I am using a UTM 24 N projection (which is the original projection of the layers involved, so no transformation is needed).
Here is my code:
var utm24_projection = new ol.proj.Projection({
code: 'EPSG:32624',
extent: [-396882, 6394710, 1280839.6, 9750153.2],
units: 'm',
axisOrientation: 'neu'
});
ol.proj.addProjection(utm24_projection);
layer1 = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://www.ourmapserver.gl/geoserver/wms',
params: {'LAYERS': 'ourcompany:greenland', 'TILED': true},
serverType: 'geoserver',
})
});
layer2 = new ol.layer.Tile({
//extent: [-13884991, 2870341, -7455066, 6338219],
source: new ol.source.TileWMS({
url: 'http://www.ourmapserver.gl/geoserver/wms',
params: {'LAYERS': 'ourcompany:interestarea', 'TILED': true},
//projection = ol.proj.get('EPSG:32624');
serverType: 'geoserver'
})
});
var layers = [
layer1,
layer2
];
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
projection: utm24_projection,
center: [-48864, 7491452],
zoom: 4
})
});
It worked fine when using Web Mercator.
So I have found a solution.
First of all, I removed the extent from my projection:
var utm24_projection = new ol.proj.Projection({
code: 'EPSG:32624',
units: 'm',
axisOrientation: 'neu'
});
Then when defining the view, I only configure the projection, but no center or zoom.
Finally, I adjust the view to the map size and bounds:
map.getView().fit(bounds, map.getSize());
The map is being displayed correctly.
I think that all is in the question, i'm looking for a way to fixed the scrollable area of the map to the size of it's layer.
In my case i use a static image which has 2722 px in width and 3850 px in height.
I also check the "extent" property but i can't really anderstand how to make it work, for my purpose.
That's it, can't wait for some clues or other answers :)
Have a nice day & code.
EDIT:
var extent = [0, 0, 2722, 3850];
var projection = new ol.proj.Projection({
code: 'xcd-image',
units: 'pixels',
extent: extent
});
var map = new ol.Map({
interactions: ol.interaction.defaults({mouseWheelZoom: false, doubleClickZoom: false}),
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'http://www.tarsis.paris/bundles/tarsisfront/carte.png',
projection: projection,
imageExtent: extent
})
})
],
controls: [],
target: 'map',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 3
})
});
What you would like to achieve is not yet supported by OpenLayers. See this answer by one of the OL developers.
As indicated by a comment in the question referenced above, you can though restrict zoomlevels by adding the minZoom parameter. You would have to change this part of your code:
controls: [],
target: 'map',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 3
})
to this:
target: 'map',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 3,
minZoom: 2
})
I draw features on a map (WKT POINTs). Now I would like to give those points a radius. Before I even add Features and the layer to the map I do the following:
var src = new ol.source.Vector();
var layer = new ol.layer.Vector({
source: src,
style: new ol.style.Circle({
radius: 30
})
});
This throws the following error:
AssertionError: Assertion failed: obj geometry must be an ol.style.Style instance
at goog.asserts.DEFAULT_ERROR_HANDLER (http://localhost:33464/app/lib/openLayers/ol-debug.js:4330:52)
at goog.asserts.doAssertFailure_ (http://localhost:33464/app/lib/openLayers/ol-debug.js:4365:3)
at goog.asserts.assertInstanceof (http://localhost:33464/app/lib/openLayers/ol-debug.js:4575:5)
at ol.style.createStyleFunction (http://localhost:33464/app/lib/openLayers/ol-debug.js:56402:7)
at ol.layer.Vector.prototype.setStyle (http://localhost:33464/app/lib/openLayers/ol-debug.js:58228:3)
at ol.layer.Vector (http://localhost:33464/app/lib/openLayers/ol-debug.js:58115:3)
If instead I add the same style to the "new ol.layer.Tile" I'm using to display the OpenStreetMap (ol.source.OSM) in the background everything works perfect:
map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
style: new ol.style.Circle({
radius: 30
})
})
]
});
I don't really understand that. I guess it has something to do with ol.style.Circle extending ol.style.Image (which doesn't sound like something for a vector layer - rather the raster layer "Tile"). But if I add the style to the Tile-Layer, why are the features on the vector-Layer rendering with this style?
My questions:
What is the correct way of doing this?
Is there a "style-Inheritance" going on?
style is not a valid option of the ol.layer.Tile object, thus it is simply ignored. See its documentation: http://openlayers.org/en/v3.10.1/apidoc/ol.layer.Tile.html
The style definition defined in the ol.layer.Vector has to be either of the following:
a ol.style.Style object
an array of ol.style.Style objects
a style function, i.e. ol.style.StyleFunction.
So, in order for your example to work, you could define a style that looks like this:
var src = new ol.source.Vector();
var layer = new ol.layer.Vector({
source: src,
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 30,
fill: new ol.style.Fill({color: 'red'})
})
})
});
This example demonstrates custom style: http://openlayers.org/en/v3.10.1/examples/custom-interactions.html
See also the API documentation: http://openlayers.org/en/v3.10.1/apidoc/ol.layer.Vector.html