Combining the powers of OpenLayers and jQuery

Overview Documentation Examples Code

jquery.mapquery.core.js

The main MapQuery file. It contains the MapQuery constructor, the MapQuery.Map constructor and the MapQuery.Layer constructor.

$('selector').mapQuery([options])

version added 0.1

Description: initialise MapQuery and associate it with

the matched element options an object of key-value pairs with options for the map. Possible pairs are:

We can initialise MapQuery without any options, or for instance pass in a layer object. The mapQuery function returns a jQuery object, to access the mapQuery object retrieve the 'mapQuery' data object.

var map = $('#map').mapQuery(); //create an empty map
var map = $('#map').mapQuery({layers:[{type:'osm'}]); //create a map with osm

var mq = map.data('mapQuery'); //get the MapQuery object

MapQuery.Map

The MapQuery.Map object. It is automatically constructed from the options given in the `mapQuery([options])` constructor. The Map object is refered to as _map_ in the documentation.

map.layers([options])

_version added 0.1_

Description: get/set the layers of the map

**options** an object of key-value pairs with options to create one or more layers

Returns: [layer] (array of MapQuery.Layer)

The `.layers()` method allows us to attach layers to a mapQuery object. It takes an options object with layer options. To add multiple layers, create an array of layer options objects. If an options object is given, it will return the resulting layer(s). We can also use it to retrieve all layers currently attached to the map. 
var osm = map.layers({type:'osm'}); //add an osm layer to the map
var layers = map.layers(); //get all layers of the map

map.center([options])

_version added 0.1_

Description: get/set the extent, zoom and position of the map

The .center() method allows us to move to map to a specific zoom level, specific position or a specific extent. We can specify the projection of the coordinates to override the displayProjection. For instance you want to show the coordinates in 4326, but you have a dataset in EPSG:28992 (dutch projection). We can also retrieve the current zoomlevel, position and extent from the map. The coordinates are returned in displayProjection.

var center = map.center(); //get the current zoom, position and extent
map.center({zoom:4}); //zoom to zoomlevel 4
map.center({position:[5,52]}); //pan to point 5,52
map.center(box:[-180,-90,180,90]); //zoom to the box -180,-900,180,90
//pan to point 125000,485000 in dutch projection
map.center({position:[125000,485000],projection:'EPSG:28992'});

MapQuery.Layer

The MapQuery.Layer object. It is constructed with layer options object in the map.`layers([options])` function or by passing a `layer:{options}` object in the `mapQuery()` constructor. The Layer object is refered to as _layer_ in the documentation.

layer.down([delta])

_version added 0.1_

Description: move the layer down in the layer stack of the map

The .down() method is a shortcut method for .position(pos) which makes it easier to move a layer down in the layerstack relative to its current position. It takes an integer and will try to move the layer down the number of places given. If delta is bigger than the current position in the stack, it will put the layer at the bottom.

layer.down();  //move layer 1 place down
layer.down(3); //move layer 3 places down

layer.remove()

_version added 0.1_

Description: remove the layer from the map

Returns: id (string)

The `.remove()` method allows us to remove a layer from the map. It returns an id to allow widgets to remove their references to the destroyed layer. 
var id = layer.remove(); //remove this layer

layer.position([position])

_version added 0.1_

Description: get/set the position of the layer in the layer

stack of the map The .position() method allows us to change the position of the layer in the layer stack. It will take into account the hidden baselayer that is used by OpenLayers. The lowest layer is position 0. If no position is given, it will return the current postion.

var pos =  layer.position(); //get position of layer in the layer stack
layer.position(2); //put layer on position 2 in the layer stack

layer.up([delta])

_version added 0.1_

Description: move the layer up in the layer stack of the map

The .up() method is a shortcut method for .position(pos) which makes it easier to move a layer up in the layerstack relative to its current position. It takes an integer and will move the layer up the number of places given.

layer.up();  //move layer 1 place up
layer.up(3); //move layer 3 places up

layer.visible([visible])

_version added 0.1_

Description: get/set the visible state of the layer

The .visible() method allows us to change the visibility of the layer. If no visible is given, it will return the current visibility.

var vis =  layer.visible(); //get the visibility of layer
layer.visible(true); //set visibility of layer to true

layer.opacity([opacity])

_version added 0.1_

Description: get/set the opacity of the layer

The .opacity() method allows us to change the opacity of the layer. If no opacity is given, it will return the current opacity.

var opac =  layer.opacity(); //get opacity of layer
layer.opacity(0.7); //set opacity of layer to 0.7

layer {type:bing}

_version added 0.1_

Description: create a Bing maps layer

layer {type:google}

version added 0.1

Description: create a Google maps layer

Note you need to include the google maps v3 API in your application by adding <script src="http://maps.google.com/maps/api/js?v=3.5&amp;sensor=false"type="text/javascript"></script>

 layers:[{
       type:'google',      //create a google maps layer
       view:'hybrid' //use the google hybridlayer
       }]

layer {type:vector}

version added 0.1

Description: create a vector layer

layer {type:json}

version added 0.1

Description: create a JSON layer

layer {type:osm}

version added 0.1

Description: create an OpenStreetMap layer

layer {type:tms}

version added 0.1

Description: create an OpenStreetMap layer

layer {type:wms}

version added 0.1

Description: create a WMS layer

layer {type:wmts}

version added 0.1

Description: create a WMTS (tiling) layer