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

HIghlight map:new bie

vinayb

HI All,

I am new bie and we want to develop a world map which has only countries , no street or any other level .I want functionalists where when i click on any country i should be able to highlight it and also display some pop-up.I want use java-script api, can anybody let me know if this can be achieved and how do i get started.

Vind meer berichten getagd met

Accepted answers

All comments

vinayb

Thank you i was able to query for featue layer i am trying to do that on dynamicMapservice.I have one question i was able to highlight the map on load of the page but it could not highlight it completly ,that i was covered on the boudry and some solid strokes in between if i want to completely cover india how do that .I know below is the piece of code which will do that but i am unable to modify it , could you please help.

var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_FORWARD_DIAGONAL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5]));

VinayBansal

do i have to query only the feature layer is there an option for ArcGisDynamicMapService layer.
Secondly for highlighting is there any alternative way is it only this way?

Yes you can do that for ArcGISDynamicMapService layer also.
1. Add ArcGISDynamicMapServiceLayer on map,
2. Then in querytask pass the url that you are using for creating the featurelayer.
3. Rest follow the same procedure fr highlighting the feature.

vinayb

Great I was able to do that ,below is the code

<!DOCTYPE html>
<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>Feature Layer Only Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="http://js.arcgis.com/3.6/"></script>
    <script>
      require([
        "dojo/dom-construct", 
        "esri/map", 
        "esri/layers/FeatureLayer",
        "esri/geometry/Extent",
        "esri/InfoTemplate",
        "dojo/domReady!"
      ], function(
          domConstruct,
          Map,
          FeatureLayer,
          Extent,
          InfoTemplate
        ) {
          var bounds = new Extent({
            "xmin":-16045622,
            "ymin":-811556,
            "xmax":7297718,
            "ymax":11142818,
            "spatialReference":{"wkid":102100}
          });

          var map = new Map("map", { 
            extent: bounds
          });
          
          
          

          var url = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/2";

          var template = new InfoTemplate("World Regions", "Region: ${REGION}");

          var fl = new FeatureLayer(url, {
            id: "world-regions",
            //infoTemplate: template
          });
          
          require(["dojo/on", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/_base/Color", "esri/graphic"], function(on, SimpleFillSymbol, SimpleLineSymbol, Color, Graphic) {
                    on(fl, "click", function(evt) {
                        var queryTask = new esri.tasks.QueryTask(url);

      //build query filter
      var query = new esri.tasks.Query();
      query.returnGeometry = true;
                        query.where = "REGION='Central America'";
      dojo.connect(queryTask, "onComplete", function(featureSet) {
      map.graphics.clear();
      var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_FORWARD_DIAGONAL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5]));
                        //QueryTask returns a featureSet.  Loop through features in the featureSet and add them to the map.
        dojo.forEach(featureSet.features,function(feature){
       var graphic = feature;
       graphic.setSymbol(sfs);
      map.graphics.add(graphic);
          });
        });
        queryTask.execute(query);
    });
});
          
          map.addLayer(fl);
        }
      );
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

do i have to query only the feature layer is there an option for ArcGisDynamicMapService layer.
Secondly for highlighting is there any alternative way is it only this way?

VinayBansal

Great , I know i have to use query task to query the service.But my question is if i query

http://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/2

which has reqion as fields that it return , i will get string but how will i use this string to highlight map , how will i identify the reqion or how i get that reqion object.Plz help.

Also can i query only feature layer , i check in ArcGISDynamicMapServiceLayer there is no help for query.

When you query, you will get the featureset of features with attributes and graphic. If you specify returnGeometry = true in query. You can use the geometry returned to highlight to map
https://developers.arcgis.com/en/javascript/jssamples/query_click.html

vinayb

Great , I know i have to use query task to query the service.But my question is if i query

http://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/2

which has reqion as fields that it return , i will get string but how will i use this string to highlight map , how will i identify the reqion or how i get that reqion object.Plz help.

Also can i query only feature layer , i check in ArcGISDynamicMapServiceLayer there is no help for query.

VinayBansal

Thanks a lot,

by the highlighting part is where i am struck actually , the example that u pointed out get the region attribute when u click on map but here what i want is vice versa, i want to provide region and highlight , this is very important for me so please point out something.

You can use querytask to query on the layer and highlight on the map.
https://developers.arcgis.com/en/javascript/jssamples/fl_paging.html

vinayb

Thanks a lot,

by the highlighting part is where i am struck actually , the example that u pointed out get the region attribute when u click on map but here what i want is vice versa, i want to provide region and highlight , this is very important for me so please point out something.

