Mapping

NickA
Posts: 1
Joined: Thu Jul 30, 2015 12:00 pm

Mapping

Postby NickA » Thu Jul 30, 2015 12:39 pm

I'm curious if there are currently any mapping tools supported?

JS-Support
Site Admin
Posts: 663
Joined: Tue Apr 08, 2014 3:42 pm

Re: Mapping

Postby JS-Support » Fri Jul 31, 2015 3:16 am

Hi NickA,

welcome to the forums.

Yes, you can use any JavaScript mapping library of your choice. Please find below a tutorial to use the ArcGIS mapping library (https://developers.arcgis.com/javascript/) in your CSHTML5 project:

1) Download and install CSHTML5 if you have not done so already

2) Open Visual Studio, and click "File -> New Project -> C#/XAML for HTML5" -> "Empty Application"

Make sure to call the new project "TestArcGisCshtml5" for the sake of this tutorial.

3) Create a new class named "ArcGISMapControl" and copy/paste the following code:

Code: Select all

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace TestArcGisCshtml5
{
    public class ArcGISMapControl : Canvas
    {
        public ArcGISMapControl()
        {
            this.Loaded += ArcGISMapControl_Loaded;
        }

        void ArcGISMapControl_Loaded(object sender, RoutedEventArgs e)
        {
            // Make sure that we are not running inside the Simulator (only running inside the web browser is currently supported):
            if (CSharpXamlForHtml5.Environment.IsRunningInJavaScript == false)
            {
                this.Children.Add(new TextBlock()
                {
                    Text = @"
The ArcGIS Map Control currently
does not support runnning inside
the Simulator. Please run inside
your web browser instead."
                });
            }
            else
            {
                // Always ensure that the control is loaded into the visual tree before messing up with its HTML DOM representation (not really useful here because we are inside the "Loaded" event):
                if (!CSharpXamlForHtml5.DomManagement.IsControlInVisualTree(this))
                    throw new Exception("The control is not loaded into the visual tree. Consider waiting until the Loaded event before calling this piece of code.");

                // Get a reference to the HTML DOM representation of the control. This will return the "div" used to render the control in HTML:
                object div = CSharpXamlForHtml5.DomManagement.GetDomElementFromControl(this);

                // Set the ID of the div so that we can reference it from the JavaScript code:
                ((dynamic)div).id = "mapDiv";

                // Call the JavaScript code that will load the ArcGIS JavaScript librabries, load the ArcGIS CSS stylesheets, and render the map inside the aforementioned div:
                JSIL.Verbatim.Expression(@"
function loadScript(url, callback)
{
    // Add the script tag to the head.
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading.
    head.appendChild(script);
}

function loadCss(url, callback)
{
    // Add the link tag to the head.
    var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'http://js.arcgis.com/3.13/esri/css/esri.css';
    link.media = 'all';

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    link.onreadystatechange = callback;
    link.onload = callback;

    // Fire the loading.
    head.appendChild(link);
}

var loadMap = function() {
    require([""esri/map"", ""dojo/domReady!""], function(Map) {
    map = new Map(""mapDiv"", {
    center: [-56.049, 38.485],
    zoom: 3,
    basemap: ""streets""
    });
    });
};

loadCss(""http://js.arcgis.com/3.13/esri/css/esri.css"", function() {
    loadScript(""http://js.arcgis.com/3.13/"", function() {
        loadMap()
    });
});
");
            }
        }
    }
}


Note: adding a C# class may cause a reference to "System.dll" to be automatically added to your project. You need to remove that reference if it is there.

Screenshot:
ArcGIS_CSHTML5_Screenshot1.png
ArcGIS_CSHTML5_Screenshot1.png (102.16 KiB) Viewed 4358 times


4) Modify the MainPage.xaml to make it look like this:

Code: Select all

<Page
    x:Class="TestArcGisCshtml5.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestArcGisCshtml5">
    <local:ArcGISMapControl/>
</Page>


(you can safely ignore the intellisense error regarding the type not found)

Screenshot:
ArcGIS_CSHTML5_Screenshot2.png
ArcGIS_CSHTML5_Screenshot2.png (81.85 KiB) Viewed 4358 times


5) Click "Debug" -> "Start Debugging"

6) When the Simulator appears, click "Final version" -> "Click to run in the browser...".

The web browser will appear with the AcrGIS map on it.

Please note that the map will only appear when your app is run inside the web browser, not inside the Simulator.

