Tuesday, January 6, 2015

Adding custom styles to your ESRI JS TextSymbol

Noticed the TextSymbol class is a bit limited and wanted to add shadows to my text labels.

My solution is to run all over the texts in the graphic layer and add css to the desired ones. In this example I added shadow to all texts in the graphics layer.

$("#myLayerId_layer").find('text').css('text-shadow', 'black 0.1em 0.1em 0.2em');

Monday, February 10, 2014

HTML5 Scale Line for Esri JavaScript API

jsfiddle (esri api)
non esri application

This code will show you how easy is to draw a scale line in HTML5 and refresh it even while zooming and panning the map control.

After setting the canvas (notice height and width of canvas in js are different from the height and width of the css), I empty it every time 'onExtentChange' fires.
Then I calculate the location in pixels inside the canvas where the line begin and ends to a fixed length number (fixed numbers are in 'getNearestValue').

To notice the object both in satellite and map modes, I drew a black rectangle and smaller gray on top of it. Added the text for size above and that's it.


Thursday, June 13, 2013

Basemap Toggle Button for Esri JavaScript API


In this post I will share my JavaScript basemap toggle button. Located on the top right it's really a small map which get it's extent from the events of the main map (extent change, pan).

The small extent is calculated easily and while you navigate over the main map, the button shows you the alternative map in the exact location.

When you press the button, The opacity is changed from 1 to 0 and vice versa in a period of 500 ms. This shows a nice animation.


Thursday, March 21, 2013

Esri DevSummit 2013 Sessions Explorer

I've decided not to make my DevSummit Sessions Explorer this year but changed my mind when I saw there is a contest. ;-)

My JavaScript skills are limited so it took me around 20 hours to complete it. With Silverlight it would have taken me 3-4 hours tops.

This app (88 sloc) contains :
  • Filtering the 200 sessions by name, room and day/time (i.e. : 'javasc', 'wed 08', 'smoketr').
  • Filtering by pressing the room over the map.
  • Highlighting the room when you mouseover the list.
  • Expand each session from Esri developer summit site (not as simple as it sounds) so you can view the session full details. Used PHP external proxy page for this.
  • Pan to expanded session (try the Hilton sessions).
  • Esri JavaScript API
  • Dojo
  • JQuery
Please retweet if you like this application!

Thursday, July 5, 2012

Measuring Over Oblique Images

Image 1

Idan Computers Ltd. released Oblivision for browser application.
The install is quite simple, just point to a virtual directory containing the orthophoto and the oblique images and you are all set. If you add more oblique images in the future, the software will automatically detect them and add the set to the system.

Image 2
So what can you do with this app?
1. Locate the best 4 oblique images at a certain point (click on the orthophoto, search address or search coordinates).
2. Measure distances and areas on the orthophoto and over the oblique images directly!
3. Calculate x/y/z of any point that can be seen in two or more images.
4. Load background layers (i.e. shape files, Esri ArcGIS Server layers) into the orthophoto and the obliques.
5. Sync between all 5 windows.
6. Navigate through all oblique images that are relevant to the specific location.
7. New : identify and show map tips on all 5 windows.
8. New : measure area of a flat / slanted roof and get x,y,z of each corner.
9. New : a time slider which helps to find changes through time.

Image 3

Image 1 : Three height  measurements of the same building.
Image 2 : A precise measurement of a slanted roof.
Image 3 : Showing vector data over the oblique photo.

As for technology, there are two versions for this app:
a. runs over your Esri ArcGIS Server and show/search layers from it. Based both on Esri Silverlight or JS API. Currently the Silverlight app is much more beautiful!
b. No 3rd party software - pure Silverlight and JS.

Feel free to contact me for more details.

Sunday, May 6, 2012

Running Borland C++ from Silverlight

I had some massive and complex algorithms written in Borland c++ and wanted to use them in my Silverlight app. Because I know to read c++ but unfortunately don't understand  it, I asked a friend to make a c++ exe which get string parameters and write the result to a file. The second step was to write a simple web service which runs the exe with the parameters and read the output file in the end of the process. The third and last step was to consume the web service from the Silverlight application.

It may sound to some of you as a workaround typical to ten years ago, But most of you are going to write Java Script in the next few years, so don't say a word about that. ;-)

Multiple connections - of course one of the parameters is the output file name so two or more processes can run in the same time.

Security - this is the fun part. The algorithm is inside exe on a server so reading the XAP would not give anything. Even if you get the exe I don't think you can dig up the code (again, not a c++ person).

Although I use WaitForExit in the webserice, It's still don't hang the application because the whole webserive is running async. 

Conclusion : Don't use it unless you have to. It saved me a lot of time in a particular project!

Silverlight Code:
private void m_btn_go_Click(object sender, RoutedEventArgs e)
    ServiceReference1ServiceSoapClient c = new ServiceReference1ServiceSoapClient();
    c.get_squareCompleted += new EventHandler<ServiceReference1.get_squareCompletedEventArgs>(c_get_squareCompleted);

void c_get_squareCompleted(object sender, ServiceReference1get_squareCompletedEventArgs e)

WebSerice Code:
public string get_square(string sInput)
    string exeFilePath = "D:\\Path\\Prog.exe";

    System.DiagnosticsProcessStartInfo psi = new System.DiagnosticsProcessStartInfo(exeFilePath);
    psi.UseShellExecute = false; 
    psi.RedirectStandardOutput = true;
    psi.RedirectStandardInput = true;
    psi.RedirectStandardError = true;
    psi.Arguments = sInput;
    psi.WorkingDirectory = "D:\\Path";

    System.DiagnosticsProcess proc = System.Diagnostics.Process.Start(psi);
    StreamReader pStreamReader = new StreamReader("D:\\Path\\output.txt");
    string pData = pStreamReader.ReadToEnd();

    return pData;

Wednesday, February 29, 2012

Convert coordinates from Web Mercator to UTM

Live Sample
Source Code

Wanted to show UTM coordinates (plus zone and hemisphere) while moving the mouse on a Web Mercator map.
Searched and found a very useful class and used it in the MouseMove event of the map.
With Esri Silverlight API it took only a few minutes to do! Used WGS84 ellipsoid.

private void MyMap_MouseMove(object sender, System.Windows.InputMouseEventArgs e)
    //Web Mercator
    Point screenPoint = e.GetPosition(MyMap);
    MapPoint pMapPointWM = MyMap.ScreenToMap(screenPoint);
    double x1 = Math.Round(pMapPointWM.X, 0);
    double y1 = Math.Round(pMapPointWM.Y, 0);
    m_txt32.Text = x1 + "," + y1;

    MapPoint pMapPointGeog = (MapPoint)wb.ToGeographic(pMapPointWM);
    m_txt22.Text = String.Format("{0:0.0000},{1:0.0000}", pMapPointGeog.X, pMapPointGeog.Y);

    GeoUTMConverter g = new GeoUTMConverter();
    g.ToUTM(pMapPointGeog.Y, pMapPointGeog.X);
    double x3 = Math.Round(g.X);
    double y3 = Math.Round(g.Y);
    m_txt11.Text = "UTM" + g.Zone + g.Hemi.ToString().Substring(0, 1) + "/WGS84";
    m_txt12.Text = x3 + "," + y3;