ol custom map overlay

overlay wms tiles and use OpenLayers to customize your map. Embeded openlayers library syncs with provided dataset and ol library is exposed for use.

<html>

  <body>
        <div id="map" style="position:relative;left:100px;width:400px;height:400px;"><div>
  </body>

  <script type="text/javascript" src="http://www.spacial.io/cad4web/lib/cad4web.js"><script>

  <script>
    var cad = new cad4web.ContextClass( 'map', { backgroundColor: [0, 0, 0, 0.00001] });
    var file = 'http://www.spacial.io/cad4web/files/EGY_roads.shp';
    cad.clear();
    cad.addShp(file, [255, 0, 0 ] )
        .then (function () {
             cad.extent();
             cad.loadWms().then(function(wms){
                     var ol = wms.ol;
                     var map = wms.map;
                     var activeBaseLayer = wms.activeBaseLayer;
                     map.removeLayer( activeBaseLayer );
                     activeBaseLayer = new ol.layer.Tile ({
                            source : new ol.source.BingMaps ({
                                   key : 'my google bing maps key' ,
                                   imagerySet : 'Aerial'
                            });
                      });
                     map.addLayer( activeBaseLayer );
              });
        }) ;
  </script>

</html>

// map div must have explicitly position defined
   (absolute, relative, etc).

// File on server must have header
    Access-Control-Allow-Origin: *

// clear library intro image

// after file loading, call loadWms()
   currently only 'EPSG:4328' is supported

// assign ol, map and
   activeBaseLayer variables

// use OpenLayers library as required