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; } } }

results on the map by latitude and longitude

RicardoEufrasio1

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

Vind meer berichten getagd met

Accepted answers

All comments

JasonZou

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

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

Like the example (attachment)

esri.png

JasonZou

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

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>

map.jpg

JasonZou

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

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

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);

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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