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

Drawing line with lat and lon in array + Icon

AhmadMizan

Sorry for asking this noob question, because I cant find in documentation . Im new in JavaScript..

My question is how to draw line with symbol or icon with lat and lon information using script. In documentation only show me to use drawing tool.. But I need script example, that could help me a lot.

for example my array in php store 10 lat and lon information and need to be drow on map.

Hope someone can help me on this.

Finde mehr Beiträge mit dem Tag

Accepted answers

JohnGravois

try this...

function init() {        var options = {         basemap : "gray",         center : [115.246, 5.25803],         zoom : 11        };        // Create map        map = new esri.Map("mapDiv", options);         var p1 = new esri.geometry.Point(115.246, 5.25803);        var p2 = new esri.geometry.Point(115.2462, 5.22964);           var line = new esri.geometry.Polyline();        line.addPath([p1, p2]);           var pointSym = new esri.symbol.SimpleMarkerSymbol();   var lineSym = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color("blue"));   var infoTemplate = new esri.InfoTemplate("title","content");           var gLayer = new esri.layers.GraphicsLayer({          "id" : "scratch"         });           // create a graphic        var pt1Graphic = new esri.Graphic(p1, pointSym);   var pt2Graphic = new esri.Graphic(p2, pointSym);      pt1Graphic.setInfoTemplate(infoTemplate);   pt2Graphic.setInfoTemplate(infoTemplate)      var lineGraphic = new esri.Graphic(line, lineSym);           // add it to the graphics layer   gLayer.add(lineGraphic);   gLayer.add(pt1Graphic);   gLayer.add(pt2Graphic);           // add the graphics layer to the map        map.addLayer(gLayer);       }

All comments

AhmadMizan

Thanks John,

I got better view to understand now.. thanks for sharing the code..:)

JohnGravois

try this...

function init() {        var options = {         basemap : "gray",         center : [115.246, 5.25803],         zoom : 11        };        // Create map        map = new esri.Map("mapDiv", options);         var p1 = new esri.geometry.Point(115.246, 5.25803);        var p2 = new esri.geometry.Point(115.2462, 5.22964);           var line = new esri.geometry.Polyline();        line.addPath([p1, p2]);           var pointSym = new esri.symbol.SimpleMarkerSymbol();   var lineSym = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color("blue"));   var infoTemplate = new esri.InfoTemplate("title","content");           var gLayer = new esri.layers.GraphicsLayer({          "id" : "scratch"         });           // create a graphic        var pt1Graphic = new esri.Graphic(p1, pointSym);   var pt2Graphic = new esri.Graphic(p2, pointSym);      pt1Graphic.setInfoTemplate(infoTemplate);   pt2Graphic.setInfoTemplate(infoTemplate)      var lineGraphic = new esri.Graphic(line, lineSym);           // add it to the graphics layer   gLayer.add(lineGraphic);   gLayer.add(pt1Graphic);   gLayer.add(pt2Graphic);           // add the graphics layer to the map        map.addLayer(gLayer);       }

AhmadMizan

so Derek, to make appear same like picture I attach before i have to add this line code?
http://help.arcgis.com/en/webapi/javascript/arcgis/jsapi/graphic.html

I added before, but nothing happened on map..

there any sample that can show me how to do this?.. it really help me with example..

derekswingley1

i take that back. derek used a web mercator basemap in his sample as well, so there must be something else going on.

With 3.3, if you don't specify a spatial reference when creating a geometry, it's assumed to be WGS84 (wkid 4326) coordinates.

Also with 3.3, if you add a graphic to a map that has a geographic geometry (again, wkid 4326), it's converted on the fly to web mercator so you don't have to worry about explicitly doing the conversion.

IMG-1.jpg

AhmadMizan

There three point in script are connected well in map.. but I failed to make a symbol,attribute and info template. Im only interest to make every each point are connected and have and information box.. same like picture on the attachment..


 dojo.require("esri.map");
          
    var map;
    
    function init() {
      var options = { 
        basemap: "gray",
        center: [114.772, 5.12609],
        zoom: 11
      };
      // Create map
      map = new esri.Map("mapDiv",options);

      var p1 = new esri.geometry.Point(115.246, 5.25803, map.spatialReference);
      var p2 = new esri.geometry.Point(115.2462, 5.22964, map.spatialReference);

      var line = new esri.geometry.Polyline(new esri.SpatialReference({wkid:4326}));
       line.addPath([p1, p2]);
      var sym = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color("blue"));

     var gLayer = new esri.layers.GraphicsLayer({ "id": "scratch" });
          // create a graphic
     var graphic = new esri.Graphic(line,sym);
          // add it to the graphics layer
     gLayer.add(graphic);
          // add the graphics layer to the map
     map.addLayer(gLayer);

     }

    dojo.addOnLoad(init);