Also note that if you are using Internet Explorer, the browser security settings may prevent you from loading the map if your URL starts with "file:///" (cross-protocol issue). To workaround this issue, either use a web server such as IIS (http://localhost...) or test with another browser (I tested with Chrome and FireFox). The upcoming beta 5 of CSHTML5 includes a built-in web server to make it easier to test from "localhost" - as well as on mobile devices. It also fixes the "left half of the screen is gray" issue that you may get with the beta 4.

Also note that the "Require.js" library used by ArcGIS has issues with IE10 and earlier, so if you want to use ArcGIS mapping you need to target more recent browsers.

Screenshot:
ArcGIS_CSHTML5_Screenshot3.png
ArcGIS_CSHTML5_Screenshot3.png (189.5 KiB) Viewed 4358 times


Regards,
JS-Support

geoinfonierula
Posts: 6
Joined: Fri Oct 16, 2015 11:49 am

Re: Mapping

Postby geoinfonierula » Fri Oct 16, 2015 12:01 pm

Hi

I have a complex mapping application based on Silverlight5 and ESRI ArcGIS MapControl. I would like to use C#HTML5 to convert the Application to Html5.

The example you gave is very nice, but can you show me any examples how to add more layyers to the map (e.g. imagery) and some mapcontrol functions to the Client?

Thank you very much


Best Regards


Bernd

JS-Support
Site Admin
Posts: 663
Joined: Tue Apr 08, 2014 3:42 pm

Re: Mapping

Postby JS-Support » Fri Oct 23, 2015 11:44 am

Hi Bernd,

Thanks for your message.

We plan to add "Extensibility" feature to CSHTML5 in the coming months, so it will be easier for people to create and share new Extensions (aka "Plugins") for CSHTML5. One such extension could be a more advanced C#/XAML wrapper for the ArcGIS control. We can start an open-source project for this purpose, so that people are able to easily contribute to it. I will keep you updated on the progress.

Regards,
JS-Support

geoinfonierula
Posts: 6
Joined: Fri Oct 16, 2015 11:49 am

Re: Mapping

Postby geoinfonierula » Sun Dec 27, 2015 12:07 pm

Hi

I tried to implement the "TestArcGisCshtml5" sample with beta 6.1 and the latest Version of the ArcGIS JS API (3.15).

Using IIS I can run the Code on IE11, but using Firefox on Win7 or Safari on IOS 9 it gives some exceptions regarding Strict mode, eg: "SyntaxError: in strict mode code, functions may be declared only at top level or immediately within another function"

Can you please help me to fix the Problem

Best regards


Bernd Nierula

JS-Support
Site Admin
Posts: 663
Joined: Tue Apr 08, 2014 3:42 pm

Re: Mapping

Postby JS-Support » Mon Dec 28, 2015 4:11 am

Hi,

You can fix the issue by changing the way functions are declared in your JavaScript code, that is, by turning function declarations into function expressions.

For example, you must replace any function declaration that looks like this:

Code: Select all

function myFunction(a, b) {
    return a * b;
}

into this:

Code: Select all

var myFunction = function (a, b) {
    return a * b
};


Please feel free to let me know if it is not very clear.

Thanks,
Regards,
JS-Support

geoinfonierula
Posts: 6
Joined: Fri Oct 16, 2015 11:49 am

Re: Mapping

Postby geoinfonierula » Sun Jan 03, 2016 5:01 am

Hi

Thanks a lot, ist working now.

Best Regards

Bernd Nierula

geoinfonierula
Posts: 6
Joined: Fri Oct 16, 2015 11:49 am

Re: Mapping

Postby geoinfonierula » Mon Jan 04, 2016 12:04 pm

Hi

Last October I received an answer from you mentioning an "Extensibility" feature and the possibility of a C#/XAML wrapper for the ArcGIS control. I'm very interested in this subject and would like to ask you to provide some more Information on this topic, especially answers to the questions

- is there some sample code available regarding the "Extensibility" Feature?
- is anybody already working on a wrapper of the ArcGIS control or on some other integration of the arcgis control into CSHTML5?

Thank you very much for your Support

Best Regards



Bernd Nierula

JS-Support
Site Admin
Posts: 663
Joined: Tue Apr 08, 2014 3:42 pm

Re: Mapping

Postby JS-Support » Tue Jan 05, 2016 5:06 am

Hi Bernd,

Thanks for the follow up.

We haven't announced the Extensibility feature yet due to issues with C#/JS interop under VS 2015, related to the fact that JSIL did not work properly with dynamic types under VS 2015.

The issue is being resolved and we expect the feature to become available soon.

In the meantime, we are progressively implementing the Extensibility feature. For example, the Beta 6.2 build, which is expected to be released in just a few weeks, will contain the ability for users to reference any DLL compiled with CSHTML5, paving the way for extensions and plugins. Documentation and sample code will also be available in the coming months.

I will keep you updated on this topic as soon as there are any news.

Thanks again.

Regards,
JS-Support


Return to “General Discussion and Other”

Who is online

Users browsing this forum: No registered users and 2 guests