Introduction and examples: Difference between revisions

From University Map Wiki
Jump to navigationJump to search
(Created)
 
(Demo examples (that don't work in the Wiki) moved to webtools.csx)
Line 61: Line 61:
  </html>
  </html>


Produces [http://www-uxsup.csx.cam.ac.uk/~jw35/map-demo/test.html a page like this].
Produces [http://webtools.csx.cam.ac.uk/map-demo/test.html a page like this].


Here's a further example: [http://www.ucs.cam.ac.uk/about-us/where the normal UCS 'Where we are' page] reworked to [http://www-uxsup.csx.cam.ac.uk/~jw35/map-demo/where.html use the new map].
Here's a further example: [http://www.ucs.cam.ac.uk/about-us/where the normal UCS 'Where we are' page] reworked to [http://webtools.csx.cam.ac.uk/map-demo/where.html use the new map].


==Tile API==
==Tile API==
Line 71: Line 71:
''These examples use tiles from http://map.cam.ac.uk/ - because it currently requires Raven authentication they won't work properly until you've authenticated (once) to map.cam.ac.uk.''
''These examples use tiles from http://map.cam.ac.uk/ - because it currently requires Raven authentication they won't work properly until you've authenticated (once) to map.cam.ac.uk.''


Here are [http://www-uxsup.csx.cam.ac.uk/~jw35/map-demo/tiles.html some of the tiles that make up the city centre].
Here are [http://webtools.csx.cam.ac.uk/map-demo/tiles.html some of the tiles that make up the city centre].


They follow the conventions of Open Street Map and other similar systems and so can be consumed in various ways.  Here are some examples using third-party map APIs:
They follow the conventions of Open Street Map and other similar systems and so can be consumed in various ways.  Here are some examples using third-party map APIs:


* [http://www-uxsup.csx.cam.ac.uk/~jw35/map-demo/open-layers.html An example displaying our tiles, OSM's, or Google's] using [http://openlayers.org/ OpenLayers].  
* [http://webtools.csx.cam.ac.uk/map-demo/open-layers.html An example displaying our tiles, OSM's, or Google's] using [http://openlayers.org/ OpenLayers].  
* [http://www-uxsup.csx.cam.ac.uk/~jw35/map-demo/leaflet.html An example with marker and shape overlay] using [http://leaflet.cloudmade.com/ Leaflet]
* [http://webtools.csx.cam.ac.uk/map-demo/leaflet.html An example with marker and shape overlay] using [http://leaflet.cloudmade.com/ Leaflet]
* [http://www-uxsup.csx.cam.ac.uk/~jw35/map-demo/google.html A further example combining our tiles and Google's], this time using [https://developers.google.com/maps/ the Google Maps API]
* [http://webtools.csx.cam.ac.uk/map-demo/google.html A further example combining our tiles and Google's], this time using [https://developers.google.com/maps/ the Google Maps API]


==Index API==
==Index API==

Revision as of 11:59, 27 June 2012

Basic use

API for linking to maps

The front page URL exposes a URL for linking to particular views based on searches - see The Map URL API for details. For example:

There's an extended search syntax, for example

...or based on underlying OSM identifiers, which are Planon IDs for University buildings.

...or on map institution identifiers:

...or based on physical areas

Embedding Maps

All of the URL's above can be used as the source for an iframe to embed the corresponding map in a particular page - see The Embedding API for details.

These examples use tiles from http://map.cam.ac.uk/ - because it currently requires Raven authentication they won't work properly until you've authenticated (once) to map.cam.ac.uk.

For example this: 

<!DOCTYPE html>
<html>

<head>
<title>Iframe test</title>
<style type="text/css">
#map {
  width: 400px;
  height: 400px;
  border: 1px solid black;
}
</style>
</head>

<body> 

<iframe id="map" src="http://map.cam.ac.uk/Computing+Service">
</iframe>

</body>

</html>

Produces a page like this.

Here's a further example: the normal UCS 'Where we are' page reworked to use the new map.

Tile API

The tiles making up the map are freely available - see The Tile API.

These examples use tiles from http://map.cam.ac.uk/ - because it currently requires Raven authentication they won't work properly until you've authenticated (once) to map.cam.ac.uk.

Here are some of the tiles that make up the city centre.

They follow the conventions of Open Street Map and other similar systems and so can be consumed in various ways. Here are some examples using third-party map APIs:

Index API

There's an API for accessing the data in the map's index - see The Database API. It uses similar queries to those used to draw and embed maps and returns results in JSON format. To ease experimentation you can add '&debug=1' to all index API queries to have results displayed in a browser rather than exported as JSON files. Here are some examples based on the map URLs above:

Retrieved from "https://wiki.cam.ac.uk/wiki/university-map/index.php?title=Introduction_and_examples&oldid=23"