Capture.jpg

Script_working.py.zip

JohnGravois

i take that back. derek used a web mercator basemap in his sample as well, so there must be something else going on.

JohnGravois

since the coordinates of your polyline are in a different coordinate system than the Web Mercator basemap, you will have to specify the spatial reference of the polyline explicitly.

this is a little confusing, because the map constructor option "center" will translate latitude and longitude to web mercator values automatically, but the polyline object does not.

new esri.geometry.Polyline(new esri.SpatialReference({wkid:4326}));

AhmadMizan

John,

actually, for sample link I gave to you.. I'm interested with the format graphic on map.. that what im looking for.. point connect to point with line and have a rounded symbol that can show information..

Derek,

thanks for the example.. that give me a bit understanding.. I try to add symbol,attribute and info template.. but it give me nothing on map.. Im really sure that I used it wrong.. can you guide me?..

    dojo.require("esri.map");
          
    var map;
    
    function init() {
      var options = { 
        basemap: "gray",
        center: [114.772, 5.12609],
        zoom: 11
      };
      // Create map
      map = new esri.Map("mapDiv",options);

      //var line = new esri.geometry.Polyline();
      line.addPath([ [115.246, 5.25803], [115.2462, 5.22964],[115.2109,5.19103] ]);
      //var sym = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color("blue"));

      var sms = new esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE).setColor(new dojo.Color([255,0,0,0.5]));
      var attr = {"Xcoord":evt.mapPoint.x,"Ycoord":evt.mapPoint.y,"Plant":"Mesa Mint"};
      var infoTemplate = new esri.InfoTemplate("Vernal Pool Locations","Latitude: ${Ycoord} <br/>Longitude: ${Xcoord} <br/>Plant Name:${Plant}");

    

      // create a new graphics layer
          var gLayer = new esri.layers.GraphicsLayer({ "id": "scratch" });
          // create a graphic
          var graphic = new esri.Graphic(line,sms,attr,infoTemplate);
          //var graphic = new esri.Graphic(line,sym);
          // add it to the graphics layer
          gLayer.add(graphic);
          // add the graphics layer to the map
          map.addLayer(gLayer);
 

    }

    dojo.addOnLoad(init);

derekswingley1

Here's a very simple example of putting a line graphic on a map: http://jsfiddle.net/hBa6v/

More info:
�??at minimum, to see shapes on a map, you need a graphic with a geometry and a symbol
�??the example above uses a polyline and a simple line symbol

JohnGravois

in the sample you just linked to, none of the geometries which represent the paths of hurricanes are written into the code of the web application. rather, they are retrieved from a running map service based on the time extent.

AhmadMizan

Thanks for your reply.

there are way more organized to me create this draw line? example code perhaps .. I'm not sure I can understand tutorial fraction like that.

the output that I'm interest like this one --> http://developers.arcgis.com/en/javascript/samples/renderer_temporalClassBreaks/

really appreciate with your reply.:D

JohnGravois

1. pass the coordinate values in when instantiating a new polyline geometry object
2. pass the geometry to a new graphic (which also has a symbol defined)
3. add it to the map

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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