none
Add Bing map as Base map RRS feed

  • Question

  • In the below script adding a map from Gis Cloud. How to add Bing map also with this?The requirement is in a combobox,  need options which is Bing(arial),Bing(Satelite),GisCloud Map. Based on the combo selection map should change.Pls help me .

    <!DOCTYPE html>
    <html>
        
        <title>Drawing tools</title>
        
        <link rel="stylesheet" type="text/css" href="http://dev.giscloud.com/examples/examples.css"/>
        <script type="text/javascript">window.gcForceFlashViewer = false;</script>
        <script type="text/javascript" src="http://api.giscloud.com/1/api.js"></script>
        <script type="text/javascript" src="http://dev.giscloud.com/examples/examples.js"></script>
        
        <script type="text/javascript">
            var viewer, tool, $ = giscloud.exposeJQuery();
            giscloud.ready(function () {
                giscloud.apiKey("api");
                mapId = id;
    
                //giscloud.apiKey("api");
                //mapId = id;
    
                // create a viewer
                viewer = new giscloud.Viewer("mapViewer", mapId, { slider: true });
    
                graphicsLayer = new giscloud.Graphic(viewer);
                MyGraphicsLayerGL = new giscloud.Graphic(viewer);
    
                graphicsLayer.bind("mouseOver", function (event) { alert('test'); });
                // create the toolbar and add the tools
                toolbarpoint = new giscloud.ui.Toolbar({
                    viewer: viewer,
                    container: "toolbarpoint"
                }).add(
                   // point tool
                  pointTool = new giscloud.ui.Toolbar.Tool("pointTool", {
                      instant: true,
                      styles: {
                          caption: "Point",
                          showCaption: true,
                          cssClass: "mytool",
                          active: "mytool-active",
                          hover: "mytool-hover"
                      },
                      actions: {
                          activation: function (viewer) {
    
                          },
                          deactivation: function (viewer) {
                          }
                      }
                  }));
    
                // create the toolbar and add the tools
                toolbar = new giscloud.ui.Toolbar({
                    viewer: viewer,
                    container: "toolbar"
                }).add(
    
                   // polygon tool
                  polygonTool = new giscloud.ui.Toolbar.Tool("polygonTool", {
                      instant: true,
                      styles: {
                          caption: "Click To Draw",
                          showCaption: true,
                          cssClass: "mytool",
                          active: "mytool-active",
                          hover: "mytool-hover"
                      },
                      actions: {
                          activation: function (viewer) {
                          }, deactivation: function (viewer) {
                          }
                      }
                  }));
    
            });
    
            function outputOgcWkt(wkt) {
                $("#geom").html(wkt);
            }
            function LastPosClick() {
    
                colourstyle = "http://hanedan.ttgroupenergy.com/wp-content/uploads/2011/02/118434-matte-grey-square-icon-alphanumeric-information2-ps-150x150.png"
    
                var pointStyle = new giscloud.GraphicStyle("point");
                pointStyle.size = 0;
                var pointGeom = new giscloud.geometry.Point(58,23);
                var pointGraphic = new giscloud.GraphicFeature(pointGeom, pointStyle);
                graphicsLayer.add(pointGraphic);
    
                var lonlat = new giscloud.LonLat(58, 23);
                var text = "";
                var markerIcon = { url: colourstyle, width: 16, height: 16 };
                var marker = new giscloud.Marker(); //create marker
                marker.icon(markerIcon);
                viewer.addMarker(marker); //add marker to map
                marker.location(lonlat).label(text);
    
    
                //create new flag marker   ...HotSpot Info      
                var strhotspot = "Point1";
                var marker = new giscloud.FlagMarker(); //create marker
                viewer.addMarker(marker); //add marker to map
                marker.position(lonlat).content(strhotspot);
    
    
                var pointStyle = new giscloud.GraphicStyle("point");
                pointStyle.size = 0;
                var pointGeom = new giscloud.geometry.Point(59, 24);
                var pointGraphic = new giscloud.GraphicFeature(pointGeom, pointStyle);
                graphicsLayer.add(pointGraphic);
    
                var lonlat = new giscloud.LonLat(59, 24);
                var text = "";
                var markerIcon = { url: colourstyle, width: 16, height: 16 };
                var marker = new giscloud.Marker(); //create marker
                marker.icon(markerIcon);
                viewer.addMarker(marker); //add marker to map
                marker.location(lonlat).label(text);
    
    
                //create new flag marker   ...HotSpot Info      
                var strhotspot = "Point2";
                var marker = new giscloud.FlagMarker(); //create marker
                viewer.addMarker(marker); //add marker to map
                marker.position(lonlat).content(strhotspot);
    
    
    
    
                var pointStyle = new giscloud.GraphicStyle("point");
                pointStyle.size = 0;
                var pointGeom = new giscloud.geometry.Point(60, 25);
                var pointGraphic = new giscloud.GraphicFeature(pointGeom, pointStyle);
                graphicsLayer.add(pointGraphic);
    
                var lonlat = new giscloud.LonLat(60, 25);
                var text = "";
                var markerIcon = { url: colourstyle, width: 16, height: 16 };
                var marker = new giscloud.Marker(); //create marker
                marker.icon(markerIcon);
                viewer.addMarker(marker); //add marker to map
                marker.location(lonlat).label(text);
    
    
                //create new flag marker   ...HotSpot Info      
                var strhotspot = "Point3";
                var marker = new giscloud.FlagMarker(); //create marker
                viewer.addMarker(marker); //add marker to map
                marker.position(lonlat).content(strhotspot);
    
    
                var pointStyle = new giscloud.GraphicStyle("point");
                pointStyle.size = 0;
                var pointGeom = new giscloud.geometry.Point(61, 23);
                var pointGraphic = new giscloud.GraphicFeature(pointGeom, pointStyle);
                graphicsLayer.add(pointGraphic);
    
                var lonlat = new giscloud.LonLat(61, 23);
                var text = "";
                var markerIcon = { url: colourstyle, width: 16, height: 16 };
                var marker = new giscloud.Marker(); //create marker
                marker.icon(markerIcon);
                viewer.addMarker(marker); //add marker to map
                marker.location(lonlat).label(text);
    
    
                //create new flag marker   ...HotSpot Info      
                var strhotspot = "Point4";
                var marker = new giscloud.FlagMarker(); //create marker
                viewer.addMarker(marker); //add marker to map
                marker.position(lonlat).content(strhotspot);
    
                viewer.center(lonlat, 14);
    
    
            }
    
    
            function LastPosClick2() {
                colourstyle = "http://hanedan.ttgroupenergy.com/wp-content/uploads/2011/02/118434-matte-grey-square-icon-alphanumeric-information2-ps-150x150.png"
                var pointStyle = new giscloud.GraphicStyle("point");
                pointStyle.size = 0;
                var pointGeom = new giscloud.geometry.Point(90, 90);
                var pointGraphic = new giscloud.GraphicFeature(pointGeom, pointStyle);
                graphicsLayer.add(pointGraphic);
    
                var lonlat = new giscloud.LonLat(90, 90);
                var text = "";
                var markerIcon = { url: colourstyle, width: 16, height: 16 };
                var marker = new giscloud.Marker(); //create marker
                marker.icon(markerIcon);
                viewer.addMarker(marker); //add marker to map
                marker.location(lonlat).label(text);
    
    
                //create new flag marker   ...HotSpot Info      
                var strhotspot = "Point9";
                var marker = new giscloud.FlagMarker(); //create marker
                viewer.addMarker(marker); //add marker to map
                marker.position(lonlat).content(strhotspot);
    
    
    
            }
    
    
        </script>
        
        <style type="text/css">
            
            #geom {
                border: thin solid #ccc;
                padding: 0.3em;
                width: 100%;
                margin-top: 0.5em;
            }
            
            .mytool {
                margin: 0.1em 0.2em;
                padding: 0em 0.8em;
                background-color: #ccc;
                color: #444;
                cursor: pointer;
            }
            
            .mytool-active {
                background-color: #999;
                color: #eee;
            }
            
            .mytool-hover {
                text-decoration: underline;
                
            }
            
            
            #LnkLastPosition1 {
                width: 179px;
            }
            
            
        </style>
        
        <body>
                    
            <div id ="toolbar"></div>
            <div id="mapViewer"></div>
            <div id="geom"></div>
            
            <p>
                <input id="LnkLastPosition" class="button" onclick="LastPosClick();" type="button" value="Set Bounds" />
                 <input id="LnkLastPosition1" class="button" onclick="LastPosClick2();" type="button" value="B2" /> </p>
          
        </body>
    </html>


    • Edited by KGIT Tuesday, August 16, 2016 4:29 AM
    Tuesday, August 16, 2016 4:25 AM

Answers

  • Can't help you with this one. GISCloud is a completely separate product from Bing Maps. Looking through their documentation they don't seem to provide any details on how to switch between the map layers. You could try contacting them here: http://developers.giscloud.com/contact-us/

    That said, it likely would be a lot easier using the Bing Maps V8 web control which requires a lot less coding, is faster, and is much better documented. If you can provide some details around the type of app you are trying to create I can provide you with the resources you need to accomplish this with Bing Maps.


    [Blog] [twitter] [LinkedIn]

    Tuesday, August 16, 2016 5:26 PM