Google Basemap in JavaScript app

3569
14
05-07-2012 08:41 AM
ChrisDickerson
New Contributor
Hey I'm new at JavaScript coding and I've gotten stuck in a project that I'm working on.   I working on using a Google basemap with some operational feature layers.  There is supposed to be a zoom to feature from a list, but it isn't working all that well.  When I click some items it works, but others are taking me to the middle of Africa rather than where it should be in Milwaukee.  It recently came to my attention that I may need to change my spatial reference.

I'm wondering if someone might be able to tell me what spatial reference "wkid" code to use with a Google basemap.

thanks
0 Kudos
14 Replies
ChristopherPollard
Occasional Contributor
Chris,
Try this: Spatial Reference - 102113
Also if you can change your .mxd make them all: WGS_1984_Web_Mercator.

Check out these samples and code that will allow you to bring in Googles Basemaps into ESRI javascript API.
http://gmaps-utility-gis.googlecode.com/svn/trunk/agsjs/examples/gmapslayer.html

http://gmaps-utility-gis.googlecode.com/svn/trunk/agsjs/examples/manualgallery.html

You'll need to download and then reference the opensource code locally in order to be use these scripts in your web mapping application.

Here's my example using the code from the manual gallery sample:
http://www.dvrpc.org/webmaps/CMP/

Good luck,
Chris Pollard
0 Kudos
JeffPace
MVP Alum
We use this in our map.

use wkid 102100 Web Mercator Auxiliary Sphere
0 Kudos
ChrisDickerson
New Contributor
Thanks for the input. 
Chris, the first link you posted is the application that I referenced to add the Google basemap.  I didn't mention it in the first post is that if I'm using a esri basemap the zoom function works fine and I used the wkid = 102100.  I referenced this app for the zoom functionality.

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm

If there is something that I missed let me know.

Thanks again
Chris
0 Kudos
ChristopherPollard
Occasional Contributor
Chris,
wkid = 102100 is actually the one you should be using in your code...

There might be an issue in regards to the units of your feature?

Open your .MXD and mouse over a certain location/feature to view the Lat/Long.
It should look something like this:
-557592.705  4843327.594

I'm not an expert coder but I had to an this line of code to one of my recent application.

  var mp = new esri.geometry.webMercatorToGeographic(evt.mapPoint);


Before I added the above line I was zooming to the Ocean just east of Africa.....

You can also use Firebug to try and capture the actual values that the zoom to function is returning.
Place a console.log somewhere within your zoom to function...
 console.log(extent????or something like this);


Firebug is an amazing tool that you should try a learn to use for building any javascript api's.

If you could post your code or parts of the zoom to feature function that may work best.
good luck and if I run into the same issue of find a better solution for you I'll post it...
0 Kudos
JeffPace
MVP Alum
Thanks for the input. 
Chris, the first link you posted is the application that I referenced to add the Google basemap.  I didn't mention it in the first post is that if I'm using a esri basemap the zoom function works fine and I used the wkid = 102100.  I referenced this app for the zoom functionality.

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm

If there is something that I missed let me know.

Thanks again
Chris


Are you using the Google Maps for Javascript API? or the straight javascript API.  IF you are using straight javascript, the links above are how you kinda "hack" google in as a basemap as it is not technically supported.  If you are using the ArcGIS Extension for the Google Maps API then the zoom functionality is in Google's api.
0 Kudos
ChristopherPollard
Occasional Contributor
better Lat/long measurement for Milwaukee:
-9782122.122 5314126.278
0 Kudos
ChrisDickerson
New Contributor
What is the best way to insert code into these messages?  Also is there a way to attach text files to these post?
0 Kudos
ChrisDickerson
New Contributor
//add the building Directory files
        buildingLayer = new esri.layers.FeatureLayer("http://webgis.uwm.edu/ArcGISUWM/rest/services/CampusJava/MapServer/0",{
          mode:esri.layers.FeatureLayer.MODE_SELECTION,
          maxAllowableOffset:maxOffset(map,1),
          outFields:["NAME","Abbreviati","OBJECTID"]
       
        });
       
        //define a selection symbol
       // var highlightSymbol = new esri.symbol.SimpleFillSymbol().setColor( new dojo.Color([50,205,50,.25]));
        //buildingLayer.setSelectionSymbol(highlightSymbol);
       
        dojo.connect(buildingLayer,'onLoad',function(layer){    
          var query = new esri.tasks.Query();   
          query.where = "1=1";
          layer.queryFeatures(query,function(featureSet){
            var items = dojo.map(featureSet.features,function(feature){
              return feature.attributes;
            });
            var data = {
                identifier:"NAME",
                items:items};
            store = new dojo.data.ItemFileReadStore({data:data});
            grid.setStore(store);
            grid.setSortIndex(1,"true"); //sort on the state name         
          });

         
        });

       
        //modify the grid so only the Building_NAME field is sortable
        grid.canSort = function(col){ if(Math.abs(col) == 2) { return true; } else { return false; } };
      }



    function makeZoomButton(id){
      var zBtn = "<div dojoType='dijit.form.Button'><img src='images/zoom2.png'";
      zBtn = zBtn + " width='20' height='20'";
      zBtn = zBtn + " onClick=\"zoomRow('"+id+"')\"></div>";
      return zBtn;
    }
    function zoomRow(id){
      buildingLayer.clearSelection();
      var query = new esri.tasks.Query();
      query.objectIds = [id];
      buildingLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW,function(features){
        //zoom to the selected feature
         var buildingExtent = features[0].geometry.getExtent().expand(5.0);
          map.setExtent(buildingExtent);
      });



