nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Google Basemap in JavaScript app

ChrisDickerson

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

Find more posts tagged with

Accepted answers

All comments

ChristopherPollard

try to run the executeIdentify in the
zoomRow (id) function after

map.setExtent(buildingExtent);
executeIdentify(feature.extent?? or something like this)

Search the forums for a topic related to:
"geocode and then identify/query"

ChrisDickerson

Thanks for help that seems to be working.
The issue with the items that don't get zoomed too are they are too small to be zoomed too and they are also not represented on the map.
By chance do you have any idea to link my info Windows to the click event in the data grid?

Thanks again this has been a big help.
Chris

ChristopherPollard

Chris,
I looked at your code and line 124 needed a ";"
I also added all the map layers because line 381 was looking for them and couldn't find those objects.

line 387:
I added a

console.log (buildingExtent);

if you open firefox and use firebug this will log for you the values that are being returned when the user clicks on the zoom button for each layer.

Like I mentioned there are some layers which seem to not exist or have any extent and if use view there values in firebug you can see which ones have issues.

I think the added global varibles helped fix the zoom to error, once I added them it seems like it didn't zoom to Africa...

Keep me posted and what you have built so far looks great..

CampusMap_JSGoogle_crp.zip

ChrisDickerson

Thanks

And what you said is exactly what I've been doing here are three aspects of my code. Test is the data grid with an esri base working. The one with _working in the title is the application with out the data grid and the other is the attempt on combining.

If you can give me any tips on cleaning up my code and suggestions would be appreciated.

Thanks for the example.

CampusMap_JSGoogle_working.zip

test.zip

CampusMap_JSGoogle.zip

ChristopherPollard

Chris,
I added your map service into the zoom to datagrid ESRi sample:
http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/fl_zoomgrid.html

Zooming to buildings work for some but not all.. it seems like some of the building from the map service are not drawing correct?
Clicking on Downer Woods,Engleman Stadium and a few others does nothing.

Your best bet is to try a get the ESRI sample to work 1st with your data and map service before you try and mash it into the sample with Google Basemap Sample.
When I first starting working with the ArcGIS API for Javascript I would find the sample and functionality that I wanted and modify the code/map service to use my data.
Once I had all the samples that I needed I would then build my web application from mashing together the samples and functionality that I needed for the web app.
This might help you get used to working with the code, samples as well as writing and understanding javascript....

Good luck,

FYI.. my sample code doesn't include the zoom to button image..

zoomtodatagrid.zip

ChrisDickerson

        //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>

ChrisDickerson

//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>

ChrisDickerson

What is the best way to insert code into these messages? Also is there a way to attach text files to these post?

ChristopherPollard

better Lat/long measurement for Milwaukee:
-9782122.122 5314126.278

JeffPace1

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.

ChristopherPollard

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...

ChrisDickerson

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

JeffPace1

We use this in our map.

use wkid 102100 Web Mercator Auxiliary Sphere

ChristopherPollard

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.