CODEWITHSUNDEEP
openlayers
Dave
Dave

Reputation: 3956

Using openlayers with a local basemap?

"The OpenLayers library provides a JavaScript API which makes it easy to incorporate maps from a variety of sources into your webpage or application." However, from scanning the documentation the variety of sources appears to include only web-based providers of maps of the Earth.

Is it possible to use OpenLayers to display features on top of locally-stored basemaps such as marine charts (e.g., http://www.charts.noaa.gov/InteractiveCatalog/nrnc.shtml?rnc=12280) or arbitrary (non-Earth) raster images with artificial cartesian coordinates?

--EDIT--

The following page displays a locally-stored image, contrary to the documentation which says that the image must be web-accessible. But instead of a single file, is there a way to use multiple image files as tiles?

<html>
  <head>
    <title>OpenLayers Example</title>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
  </head>
  <body>
    <div style="width:640px; height:480px; border:3px solid" id="map"></div>
    <script defer="defer" type="text/javascript">
        var options = {
            maxResolution: 10,
            units: 'm',
            resolutions: [10, 5, 2, 1, .5],
        };
        var map = new OpenLayers.Map('map', options);
        var extent = new OpenLayers.Bounds(-4824, -3294, 4824, 3294);
        var size = new OpenLayers.Size(4824, 3294);
        var img = new OpenLayers.Layer.Image( "Basemap",
        "maps/map0.jpg", extent, size, {layers: 'basic'} );
        map.addLayer(img);
        map.zoomToMaxExtent();
    </script>
  </body>
</html>

Upvotes: 2

Views: 5880

Answers (3)

Costales
Costales

Reputation: 2873

With openlayers 3:

var newLayer = new ol.layer.Tile({
    source: new ol.source.OSM({
            url: 'maps/{z}/{x}/{y}.png'
    })
});

var map = new ol.Map({
    layers: [
    newLayer
    ],
  controls: [],
  target: 'map',
  view: new ol.View({
    center: ol.proj.transform([4.666389, 50.009167], 'EPSG:4326', 'EPSG:3857'),
    zoom: 4,
    minZoom: 1,
    maxZoom: 20
  })
});

Upvotes: 0

John Powell
John Powell

Reputation: 12581

There is an example here of using OpenStreetMap tiles locally, without using http directly. Obviously, you would need to put your tiles in XYZ format for this to work. Here is the source for the OSM layer. The xyz of each tile is derived from OpenLayers.Layer.XYZ, which, of course, is designed for simplicity and global coverage. However, you could easily create your own layer with your own coordinate system to work in a similar fashion.

The relevant line from a loading point of view is:

 var newLayer = new OpenLayers.Layer.OSM("Local Tiles", 
                   "tiles/${z}/${x}/${y}.png",
                   {numZoomLevels: 19, 
                    alpha: true, 
                    isBaseLayer: false}
);

Note: I have found, generally, that the examples and source code are a better source of information than the documentation. I say this without criticism, OpenLayers has limited developer resources, like most open source projects, so just because there is nothing documented, doesn't mean it can't be done.

Upvotes: 7

John Powell
John Powell

Reputation: 12581

Yes, you can load any projection you like as the calls to the WMS will be entirely defined by the parameters you send to the OpenLayer.Map constructor, namely the bounds (maximum extents), the units (typically degrees or meters), and optionally a resolutions array (in map units per pixel). If you have no resolutions array (which will fix the zoom levels to those resolutions, then you need to provide a maxResolution and numZoomLevels parameter -- this defaults to 16. See the OpenLayers map documentation which is well commented and shows many of the other parameters as well as some sample map constructors, for example:

  var options = {
        maxExtent: new OpenLayers.Bounds(0,0,700000,1300000),
        maxResolution: 200,
        units: 'm',
        projection: "EPSG:27700",
        resolutions: [ 200, 50, 10, 5, 1, 0.5, 0.1]
  };
  var map = new OpenLayers.Map("map", options);

which is actually of the British National Grid, which is in meters, but would work equally well in degrees, with resolutions in degrees per pixel.

Other layers which are added to the map, such as WMS, will be calculated based on these values in the map constructor. If you need to load vector data in another projection, you can do this too, by setting a displayProjection, but you might need to add a 3rd party projection library, proj4js, in order to do the conversions -- though you haven't explicitly asked about that.

I'm not sure which projection your marine charts are in, presumably some kind of UTM or lat/lon, so can't give you any more appropriate numbers.

Upvotes: 0

Related Questions