VinayBansal

Hi Vinay,

You can do these things to achieve this :
1. Create MXD from you shape file. or Create a FGDB and import shapefile to FGDB and add layer in MXD from FGDB
2. Publish it to ArcGIS Server using ArcMap.
3. You cannot access the country using dojo.byId('us') as you were trying to do....
4. You need to then follow this sample to highlight the countries
https://developers.arcgis.com/en/javascript/jssamples/fl_no_basemap.html

vinayb

Thank you.

Help me understand , we have people you can develop shape files.If i ask them to develop shape file , which has country boundries, if i push to aig server can i use that to do the functionality that i told u like , if i want to highlight us can i do something like dojo.byId('us') and highlight.Please guide me on this.

JakubMalec

I've found some World boundary shapefile ( http://geocommons.com/overlays/33578 ), but I won't help you with publishing it on the ArcGIS Server since I've never done it.

vinayb

I have licence .My company has brought it .

Now i need a world map with only country code , can you please help me with this.

JakubMalec

1)DO i have to choose only from existing rest service from arcgis , cant i create myself services.

You can create your maps in ESRI ArcMap and publish them on ESRI ArcGis Server but you need a licence to use these products and it's not cheap ;]. The alternative is using free tools such as QGIS and Geoserver - create maps with QGIS (or find some shapefiles in the Internet) and publish them as WMS services with Geoserver.

2) I need a world map where i can identify each country by an two letter word id , so that if i want to highlight us , then i can something like dojo.byId('us") and apply some graphic code to highlight it.

I don't know any public service that contains countries, but i haven't been looking :P. Creating the functionality that you mention is easy, but without the service you won't do anything.

vinayb

Thanks a lot.

Please let me know if my understanding of ArcGis is right.

ArcGis exposes some restfull services which we can consume and apply our logic based on
dojo or rest , where we can apply our logic.

Below are few of my question

1)DO i have to choose only from existing rest service from arcgis , cant i create myself services.
2) I need a world map where i can identify each country by an two letter word id , so that if i want to highlight us , then i can something like dojo.byId('us") and apply some graphic code to highlight it.

JakubMalec

The highlight in the sample comes from the default behavior that comes with the infoTemplate.
That's how you can create your own highlight on click:

                require(["dojo/on", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/_base/Color", "esri/graphic"], function(on, SimpleFillSymbol, SimpleLineSymbol, Color, Graphic) {
                    on(fl, "click", function(evt) {
                        
                        // clears current selection
                        map.graphics.clear();
                        
                        // create new graphic with selected graphic's geometry
                        var graphic = new Graphic(evt.graphic.geometry);
                        
                        // create a new symbol for the graphic
                        var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_FORWARD_DIAGONAL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5]));
                        
                        // add symbol to the graphic
                        graphic.setSymbol(sfs);     
                        
                        // add the graphic to the map   
                        map.graphics.add(graphic);
                    });
                });

Also instead of adding the graphic to the map, you could create a GraphicsLayer and add the graphics to it, so you will able to clear only the graphics layer instead of all graphics on the map.

vinayb

Great , it worked .Thank you .But there is a default behavior where the boundaries of the countries are highlighted,where is it coming from , is it rest service provided by the arcgis.I want a complete different map and on click i want to highlight whole country not just boundaries how can i do this.Plz help

Plz explain where is functionality of highlighting defined.

JakubMalec

There's a "onClick" event available for the FeatureLayer. When a graphic of a FeatureLayer is clicked on a map it returns the graphic that has been clicked.

In the sample there's an infoTemplate specified for the layer which adds onclick behavior (highlights the region polygon and shows the graphic attributes in a popup).

In the sample above you could add your onClick listener after "fl" variable instantiation:

require(["dojo/on"], function(on){
    on(fl, "click", function(evt) {
        // do something with evt.graphic - get it's attributes and display them somewhere, edit it's symbol, reshape it etc.
    });
});

vinayb

Thanks a lot,

but i am unable to understand the example.I want to know where is the code which has on mouse click event where it highlights the country , i want to overide it and provide my own funcitonality how can this be done.?

BetsySchenck-Gardner

Hi VinayBa,
There is a perfect example of what you want to achieve in the samples section. Here's the link:
https://developers.arcgis.com/en/javascript/jssamples/fl_no_basemap.html
The map service comes from Esri that just has world regions displayed ... no other basemap details. When you click on any of the countries, it is highlighted and displayed with just some very general information as well as a zoom function. You can edit the infoTemplate to provide more details to your popup. Hope this can get you started.
Regards,
Betsy

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.