ThinkGeo.com    |     Documentation    |     Premium Support

Click event in javaScript

Hello,


 I am working on the Web Edition and I show the zip codes on the map.

 I can get the click event fired in the server side code(C#) and make selection/highlight on the clicked zip code.

 I here attached my C# code. The code is not clean yet.

 

 I am looking for a way to get the clicked zip code in client side javaScript.

 Do you have any sample code for that? Or would you please advise me how to do it?

 

Thank you

shwe



  protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Map1.MapUnit = GeographyUnit.DecimalDegree;
                Map1.MapBackground.BackgroundBrush = new GeoSolidBrush(GeoColor.GeographicColors.ShallowOcean);

                Map1.MapTools.MouseCoordinate.Enabled = true;
                //===============================
//Load from shape file and draw each zip code for New Jersey
                ShapeFileFeatureLayer stateLayer = new ShapeFileFeatureLayer(@"C:\temp\WebSites\ThinkGeo\Data\NJ\tl_2010_34_zcta510.shp", @"C:\temp\WebSites\ThinkGeo\Data\NJ\tl_2010_34_zcta510.idx");
                stateLayer.Name = "StateLayer";
                stateLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.Park1;
                stateLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
                stateLayer.ZoomLevelSet.ZoomLevel01.DefaultTextStyle = TextStyles.CreateSimpleTextStyle("ZCTA5CE10", "Arial", 8, DrawingFontStyles.Italic, GeoColor.StandardColors.Black, 3, 3);
                Map1.StaticOverlay.Layers.Add(stateLayer);
                //================================
//This layer is for showing the selected zip code
                InMemoryFeatureLayer selectLayer = new InMemoryFeatureLayer();
                selectLayer.Name = "SelectLayer";
                selectLayer.Open();
                selectLayer.Columns.Add(new FeatureSourceColumn("ZCTA5CE10"));
                selectLayer.Close();
                selectLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.CreateSimpleAreaStyle(GeoColor.FromArgb(150, GeoColor.StandardColors.Red)); 
                selectLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;

                LayerOverlay selectOverlay = new LayerOverlay();
                selectOverlay.Name = "SelectOverlay";
                selectOverlay.Layers.Add("SelectLayer", selectLayer);
                selectOverlay.IsBaseOverlay = false;

                Map1.CustomOverlays.Add(selectOverlay);
                //================================

                Map1.CurrentExtent = GetFullExtent(stateLayer);
//selects the zipcode = 08812
                //DisplayZip2("08812");
                
            }
            
        }

        
//Get the position of the click, get the feature ( zip code) on the position and selects/highlights the zipcode
        protected void Map1_Click(object sender, MapClickedEventArgs e)
        {
            Collection<string> columnNames = new Collection<string>();
            columnNames.Add("ZCTA5CE10"); // column for zip code

            LayerOverlay stateOverlay = (LayerOverlay)Map1.StaticOverlay;//stateOverlay
            ShapeFileFeatureLayer stateLayer = (ShapeFileFeatureLayer)stateOverlay.Layers[0];

//find the feature ( zip code) on the clicked point 
            stateLayer.Open();
            Collection<Feature> features = stateLayer.FeatureSource.GetFeaturesNearestTo(new PointShape(e.Position.X, e.Position.Y), Map1.MapUnit, 1,
            stateLayer.Close();

//select/highlights the zipcode
            LayerOverlay selectOverlay = (LayerOverlay)Map1.CustomOverlays[0];//SelectOverlay
            InMemoryFeatureLayer selectLayer = (InMemoryFeatureLayer)selectOverlay.Layers["SelectLayer"];
            if (features.Count > 0)
            {
                
                if(!selectLayer.InternalFeatures.Contains(features[0]))
                    selectLayer.InternalFeatures.Add(features[0]);
                else
                    selectLayer.InternalFeatures.Remove(features[0]);
            }

            selectOverlay.Redraw();
        }

 


 Hello shwe,


 
Thanks for your post, for this situation, if you don't have more special requirements, I recommend you use a hidden input control to get the value, please have a look at this code:
 


protected void Map1_Click(object sender, MapClickedEventArgs e)
     {
         Collection<string> columnNames = new Collection<string>();
         columnNames.Add("ZCTA5CE10"); // column for zip code

         LayerOverlay stateOverlay = (LayerOverlay)Map1.StaticOverlay;//stateOverlay
         ShapeFileFeatureLayer stateLayer = (ShapeFileFeatureLayer)stateOverlay.Layers[0];

         //find the feature ( zip code) on the clicked point 
         stateLayer.Open();
         Collection<Feature> features = stateLayer.FeatureSource.GetFeaturesNearestTo(new PointShape(e.Position.X, e.Position.Y), Map1.MapUnit, 1, columnNames);
         stateLayer.Close();

         //select/highlights the zipcode
         LayerOverlay selectOverlay = (LayerOverlay)Map1.CustomOverlays[0];//SelectOverlay
         InMemoryFeatureLayer selectLayer = (InMemoryFeatureLayer)selectOverlay.Layers["SelectLayer"];
         if (features.Count > 0)
         {

             if (!selectLayer.InternalFeatures.Contains(features[0]))
                 selectLayer.InternalFeatures.Add(features[0]);
             else
                 selectLayer.InternalFeatures.Remove(features[0]);
         }
         Zipcode.Value = features[0].ColumnValues.Values.ToString();
     }
In aspx page:


 <input id="Zipcode" style="width: 120px;" visible="false" runat="server" type="text" value="" class="txt_normal" />


Then you can use document.getElementById("Zipcode").value to get the zipcode.


Please feel free to let us know your problems.


Regards,


Gary


 



Thank you Gary.


So, you are saying to do a round trip to server ( post back)?


Is there any way we can know just from javaScript?


 


Thank you


shwe



Hello shwe, 
  
 If you want to use JavaScript to make this, you can use AJAX, and put the features[0].ColumnValues.Values.ToString() in the callback, it will working as normal. 
  
 Regards, 
  
 Gary