Assign locale for moment.js

To assign locale in moment.js, we can use the following:

     moment.locale("en")

It will returns "en". However, if you assign an unaccepted locale to it, it won't update its value. For example:

     moment.locale("zh")

It still returns "en", since "zh" is not an accepted locale for moment.js.

Up till now, moment.js accepts:

     zh-hk
     zh-tw
     zh-cn

Reference: momentjs

Strange blue border in MapView of ArcGIS JS 4

Starting from ArcGIS JS 4.x, under some special conditions, the MapView will have a blue border when the MapView is focus, who genius get this geneless idea?

To get rid of this stupid box, style the following:

.esri-view-surface--inset-outline::after {   
    outline: none !important;
    padding: 0px !important;
}

So when this stupid design will come out? When ever your HTML got the following conditions, that stupid box will be shown when MapView is on focus:

body {
    margin: 0;
} 

#mapDiv {
    width: 100%
}

... The most weird API ever encountered

Updating graphic in ArcGIS JS 4.x GraphicsLayer

Esri still don't have a clue on how to modify a graphic in GraphicsLayer directly at version 4.8.

You still need to clone the graphic, remove the existing one, and add the new one to realize the modification.

Ref:

https://developers.arcgis.com/javascript/latest/guide/functionality-matrix/index.html#graphicslayer

Stone age API.

Map server URL with query parameters in ArcGIS JS 4.6

Starting from ArcGIS JS 4.6, the map server URL should not have any query parameters. Any query parameters exists in the map server URL will be removed.

To handle this issues, you can override the urlUtils.removeQueryParameters() as below


require(["esri/core/urlUtils"], function(urlUtils) {

   urlUtils.removeQueryParameters = function(a){
      return a;
   };

});

But somehow that's a bad trick. A better way is to use the TileLayer._set() to get rid of the parameters stripping action when setting the URL. i.e.

TileLayer._set('url', 'map_server_url')

Using Proxy with ArcGIS JS

For servers without CORS enabled. We can use proxy mechanism to access the services.

This is done by modifying the proxy.ashx.

You can also add any parameters before sending the request to the actual server.

More references could be found at:

https://developers.arcgis.com/javascript/latest/guide/proxies/index.html

LineDashedMaterial in three.js

To use LineDashedMaterial in three.js:

var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(590058.52, 231354.16, 766.42));
geometry.vertices.push(new THREE.Vector3(589941.68, 231476.67, 736.52));
geometry.vertices.push(new THREE.Vector3(589781.32, 231491.91, 757.73));
geometry.vertices.push(new THREE.Vector3(589711.88, 231445.56, 768.16));
geometry.vertices.push(new THREE.Vector3(589702.04, 231336.49, 772.91));
geometry.computeLineDistances();

let material = new THREE.LineDashedMaterial( {
    color: 0xff0000,
    linewidth: 1,
    scale: 1,
    dashSize: 5,
    gapSize: 3,
} );

let line = new THREE.Line(geometry, material);
scene.add(line);

Note: 

• You need to call geometry.computeLineDistances() to make the dash work
• computeLineDistances( ) only works with Geometry (Not work with BufferGeometry)
• The linewidth has no effect in Windows, it is always equals 1

Leaflet vs ArcGIS JS / FeatureLayer

I'd been deciding ESRI-Leaflet or ArcGIS JS for a small project. Some findings for our references:

When using FeatureLayer for plenty amount of data (e.g. vast amount of points), ArcGIS JS performs better than Leaflet. So even the file size of Leaflet is far smaller than ArcGIS JS, I still have to choose the larger one.

Hope Leaflet FeatureLayer performance can boost up in future.

3D translate an element in HTML

To translate the element, you need:

1. A container having CSS style "perspective: ___px"
2. The actual element having CSS style "transform: rotateX(___deg)"

Sample:

<div style="perspective:500px; margin-left:100px;">
    <div style="transform: rotateX(40deg)">
        <table border=1>
            <tr><td>testing</td><td>testing</td><td>testing</td></tr>
            <tr><td>testing</td><td>testing</td><td>testing</td></tr>
            ...
            <tr><td>testing</td><td>testing</td><td>testing</td></tr>
            <tr><td>testing</td><td>testing</td><td>testing</td></tr>
    </table>                
    </div>
</div>

testing	testing	testing	testing	testing
testing	testing	testing	testing	testing
testing	testing	testing	testing	testing
testing	testing	testing	testing	testing
testing	testing	testing	testing	testing
testing	testing	testing	testing	testing
testing	testing	testing	testing	testing
testing	testing	testing	testing	testing
testing	testing	testing	testing	testing
testing	testing	testing	testing	testing

JavaScript frameworks that we should get touch with

More and more JavaScript framework to work with:

• React.js
• Ember.js
• Knockout.js
• Backbone.js
• Meteor
• Mithril
• Ember
• Vue.js
• Breeze.js
• Ractive

Reference: http://www.breck-mckye.com/blog/2014/12/the-state-of-javascript-in-2015/

