Hot answers tagged

4

Inside the layer parameters, define custom resolution for zoom greater than 19. As in this case i have defined the resolutions till zoom level 22. map = new OpenLayers.Map("osm"); var layer_osm = new OpenLayers.Layer.OSM(null, null, { resolutions: [156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125, ...


3

In OpenLayers Swipe Control is easy enough to use, the following code should set you up: var map; var swipe; function init() { map = new OpenLayers.Map({ div : "map", allOverlays : true }); var osm = new OpenLayers.Layer.OSM(); var gmap = new OpenLayers.Layer.Google("Google Streets"); map.addLayers([ osm, gmap ]); ...


3

Adding maxZoomLevel:19 should do the trick layer_osm = new OpenLayers.Layer.OSM( "Simple OSM Map","",{ isBaseLayer : true, displayInLayerSwitcher : false, maxZoomLevel: 19 });


2

You can use the setOpacity function to show/hide the layer_osm by detecting the zoom level on each zoom change. For example, use the below snippet map.events.register("zoomend", map, function(){ var zoom = map.getZoom(); console.log(zoom); if(zoom>19){ layer_osm.setOpacity(0); } else{ layer_osm.setOpacity(1); ...


2

If you're wanting to display a lot of data, use WMS, which is a rendered image-based system. And then if you still want to have interactivity, you can do that using vectors. Check out this: https://github.com/alexgleith/maps-website/blob/master/stormwater.html#L151 This is a pretty complex example, and it uses leaflet rather than openlayers, but the core ...


2

You can see a demo in action to illustrate. The thing to keep in mind are: load Proj4js library and the local EPSG code proj4js declaration from http://epsg.io website get the ol.proj.projection object and set it extent (for managing map resolution) var extent = ol.proj.transformExtent([-8.74, 49.81, 1.84, 60.9], 'EPSG:4326', 'EPSG:27700'); var ...


2

I usually use a function to create WMS Layers to avoid redundances. function Tile(options){ return new ol.layer.Tile({ name: options.name || 'Layer', visible: options.visible === false ? false : true, source: new ol.source.TileWMS({ crossOrigin: 'anonymous', url: options.url, params: { ...


1

Because of CORS-issues you cannot(?) load files directly from the harddrive. But there is a simple solution: if you have python installed, you can use the builtin web server. Simply run python -mhttp.server <portnumber> or python -mSimpleHTTPServer <portnumber> , depending on your python version (version 2 uses SimpleHTTPServer and ...


1

You can use a maxExtent for your map. In combination with a 3rd-party background-layer this can prevent the problem you described. var extent = new OpenLayers.Bounds(-2003750.34, -2003750.34, 2003750.34, 2003750.34); map = new OpenLayers.Map("map", { maxExtent: extent });


1

solved myself: added geometryName: "geom" in the WFS constructor. (Still don't know why this is necessary for this layer only).


1

Unfortunately ol.Layer.Text is not a valid source in Openlayers 3 although it looks like it could be quite useful. Instead you have to define on ol.layer.Vector and assign the source to a geojson file. I'm sure if you search you can find a utility that will convert a csv to valid geojson for this purpose. This is a pretty neat example. Sample code below: ...


1

Altough I wasn't able to find a bug in the above code... I managed to work it around using another way to load GeoJSON based layers. Another thing, the lat and longs weren't properly ordered in the example given (so that the correspond to positions on Rosario, Argentina)... Below are written correctly. <!DOCTYPE html> <html> <head> ...



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