Dev: SM: WMS Tile Server

From AAT Wiki
Jump to: navigation, search

Usage

/wms/?key=YOUR_KEY&...
key
Your API key

The WMS service is a fully complaint 1.3.0 WMS service.

The map layers available, are

sm.maps Streetmaps Maps - base vector layer
sm.imagery Satellite/Aerial Imagery
sm.imagery.unbranded Satellite/Aerial Imagery without watermarks (Account must be enabled for this)
sm.hybrid.overlay Minimalist, transparent vector layer suitable for overlaying on satellite imagery
sm.hybrid The sm.imagery layer with an overlaid sm.hybrid.overlay layer merged.
sm.maps.tiled

sm.hybrid.tiled sm.hybrid.overlay.tiled

These are seamlessly tiled versions of the above layers. The one caveat is that they need to be of a specific dimension - 300x300. The radius (degrees from center to edge) must be one of those spevified in Zoom Levels

Using Streetmaps WMS Service with OpenLayers

OpenLayers is an open-source API. By default it uses all the Google settings for zoom levels, etc. Streetmaps, However, use a different tile size to Google, so it doesn’t quite work out the box.

To use Streetmaps on OpenLayers API you will need to add 3 lines of code to set up our variables and zoom levels/scaling. After that it’s a normal OpenLayers application


Copy and paste this code example into a blank HTML File and run it.

NB: remmeber to replace this text 'YOUR-API-KEY-HERE' with your Streetmaps API key.



<!DOCTYPE html>

<html xmlns="https://www.w3.org/1999/xhtml" >
<head><meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">    
<script src="https://openlayers.org/en/v3.20.1/build/ol.js" type="text/javascript"></script>
    
    <title>
	OpenLayers 3 example
</title>
    <script type="text/javascript"></script>

    
</head>
<body>
    

    <div id="map" class="full-map"></div>
    <div id="map2" class="full-map"></div>
    
    <script type="text/javascript">


 var aRes = [90,45,22.500000,11.250000,5.625000,2.812500,1.406250,0.703125,0.351563,0.175781,0.087891,0.043945,0.021973,0.010986,0.005493,0.002747,0.001373,0.000687,0.000343];
          for (var l=0;l<aRes.length;l++) { aRes[l] = aRes[l]/300; }
         
          
          var map = new ol.Map({
            layers: [
    		
		        new ol.layer.Tile({
source: new ol.source.TileWMS({
                                                                        url: 'http://www.streetmaps.co.za/WMS/?',
                                                                        params: {'key': 'YOUR-API-KEY-HERE', 'layers':'custom.ta_bid.tiled', 'format':'image/png'},
                                                                        tileGrid: new ol.tilegrid.TileGrid({
                                                                                        extent:ol.proj.get('CRS:84').getExtent(),
                                                                                        origin:[0,0],
                                                                                        resolutions:aRes,
                                                                                        hidpi: false,
                                                                                        tileSize: [300, 300]
                                                                        })
                                                        })

		        }),

   			
		        

    			
	        ],
            target: 'map',
            view: new ol.View({
		        projection: 'CRS:84',
		        center: [31.064, -29.72],
		        zoom: 16
            })
          });


         var map2 = new ol.Map({
            layers: [
    		
		        new ol.layer.Tile({
source: new ol.source.TileWMS({
                                                                        url: 'http://www06.streetmaps.co.za/WMS/?',
                                                                        params: {'key': 'YOUR-API-KEY-HERE', 'layers':'custom.ta_bid_hybrid.tiled', 'format':'image/png'},
                                                                        tileGrid: new ol.tilegrid.TileGrid({
                                                                                        extent:ol.proj.get('CRS:84').getExtent(),
                                                                                        origin:[0,0],
                                                                                        resolutions:aRes,
                                                                                        hidpi: false,
                                                                                        tileSize: [300, 300]
                                                                        })
                                                        })

		        }),

   			
		        

    			
	        ],
            target: 'map2',
            view: new ol.View({
		        projection: 'CRS:84',
		        center: [31.064, -29.72],
		        zoom: 16
            })
          });


		        

    	

    </script>

   
  </body>

</html>