Trigger breakpoint in Javascript

To trigger breakpoint in Javascript, you can add a 'debugger' in your code. For example:

function testing() {
    alert(123);
    debugger;
    alert(456);
}

The debugger will be triggered at runtime.

Dojo: Problem of having TabContainer inside ContentPane in IE8

In Dojo, the popular JavaScript library, we have ContentPane which allows us to put different widget into it, such as TabContainer, DataGrid, etc. They works fine in most browsers, but in IE 8, that could be a bit tricky.

Suppose we have the following code fragment:

<div id="testContentPane" 
     data-dojo-type="dijit/layout/ContentPane"" 
     style="height: 200px; overflow: auto; border: 5px blue solid;">

    testing 1 <br> testing 2 <br> testing 3 <br> 
    testing 4 <br> testing 5 <br> testing 6 <br><br>
    
    <div id="testTabContainer" 
         data-dojo-type="dijit/layout/TabContainer"
         style="width:80%; height:200px;" 
         disabled='disabled'>
         
        <div id="tabControl" 
             data-dojo-type="dijit/layout/ContentPane" 
             title="Tab" closable="false">
            Testing tab
        </div>
        
    </div>

</div>

The above code fragment is suppose to create a ContentPane and put a TabContainer into it:

Everything goes fine with IE 10, IE 9, Chrome, Firefox, but in IE 8, we have:

Look! The TabContainer just floating on top of the ContentPane. How to solve this issue?

Put CSS position: relative in the ContentPane and the issue will be fixed.

Why? Because in IE 8, the TabContainer is position:absolute. If ContentPane position CSS is not assigned, the TabContainer will leave out of it. By assigning position:relative to ContentPane, the position of TabContainer will be limited inside the ContentPane. Like this:

Using Google Map API to access Google Earth Enterprise

Nice references for showing Google Earth Enterprise maps using the Map API:

• gee-samples
• Main page for GEE

The major thing is that we will use GFusionMap object instead of google.maps.Map object in the JavasScript. So that we can specify the GEE server definitions when we create the map object.

Remove the "Zoom to" link in Callout of ArcGIS Javascript API

We can add the following style to hide the "Zoom to" link:

      .action.zoomTo {
      display: none;
      }

Ref:
http://forums.arcgis.com/threads/89318-Remove-quot-Zoom-to-quot-link

ESRI ArcGIS JS API version 3.4 hiding the Dojo Dnd style "dojoDndAvatar"

For ArcGIS JS API v3.4, if you include "esri.css" in your project, then your Dojo Dnd Avatar (the floating hints while you're doing drag and drop) will be disappeared.

Why? Because in "esri.css", esri.css got the following style:

     .dojoDndAvatar {display: none;}

God... What the hell ESRI guys are doing ?!

Quick notes on Dojo 1.8

Just a quick notes on dojo 1.8. For example, if I want to use the Color object in dojo. I will:

   var Color;

   require(["dojo/_base/Color"], function(c) {
      Color = c;
   });

Then I can use the variable Color after the initialization is done. Am I correct? Should it be used in another way? :-)

DOJO: Tab ordering in TabContainer

The tabContainer.getChildren( ) method returns a list of tab widget (ContentPane) in the container using the following way:

    dijit.findWidgets(tabContainer.containerNode)

However, if you did some drag and drop actions on the tab button list to rearrange the tab ordering, the tab sequence did not changed actually. To get a modified / correct ordered list, you may try to override the getChildren( ) method:

    myTabContainer.getChildren = function() {
        var list = this.tablist.getChildren();
        var rsltList = [];
        for (var idx=0; idx<list.length; idx++) {
           rsltList.push(list[idx].tab);
        }
        return rsltList;
    }

Noticed the underlined "tab" member variable in the code, you need to manually assign it when your tab page is created. Or you may find a way / method to get the Tab page object (ContentPane) via the Tab Button.

If you got any better method, please let me know :-)

Drag and Drop of Tab in Dojo

Check the following example for a hint to do drag and drop of tab page in Dojo:

Overriding window.open( ) in Javascript

Sometimes you may want override the window.open( ) in Javascript. It's strange, but you really it occasionally. Here is how we can do it:

var open_ = window.open;

window.open = function(url, name, opts) {

   return open_(url, name, opts);

}

Then you can add your own checking / modifications right before the window is opened.

ArcGIS JS: Move a graphic to top

To move a graphic in a ArcGIS JS GraphicsLayer to top:

g.getDojoShape().moveToFront();

But this may breaks the onClick event of the GraphicsLayer, beware.

Updated: in ArcGIS JS API version 3.8, use getShape( ) instead. ESRI... no more stupid naming please...

YUI LayoutUnit collapse

One can use layout.getUnitByPosition('left').collapse() and layout.getUnitByPosition('left').expand() to the layout units (except 'center' layout unit) in YUI's Layout.

Once the layout unit is collapsed, the size is determined by the attribute 'collapseSize'.

Anyway, YUI is something historical now.