results on the map by latitude and longitude

RicardoEufrasio1 · ‎08-21-2013

Hi guys,

I need to do a search on the map, the search should be made by the latitude and longitude (values ??????that already have the database). I do not know which map to use or is more appropriate.
Can anyone help me

JasonZou · ‎08-21-2013

Not clear with what you are asking for. Are you trying to locate the given lat/lon on the map or you like to search for other features that contain the point with the lat/lon?

RicardoEufrasio1 · ‎08-21-2013

I have the latitude and longitude of the place through this information open the map with location

Like the example (attachment)

JasonZou · ‎08-21-2013

require([
  "esri/Map",
  "esri/graphic",
  "esri/symbols/PictureMarkerSymbol",
  "esri/geometry/Point",
  "esri/geometry/webMercatorUtils"
], function(Map, Graphic, PictureMarkerSymbol, Point, webMercatorUtils) {
  var map = new Map({ basemap: "topo" }, "divMap");  // divMap: div element as map container
  var pms = new PictureMarkerSymbol({"angle":0,"xoffset":2,"yoffset":8,"type":"esriPMS","url":"http://static.arcgis.com/images/Symbols/Basic/RedShinyPin.png","contentType":"image/png","width":24,"height":24});
  var point = new Point(lon, lat);  // given lat/lon
  var wmPoint = webMercatorUtils.geographicToWebMercator(point);
  var graphic = new Graphic(wmPoint, pms, null, null);
  map.graphics.add(graphic);
  map.centerAt(wmPoint);
});

RicardoEufrasio1 · ‎08-22-2013

Zj_zou thnk you so much to help me, but I could not do...

see my code and the attachment
I pass the latitude and longitude as param by the url like (url of attachments is a example that I'm doing home, the real at job with java)
What is missing?

<html>
<head>
<title>MAPA</title>
<link href="https://community.esri.com/visual/trs/padrao_portal.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<META name="GENERATOR" content="IBM WebSphere Studio">

<style>
html,body,#map{
padding:0;
margin:0;
height:100%;
width:100%;
    }

#map #basemaps_bar{
position:absolute;
right:10px;
top:5px;
z-Index:99;
}

#basemaps_bar input{
width: 67px;
height: 19px;
background: #fff;
color: #777;
border: 1px solid #666;
border-radius: 1px;
font-family: arial;
font-size: 11px;
font-weight: bold;
cursor: pointer;
}

</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>
<script>

      dojo.require("esri.map");
      dojo.require("esri.dijit.BasemapGallery");

      var map;
      var basemapGallery;
   var baseMapImagem = false;

     function init() {
       map = new esri.Map("map", {
          zoom: 3
        });
createBaseMap();
dojo.connect(map, "onExtentChange", test);
      }

function test(extent,delta,levelChange,lod){
if(baseMapImagem){
   if(lod.level > 17){
    map.setLevel(17);
   }
}
}

function createBaseMap(){
//Definir as camadas que serão utilizados para cada base do mapa
var streetLayer = new esri.dijit.BasemapLayer({ //Rua
   url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
});
var imageLayer = new esri.dijit.BasemapLayer({ //Imagem
   url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
});
var transportLayer = new esri.dijit.BasemapLayer({ //Híbrido
   url: "https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer"
});
//Cria as bases do mapa
var streets = new esri.dijit.Basemap({
   layers: [streetLayer],
   title: "Ruas"
});
var topo = new esri.dijit.Basemap({
   layers: [imageLayer],
   title: "Imagem"
});
var hybrid = new esri.dijit.Basemap({
   layers: [transportLayer, imageLayer],
   title: "Híbrido"
});

var basemaps = [streets,topo,hybrid];

basemapGallery = new esri.dijit.BasemapGallery({
    showArcGISBasemaps: false,
    basemaps: basemaps,
    map: map
});

//adicionar botão para cada base do mapa
   dojo.forEach(basemapGallery.basemaps, function(basemap) {
    dojo.create("input", {
   type: "button",
   value: basemap.title,
   onclick: dojo.hitch(this, function(){

    var baseMap = map.getBasemap();

    if(basemap.id != "basemap_0"){
     alert("Para este nível de detalhamento podem existir regiões onde a imagem de satélite não estará disponível,\n"+
       "nestes casos aplique menos zoom para visualizar mais de longe.");
     baseMapImagem = true;

     if(map.getLevel() > 17){
      map.setLevel(17);
     }
    }else{
     baseMapImagem = false;
    }
    this.basemapGallery.select(basemap.id);
   })
    },"basemaps_bar");
});
   }
    dojo.ready(init);
</script>
</head>

<body>

<form action="" name="mapaForm">
     <html:hidden name="mapaForm" property="latitude"/>
     <html:hidden name="mapaForm" property="longitude"/>
<table class="tabela_dados">
   <tr>
    <th width="10%">Latitude/Longitude:</th>
    <td colspan="3" width="90%">
     <input name="latitude" type="text" class="entradadisable" id="latitude" style="text-align: center" size="12"
     readonly="readonly " value="<bean:write name="mapaForm" property="latitude"/>"> /
     <input name="longitude" type="text" class="entradadisable" id="longitude" style="text-align: center" size="12"
      readonly="readonly" value="<bean:write name="mapaForm" property="longitude"/>">
    </td>
   </tr>
</table>
<div id="map" style="width: 570px; height: 360px">
<div id="basemaps_bar" style="width: 790px; height: 20px"></div>
<div>
</form>
</body>
</html>

JasonZou · ‎08-22-2013

I am not a java programmer, and cannot understand how you pass the lat/lon from the java bean to the two input controls. In addition, I don't see any code that will use the given lat/lon to zoom the map around. Can you get the lat/lon values from the url or java bean?

TimCollyer · ‎08-22-2013

This code will add a graphic based on the url parameters "lat" and "lon"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title>Testing</title> 
  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css" />
  
  <style>
   html,body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
   }
   #map {
    overflow: hidden;
    height: 100%;
    width: 100%; 
   }
  </style>


  <script type="text/javascript">var djConfig = {parseOnLoad: true};</script> 
  <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.5"></script>
  
  <script type="text/javascript">
      
   require(["dojo/ready"], function(ready) {
       ready(init);
      });
   
   function init() {
       require(["esri/map", "esri/layers/GraphicsLayer", "dojo/io-query", "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol", "esri/graphic", "dojo/_base/Color"],
        function(Map, GraphicsLayer, ioQuery, Point, SimpleMarkerSymbol, Graphic, Color){
         var map = new Map("map", {
                  basemap: "topo",
                  center: [-98.57, 39.82],
                  zoom: 4
         });
         
         var url = document.URL;
         
      var queryString = url.substring(url.indexOf("?") + 1, url.length);
      var urlQuery = ioQuery.queryToObject(queryString);
      
      var lat = urlQuery.lat;
      var lon = urlQuery.lon;
      
      var sms = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_SQUARE).setColor(new Color([255,0,0,0.5]));
      var point = new Point(lat, lon, map.spatialRefernce);
      var graphic = new Graphic(point, sms, null, null);
      
      var graphicsLayer = new GraphicsLayer();
      graphicsLayer.add(graphic);
      
      map.addLayer(graphicsLayer);
        }
       );    
   }
  </script>  
 </head> 


 <body class="claro" style="width:100%; height:100%">
  <div id="map" style="width:100%; height:100%">
  </div>
 </body> 
</html>

RichardButgereit · ‎12-15-2013

Note on the example provided above -- the Point is incorrect, passing in lat first and then lon...

It should be --

var point = new Point(lon, lat, map.spatialRefernce);