<div dojotype="dijit.layout.ContentPane"  title="Building<br />Directory" selected="false">
              <table dojotype="dojox.grid.DataGrid" jsid="grid" id="grid" selectionMode="none">
                <thead>
                  <tr>
                    <th field="OBJECTID" formatter="makeZoomButton" width="25px">
                      <img alt="+" src="images/zoom2.png"/>
                    </th>
                    <th field="NAME" width="135px">Building</th>
                    <th field="Abbreviati" width="53px">Abb.</th>
                  </tr>
                </thead>
              </table>
            </div>
0 Kudos
ChrisDickerson
New Contributor
        //add the building Directory files
        buildingLayer = new esri.layers.FeatureLayer("http://webgis.uwm.edu/ArcGISUWM/rest/services/CampusJava/MapServer/0",{
          mode:esri.layers.FeatureLayer.MODE_SELECTION,
          maxAllowableOffset:maxOffset(map,1),
          outFields:["NAME","Abbreviati","OBJECTID"]
        
        });
        
        //define a selection symbol 
       // var highlightSymbol = new esri.symbol.SimpleFillSymbol().setColor( new dojo.Color([50,205,50,.25]));
        //buildingLayer.setSelectionSymbol(highlightSymbol);
        
        dojo.connect(buildingLayer,'onLoad',function(layer){     
          var query = new esri.tasks.Query();    
          query.where = "1=1";
          layer.queryFeatures(query,function(featureSet){
            var items = dojo.map(featureSet.features,function(feature){
              return feature.attributes;
            });
            var data = {
                identifier:"NAME",
                items:items};
            store = new dojo.data.ItemFileReadStore({data:data});
            grid.setStore(store);
            grid.setSortIndex(1,"true"); //sort on the state name          
          });

          
        });

        
        //modify the grid so only the Building_NAME field is sortable
        grid.canSort = function(col){ if(Math.abs(col) == 2) { return true; } else { return false; } };
      }



    function makeZoomButton(id){
      var zBtn = "<div dojoType='dijit.form.Button'><img src='images/zoom2.png'";
      zBtn = zBtn + " width='20' height='20'";
      zBtn = zBtn + " onClick=\"zoomRow('"+id+"')\"></div>";
      return zBtn;
    }
    function zoomRow(id){
      buildingLayer.clearSelection();
      var query = new esri.tasks.Query();
      query.objectIds = [id];
      buildingLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW,function(features){
        //zoom to the selected feature
         var buildingExtent = features[0].geometry.getExtent().expand(5.0);
          map.setExtent(buildingExtent);
      });

          <div dojotype="dijit.layout.ContentPane"  title="Building<br />Directory" selected="false">
              <table dojotype="dojox.grid.DataGrid" jsid="grid" id="grid" selectionMode="none">
                <thead>
                  <tr>
                    <th field="OBJECTID" formatter="makeZoomButton" width="25px">
                      <img alt="+" src="images/zoom2.png"/>
                    </th>
                    <th field="NAME" width="135px">Building</th>
                    <th field="Abbreviati" width="53px">Abb.</th>
                  </tr>
                </thead>
              </table>
            </div>
0 Kudos