Google iUI and Esri Javascript API

51 views

Skip to first unread message

webehans

unread,

Jul 8, 2011, 8:11:01 AM7/8/11

to iphone...@googlegroups.com

I want to display a map and a marker with the Esri Javascript API and Google iUI.
The map is displayed but not the marker.
Here is a code example (esri_maptest_iui.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#map{width:320px;height:440px;}
</style>
<title>Esri Map Test iUI</title>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css" media="screen">@import "iui/iui.css";</style>
<script type="application/x-javascript" src="iui/iui.js"></script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.3" type="text/javascript"></script>
<link href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/dojo/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function loadmap()
{
var initExtent = new esri.geometry.Extent({"xmin":-10427539,"ymin":5592973,"xmax":-10358746,"ymax":5638836,"spatialReference":{"wkid":102100}});
map = new esri.Map("map",{extent:initExtent});
var basemapURL= "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapURL);
map.addLayer(basemap);
dojo.connect(map, 'onLoad', function()
{
var pt = new esri.geometry.Point(-93.3, 45, new esri.SpatialReference({ 'wkid': 4326 }));
map.graphics.add(new esri.Graphic(esri.geometry.geographicToWebMercator(pt), new esri.symbol.SimpleMarkerSymbol(),
{ 'title': 'Some Title...', 'content': 'Some content...' }, new esri.InfoTemplate('${title}', '${content}')
));
});
}
</script>
</head>

<body onload="loadmap()">
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
</div>

<ul id="home" title="Menu" selected = "true">
<li><a href="#map">Esri Map Test</a></li>
</ul>

<div id="map" title="Esri Map Test"></div>

</body>
</html>

The same code without iUI displays map and marker:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <title>Esri map test</title>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.3" type="text/javascript"></script>
    <link href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/dojo/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    dojo.require("esri.map");
    var map;
    function loadmap()
    {
    var initExtent = new esri.geometry.Extent({"xmin":-10427539,"ymin":5592973,"xmax":-10358746,"ymax":5638836,"spatialReference":{"wkid":102100}});
    map = new esri.Map("mapdiv",{extent:initExtent});
    var basemapURL= "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
    var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapURL);
    map.addLayer(basemap);
    dojo.connect(map, 'onLoad', function() {
      var pt = new esri.geometry.Point(-93.3, 45, new esri.SpatialReference({ 'wkid': 4326 }));
      map.graphics.add(new esri.Graphic( esri.geometry.geographicToWebMercator(pt), new esri.symbol.SimpleMarkerSymbol(),

{ 'title': 'Some Title...', 'content': 'Some content...' },new esri.InfoTemplate('${title}', '${content}')
      ));
    });
}
    </script>
</head>
<body onload="loadmap()">
<form id="form1" runat="server">
<div id="mapdiv" style="width:900px; height:600px; border:1px solid #000;"></div>
</form>
</body>
</html>

webehans

unread,

Jul 12, 2011, 9:20:34 AM7/12/11

to iphone...@googlegroups.com

I've solved it. iUI can't show the default symbol.

When I changed the symbol to for example

var sym = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 12, esri.symbol.SimpleLineSymbol(), new dojo.Color("red") );
map.graphics.add(new esri.Graphic(esri.geometry.geographicToWebMercator(pt), sym, ...