31

Just do the following map.getView().calculateExtent(map.getSize()) // Nowadays, map.getSize() is optional most of the time (except if you don't share view between different maps), so above is equivalent to the following map.getView().calculateExtent() considering that map is the variable referencing an instance of ol.Map like at this official example. To ...


27

If the features are points use var coord = event.feature.getGeometry().getCoordinates(); For point geometries getCoordinates returns an array of 2 numbers. The first number is the x coordinate. The second number is the y coordinate. And if you want to convert coord to a longitude and a latitude use: coord = ol.proj.transform(coord, 'EPSG:3857', 'EPSG:...


26

In ol.proj.transform you need to specify the fromProjection before the toProjection, then it should work. As Michael Gentry explains in his answer, another Problem is that you have to specify the longitude (west-east thus x) first and then the latitude (south-north thus y). And a better way to set the center is to get the current view and set the center ...


23

I can use Google Maps in OpenLayers 4.2 like this under my WMS layer and its perfectly fitted with EPSG:3857 projection: new ol.layer.Tile({source: new ol.source.TileImage({ url: 'http://khm{0-3}.googleapis.com/kh?v=742&hl=pl&&x={x}&y={y}&z={z}' })}) Why do you need a plugin? JSFiddle link for ROADMAP new ol.layer.Tile({ source: new ...


22

As Gabor Farkas said, I was adding the geometry and not a feature to the source. I was also missing [] on the coordinates to the geometry, and wasn't converting properly. Outside of here, I was using lat/long as x/y instead of y/x. Updated fiddle: http://jsfiddle.net/Kieveli/f4t6n6v1/7/ HTML: <div id="map" class="map"></div> JAVASCRIPT: ...


19

Assuming you use an ol.layer.Vector with an ol.source.GeoJSON you can use something like this: var vectorSource = new ol.source.GeoJSON({ projection : 'EPSG:3857', url: 'http://examples.org/fearures.json' }); var vectorLayer = new ol.layer.Vector({ source: vectorSource }); map.addLayer(vectorLayer); // show loading icon // ... var listenerKey = ...


19

Dashed lines can be done with: new ol.style.Style({ stroke: new ol.style.Stroke({ width: 3, color: 'rgba(255, 255, 255, 1)', lineDash: [.1, 5] //or other combinations }), zIndex: 2 }) I've made you an online example! http://plnkr.co/edit/AW1YNC?p=preview You can use this online "tester" to get various combinations: http://...


18

I notice you have already found a solution that works for you, but I thought I might add some additional options that you or others may find useful. In GeoServer there is a capability known as Virtual OWS Services. The WMS, WFS, and WCS services are collectively known as the OWS services. When you make a request to one of these services you are making a ...


18

This can simply be done by defining extent in the View object. eg var view = new ol.View({ ... extent: [minx,miny,maxx,maxy] ... }); var map = new ol.Map({ ... view: view, ... });


17

The reasons why it is so slow is you retrieve megabytes of data doing your WFS request. To confirm, open Firebug (Firefox addon debugger) or Chrome and look into Net(work) panel. You will see it's too huge. This data takes time to be process (your "page is unresponsive" syndrom) browser capabilities: you never display more than one thousand of feature in a ...


17

On ol3 3.11.2, the event.selected.clear(); does not exist, so you need to use the selectionInteraction.getFeatures().clear();


16

If anyone gets stuck with identifying a layer's type in OpenLayers 3, there is a more sophisticated JavaScript method to achieve this. As layer objects are created with layer constructors, the native instanceof JavaScript function can be used to check for layer type. As the identification of a layer type usually gets into an if or switch clause, one could ...


16

Bit of a workaround but you can use the getExtent method on the geometry to set the extent on the map. I presume the center of the view will then be the center of the geometry; Test = new ol.geom.Geometry(); map.getView().fitExtent(Test.getExtent, map.getSize()); var CenterOfGeom = map.getView().getCenter() If you do not want to change the view (which I ...


16

FYI... I believe this has changed for OL3 V3.5.0, so gcarrillo's answer would be: new ol.layer.Vector({ title: 'added Layer', source: new ol.source.Vector({ url: 'mygeojson.json', format: new ol.format.GeoJSON() }) }) You can see the changes here: https://github.com/openlayers/ol3/blob/master/changelog/upgrade-notes.md#...


16

Simplest way I've found is to set the interaction defaults to false when you instantiate your map like so: var map = new ol.Map({ interactions: ol.interaction.defaults({mouseWheelZoom:false}), ... }); Then once it is disabled you will need to provide your own functions to zoom on mouse scroll. Something like this should do the trick: map.on('...


15

This question was asked on Twitter recently https://twitter.com/RemiBovard/status/525028570780139520 If you follow the answer, at the moment, integrating layer switcher in the core is not the priority but there is an available component at https://github.com/walkermatt/ol3-layerswitcher You can also take a look on "The book of OpenLayers" samples (by @...


15

You can get its extent center using ol.extent.getCenter. In my case I have a vector layer and I want to get the center of a feature after I click it. So create a simple click interaction and add it to the map var select = new ol.interaction.Select(); map.addInteraction(select); For each click... select.on('select', function(e) { Get the first ...


14

Feature creation can be kind of tricky in OpenLayers 3. There aren't any official examples for ol.source.Vector layers, most of them are working with GeoJSON, or some other data exchange format. I have managed to create a working fiddle. Let me explain some of the key aspects of achieving your task. var layerLines = new ol.layer.Vector({ source: new ...


14

In ol3 version 3.10.0 things have changed. So is more clear than older versions but still more complicated than ol2. So for TILE (ol.layer.Tile) layers your code snip should look like: //declare the layer var osmLayer = new ol.layer.Tile({ source: new ol.source.OSM() }); //asign the listeners on the source of tile layer osmLayer.getSource().on('...


14

I assume you use an ol.style.Icon. ol.style.Icon has a scale option that you can use to scale the icon image. For example, if you want to scale an image down you'll use something like this: var style = new ol.style.Style({ image: new ol.style.Icon({ url: 'http://example.com/icon.png', scale: 0.5, // … }) }); Now, if you want different ...


14

The drawn feature are added to the layer named vector. See draw interactions constructors. // Get the array of features var features = vector.getSource().getFeatures(); // Go through this array and get coordinates of their geometry. features.forEach(function(feature) { console.log(feature.getGeometry().getCoordinates()); });


13

The option, displayInLayerSwitcher is True by default. You must pass this parameter explicitly with the False arguement. http://dev.openlayers.org/docs/files/OpenLayers/Layer-js.html var ol_wms = new OpenLayers.Layer.WMS("OpenLayers WMS","http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'}, {'displayInLayerSwitcher':false} );


13

OpenLayers 2: layer.setVisibility(true) OpenLayers >= 3: layer.setVisible(true) Lots of examples here: http://openlayers.org/en/latest/examples/ Specific example: https://openlayers.org/en/latest/examples/layer-group.html


13

You can use the opt_layerFilter argument to forEachFeatureAtPixel. See the documentation at http://openlayers.org/en/master/apidoc/ol.Map.html#forEachFeatureAtPixel. For example, if vectorLayer is a reference to the layer in which you want to detect features you will use the following: var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) ...


13

According to this answer at StackOverflow, the functions have been renamed in OpenLayers 3.7 and later. This is what works for me in OpenLayers 3.15.1: var extent = my_vector_layer.getSource().getExtent(); map.getView().fit(extent, map.getSize());


13

When you transform you always transform pair of points: ol.proj.transform([23.4, 42.5], 'EPSG:4326','EPSG:3857'); (this transforms from EPSG 4326 to EPSG 3857; the coordinates are [lon, lat])


12

Ok let's try again. If you look closer at the docs you will see that ol.source.Vector has a clear method that you can use to remove all the features from the source. See http://openlayers.org/en/v3.0.0/apidoc/ol.source.Vector.html#clear This is how you will use that method: vectorSource.clear()


12

Edit: To solve the issue just use map.updateSize();. Initial answer Firstly, I recommended unsuccessfully, to try map.render() or map.renderSync() The first one map.render() make (citing official doc) Requests a render frame; rendering will effectively occur at the next browser animation frame. The second one do Requests an immediate render ...


11

In OpenLayers 2 you can do with the same method: map.events.register(type, obj, listener); movestart triggered after the start of a drag, pan, or zoom move triggered after each drag, pan, or zoom moveend triggered after a drag, pan, or zoom completes zoomend triggered after a zoom completes example code: map.events.register("move", map, ...


11

name is just a property you can set on your layer. All constructor options which are not part of the API [1] are treated as property[2]. You can later get it with layer.get('name') (& set it with layer.set('name', 'foobar'))   1: http://openlayers.org/en/v3.0.0/apidoc/ol.layer.Layer.html 2:property of ol.Object http://openlayers.org/en/v3.0.0/apidoc/...


Only top voted, non community-wiki answers of a minimum length are eligible