lwiechec/index.html

## index.html
  <!DOCTYPE html>

<!--
     possible ideas: for the proper centering of the map based on user's choice of the country
     it would be cool to find the center of the country in question to get the map
     properly centered.
-->

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>ArcGIS API for JavaScript | Place Finding</title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
      #search {
        display: block;
        position: absolute;
        z-index: 2;
        top: 20px;
        left: 74px;
      }
    </style>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3"></script>
    <script>
      // contry to limit search in
      var srcCountry = { name: "Portugal", lat : 0, long : 0 };

      dojo.require("esri.map");
      dojo.require("esri.dijit.Popup");
      dojo.require("esri.dijit.Geocoder");
      dojo.require("esri.tasks.locator");

      var map, geocoder, geocodeService;

      dojo.ready(function() {
  // Create the geocode service
	geocodeService = new esri.tasks.Locator("http://geocodedev.arcgis.com/arcgis/rest/services/World/GeocodeServer");
	dojo.connect(geocodeService, "onAddressToLocationsComplete", geocodeResults);
	dojo.connect(geocodeService, "onError", geocodeError);

	var geocodeSearchOptions = {
	  address : { "SingleLine" : srcCountry },
	  outFields : ["Loc_name"],
	  //searchExtent : boundingBox
	}

	geocodeService.addressToLocations(geocodeSearchOptions);
	//setStyle("progress", "progress visible");

	// callback to process the query request
	function geocodeResults(places) {
	  // for now, take the first entry (we assume that's the best hit)
	  console.log(places);
	  if(places.length >= 1) {
	    console.log(places[0]); // take the first
	    srcCountry.long = places[0].location.x;
	    srcCountry.lat = places[0].location.y;
	    console.log(srcCountry);
	  }
	}

	function geocodeError(errorInfo) {
	  // to be finished
	  console.log("There was an error:");
	  console.log(errorInfo);
	}

        var popup = new esri.dijit.Popup(null, dojo.create("div"));
        // create the map
        map = new esri.Map("map",{
          basemap: "topo",
          center: [ srcCountry.long, srcCountry.lat ], // long, lat
          zoom: 7,
          infoWindow: popup
        });

        // add a graphics layer for geocoding results
        map.addLayer(new esri.layers.GraphicsLayer({
          id: "results"
        }));


        // create the geocoder
        geocoder = new esri.dijit.Geocoder({
          autoNavigate: false, // do not zoom to best result
          maxLocations: 20, // increase number of results returned
          map: map,
          arcgisGeocoder: {
            url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",
            name: "Esri World Geocoder",
            placeholder: "Find a place in " + srcCountry.name,
            sourceCountry: srcCountry.name // limit search to the United States
          }
        }, "search");
        geocoder.startup();
        geocoder.focus();

        var symbol = new esri.symbol.PictureMarkerSymbol({
          "angle":0,
          "xoffset":0,
          "yoffset":10,
          "type":"esriPMS",
          "url":"http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png",
          "contentType":"image/png",
          "width":24,
          "height":24
        });
        var template = new esri.InfoTemplate("${name}", "${*}");

        dojo.connect(geocoder, "onFindResults", function(response) {
          console.log("find results: ", response);
          var l = map.getLayer("results");
          l.clear();
          map.infoWindow.hide();
          dojo.forEach(response.results, function(r) {
            r.feature.attributes.name = r.name;
            r.feature.setSymbol(symbol);
            r.feature.setInfoTemplate(template);
            l.add(r.feature);
          });
        });
      });
    </script>
  </head>
  <body>
    <div id="search"></div>
    <div id="map"></div>
  </body>
</html>
	<!DOCTYPE html>

	<!--
	possible ideas: for the proper centering of the map based on user's choice of the country
	it would be cool to find the center of the country in question to get the map
	properly centered.
	-->

	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
	<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
	<title>ArcGIS API for JavaScript \| Place Finding</title>
	<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
	<style>
	html, body, #map {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
	}
	#search {
	display: block;
	position: absolute;
	z-index: 2;
	top: 20px;
	left: 74px;
	}
	</style>
	<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3"></script>
	<script>
	// contry to limit search in
	var srcCountry = { name: "Portugal", lat : 0, long : 0 };

	dojo.require("esri.map");
	dojo.require("esri.dijit.Popup");
	dojo.require("esri.dijit.Geocoder");
	dojo.require("esri.tasks.locator");

	var map, geocoder, geocodeService;

	dojo.ready(function() {
	// Create the geocode service
	geocodeService = new esri.tasks.Locator("http://geocodedev.arcgis.com/arcgis/rest/services/World/GeocodeServer");
	dojo.connect(geocodeService, "onAddressToLocationsComplete", geocodeResults);
	dojo.connect(geocodeService, "onError", geocodeError);

	var geocodeSearchOptions = {
	address : { "SingleLine" : srcCountry },
	outFields : ["Loc_name"],
	//searchExtent : boundingBox
	}

	geocodeService.addressToLocations(geocodeSearchOptions);
	//setStyle("progress", "progress visible");

	// callback to process the query request
	function geocodeResults(places) {
	// for now, take the first entry (we assume that's the best hit)
	console.log(places);
	if(places.length >= 1) {
	console.log(places[0]); // take the first
	srcCountry.long = places[0].location.x;
	srcCountry.lat = places[0].location.y;
	console.log(srcCountry);
	}
	}

	function geocodeError(errorInfo) {
	// to be finished
	console.log("There was an error:");
	console.log(errorInfo);
	}

	var popup = new esri.dijit.Popup(null, dojo.create("div"));
	// create the map
	map = new esri.Map("map",{
	basemap: "topo",
	center: [ srcCountry.long, srcCountry.lat ], // long, lat
	zoom: 7,
	infoWindow: popup
	});

	// add a graphics layer for geocoding results
	map.addLayer(new esri.layers.GraphicsLayer({
	id: "results"
	}));


	// create the geocoder
	geocoder = new esri.dijit.Geocoder({
	autoNavigate: false, // do not zoom to best result
	maxLocations: 20, // increase number of results returned
	map: map,
	arcgisGeocoder: {
	url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",
	name: "Esri World Geocoder",
	placeholder: "Find a place in " + srcCountry.name,
	sourceCountry: srcCountry.name // limit search to the United States
	}
	}, "search");
	geocoder.startup();
	geocoder.focus();

	var symbol = new esri.symbol.PictureMarkerSymbol({
	"angle":0,
	"xoffset":0,
	"yoffset":10,
	"type":"esriPMS",
	"url":"http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png",
	"contentType":"image/png",
	"width":24,
	"height":24
	});
	var template = new esri.InfoTemplate("${name}", "${*}");

	dojo.connect(geocoder, "onFindResults", function(response) {
	console.log("find results: ", response);
	var l = map.getLayer("results");
	l.clear();
	map.infoWindow.hide();
	dojo.forEach(response.results, function(r) {
	r.feature.attributes.name = r.name;
	r.feature.setSymbol(symbol);
	r.feature.setInfoTemplate(template);
	l.add(r.feature);
	});
	});
	});
	</script>
	</head>
	<body>
	<div id="search"></div>
	<div id="map"></div>
	</body>
	</html>