This class sets up a map window containing an Open Space data layer, a vector layer and a marker layer.
The following example shows how to add a default map and set the map center:
var osMap;
function init()
{
osMap = new OpenSpace.Map('map');
osMap.setCenter(new OpenSpace.MapPoint(438760,114760), 8);
}| OpenSpace.Map | This class sets up a map window containing an Open Space data layer, a vector layer and a marker layer. |
| Constructor | |
| OpenSpace.Map | Constructor for a new OpenSpace.Map instance. |
| Functions | |
| validateMapControls | this method checks the Options.control array and removes OpenSpaceControlCopyrightCollection and OpenSpaceControlPoweredBy if they are created by user, they will be added later anyway, i.e. |
| getProductKeyForResolution | A convenience method return a valid product list form resolutions supplied. |
| getMarkerLayer | A convenience method to return a reference to the default marker layer. |
| getVectorLayer | A convenience method to return a reference to the default vector layer. |
| addLargeOrSmallControl | A convenience method to return a large or small map control based on screen size. |
| isSmallMap | A convenience method to return a boolean based on screen size. |
| getInfoWindow | A convenience method to return a reference to the info window. |
| createMarker | A convenience method to create a marker, optionally with an associated popup info window. |
| removeMarker | A convenience method to remove a marker. |
| clearMarkers | A convenience method to remove all markers. |
| addFeatures | A convenience method to add features to the map. |
| removeFeatures | A convenience method to remove features from the map. |
| destroyFeatures | A convenience method to remove all features from the map. |
| openInfoWindow | A convenience method to open a popup info window. |
| closeInfoWindow | A convenience method to close a popup info window. |
| pan | This function pans the map. |
| animatePan | This function pans the map in smoothly animated way. |
| animatePanStep | This function performs one step in the map panning animation. |
| animatePanEnd | This function performs the final step in the map panning animation and resets all the values. |
| panDrag | Allows user to pan by a value of screen pixels |
| getCenter | {OpenSpace.MapPoint} |
| setCenter | |
| updateSize | This function should be called by any external code which dynamically changes the size of the map div (because mozilla wont let us catch the “onresize” for an element) |
| getMapPointFromViewPortPx | Gets the coordinates of a point on the map given the position of a point on the map window |
| getViewPortPxFromMapPoint | |
| getMapPointFromPixel | |
| getPixelFromMapPoint | |
| getMapPointFromLayerPx | |
| getLayerPxFromMapPoint |
Constructor for a new OpenSpace.Map instance.
| div | {String} Id of an element in your page that will contain the map. |
| options | {Object} Optional object with properties to tag onto the map. |
One option is to specify which raster mapping is visible by specifying product codes (see look-up table)
// create a map with default options in an element with the id “map”. This map will include all map layers less OS VectorMap District.
var osMap = new OpenSpace.Map("map");
osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 10);// create a map with some options
This map will display a map with just OS StreetView
var options = {
products: ["SV", SVR"]
};
var osMap = new OpenSpace.Map("map", options);
osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 10);
createMarker: function( pos, icon, html, size )
A convenience method to create a marker, optionally with an associated popup info window. The marker is added to the default markers layer on the map.
| pos | {OpenSpace.MapPoint} Position of the marker on the map |
| icon | {OpenSpace.Icon} The image to show for the marker (see list below for available OpenSpace icons). |
| html | {String} The HTML contents of the associated popup window |
| size | {OpenSpace.ScreenSize} The size of the popup window |
{<OpenLayers.Marker>}
// Add a default marker var pos = new OpenSpace.MapPoint(440000, 110000); var marker = osMap.createMarker(pos);
// Add a marker with custom icon and a popup info window
var pos = new OpenSpace.MapPoint(444000, 110000);
var size = new OpenLayers.Size(33, 45);
var offset = new OpenLayers.Pixel(-16, -37);
var infoWindowAnchor = new OpenLayers.Pixel(16, 16);
var icon = new OpenSpace.Icon('http://openspace.ordnancesurvey.co.uk/osmapapi/img_versions/img_1.1/OS/images/markers/marker_blue.png', size, offset, null, infoWindowAnchor);
var marker = osMap.createMarker(pos, icon, 'test info window content in HTML <b>bold</b> <a href="index.html">Back to Index</a><p>fsdfsfd sdf sf sd sdf sd f sd fs df sdf fdfsdfdf sdfsdfsd sdfsf.</p><img src=\"logo.gif\"/>', new OpenLayers.Size(200, 300));
OpenSpace icons: http://openspace.ordnancesurvey.co.uk/osmapapi/img_versions/img_1.1/OS/images/markers/ + :
marker_aqua.png; marker_black.png; marker_blue.png; marker_fuchsia.png; marker_green.png;
marker_grey.png; marker_lime.png; marker_maroon.png; marker_navy.png; marker_olive.png;
marker_orange.png; marker_purple.png; marker_red.png; marker_silver.png; marker_teal.png;
marker_yellow.png; marker-target-med-blue.png; marker-target-med-cyan.png;
marker-target-med-green.png; marker-target-med-lime.png; marker-target-med-magenta.png;
marker-target-med-orange.png; marker-target-med-purple.png; marker-target-med-red.png;
marker-target-med-silver.png; marker-target-med-yellow.png; marker-target-sml-blue.png;
marker-target-sml-cyan.png; marker-target-sml-green.png; marker-target-sml-lime.png;
marker-target-sml-magenta.png; marker-target-sml-orange.png; marker-target-sml-purple.png;
marker-target-sml-red.png; marker-target-sml-silver.png; marker-target-sml-yellow.png;
round-marker-lrg-blue.png; round-marker-lrg-green.png; round-marker-lrg-purple.png;
round-marker-lrg-red.png; round-marker-med-blue.png; round-marker-med-green.png;
round-marker-med-purple.png; round-marker-med-red.png; round-marker-sml-blue.png;
round-marker-sml-green.png; round-marker-sml-purple.png; round-marker-sml-red.png;
solid-marker-med-blue.png; solid-marker-med-green.png; solid-marker-med-purple.png;
solid-marker-med-red.png; solid-marker-sml-blue.png; solid-marker-sml-green.png;
solid-marker-sml-purple.png; solid-marker-sml-red.png; misc/round-marker1.png
openInfoWindow: function( icon, pos, html, size )
A convenience method to open a popup info window.
| icon | {OpenSpace.Icon} The image from which the popup window will appear from. |
| pos | {OpenSpace.MapPoint} The position on the map the popup will appear from. |
| html | {String} The HTML contents of the popup. |
| size | {OpenSpace.ScreenSize} The size of the popup. |
pan: function( dx, dy, options )
This function pans the map.
| dx | {Integer} Number of pixels to move horizontally |
| dy | {Integer} Number of pixels to move vertically |
| options | {Object} Optional object with properties to control the animation |
| pan_anim | {boolean} takes the value set by user, default is true, if you want to turn off animated panning set to false like this :: var options = {animate_pan:false}:: |
setCenter: function ( mapPoint, zoom, dragging, forceZoomChange )
| mapPoint | {OpenSpace.MapPoint} |
| zoom | {Integer} |
| dragging | {Boolean} Specifies whether or not to trigger movestart/end events |
| forceZoomChange | {Boolean} Specifies whether or not to trigger zoom change events (needed on baseLayer change) |
getMapPointFromViewPortPx: function ( viewPortPx )
Gets the coordinates of a point on the map given the position of a point on the map window
| viewPortPx | {<OpenLayers.Pixel>} Position of a point on the map viewport |
{OpenSpace.MapPoint} An OpenSpace.MapPoint which is the passed-in view port <OpenLayers.Pixel>, translated into British National Grid by the current base layer.
getViewPortPxFromMapPoint: function ( mapPoint )
| mapPoint | {OpenSpace.MapPoint} |
{<OpenLayers.Pixel>} An OpenLayers.Pixel which is the passed-in OpenSpace.MapPoint, translated into view port pixels by the current base layer.
getMapPointFromPixel: function ( px )
| px | {<OpenLayers.Pixel>} |
{OpenSpace.MapPoint} An OpenSpace.MapPoint corresponding to the given OpenLayers.Pixel, translated into British National Grid by the current base layer
getPixelFromMapPoint: function ( mapPoint )
| mapPoint | {OpenSpace.MapPoint} |
{<OpenLayers.Pixel>} An OpenLayers.Pixel corresponding to the OpenSpace.MapPoint translated into view port pixels by the current base layer.
getLayerPxFromMapPoint: function ( mapPoint )
| mapPoint | {OpenSpace.MapPoint} map point |
{<OpenLayers.Pixel>} An OpenLayers.Pixel which is the passed-in OpenSpace.MapPoint, translated into layer pixels by the current base layer
this method checks the Options.control array and removes OpenSpaceControlCopyrightCollection and OpenSpaceControlPoweredBy if they are created by user, they will be added later anyway, i.e.
validateMapControls:function( opts )
A convenience method return a valid product list form resolutions supplied.
getProductKeyForResolution: function( resVal )
A convenience method to return a reference to the default marker layer.
getMarkerLayer: function()
A convenience method to return a reference to the default vector layer.
getVectorLayer: function()
A convenience method to return a large or small map control based on screen size.
addLargeOrSmallControl: function( sizeChanged )
A convenience method to return a boolean based on screen size.
isSmallMap: function()
A convenience method to return a reference to the info window.
getInfoWindow: function()
A convenience method to create a marker, optionally with an associated popup info window.
createMarker: function( pos, icon, html, size )
A convenience method to remove a marker.
removeMarker: function( marker )
A convenience method to remove all markers.
clearMarkers: function()
A convenience method to add features to the map.
addFeatures: function( features )
A convenience method to remove features from the map.
removeFeatures: function( features )
A convenience method to remove all features from the map.
destroyFeatures: function()
A convenience method to open a popup info window.
openInfoWindow: function( icon, pos, html, size )
A convenience method to close a popup info window.
closeInfoWindow: function()
This function pans the map.
pan: function( dx, dy, options )
{OpenSpace.MapPoint}
getCenter: function ()
setCenter: function ( mapPoint, zoom, dragging, forceZoomChange )
This function should be called by any external code which dynamically changes the size of the map div (because mozilla wont let us catch the “onresize” for an element)
updateSize: function()
Gets the coordinates of a point on the map given the position of a point on the map window
getMapPointFromViewPortPx: function ( viewPortPx )
getViewPortPxFromMapPoint: function ( mapPoint )
getMapPointFromPixel: function ( px )
getPixelFromMapPoint: function ( mapPoint )
getMapPointFromLayerPx: function ( px )
getLayerPxFromMapPoint: function ( mapPoint )