Source: widgets/SpwReaderJson.js

/**
 * @class spw.widgets.SpwReaderJson
 */
define(["dojo/_base/declare","spw/api/SpwBaseWidget", "dojo/_base/lang", "esri/request", "dojo/on",
        "dojo/dom-construct", "dojo/query", "spw/api/ProjectionManager", "esri/graphic", "esri/geometry/Point",
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "dojo/_base/Color", 
        "dojo/_base/array", "esri/InfoTemplate", "dgrid/Grid", "dgrid/util/mouse", "dgrid/Selection",
        "dojo/_base/config"], 
		function(declare, SpwBaseWidget, lang, request, on, domConstruct, query, ProjectionManager,
				Graphic, Point, SimpleMarkerSymbol, SimpleLineSymbol, Color, array, InfoTemplate, 
				Grid, mouseUtil, Selection, dojoConfig){
	
	var JsonDisplayer = null;
	
	JsonDisplayer = declare("spw.widgets.SpwReaderJson", [SpwBaseWidget], /** @lends spw.widgets.SpwReaderJson.prototype */{
		
		url:"https://api.jcdecaux.com/vls/v1/stations",
		parameters:{ apiKey: "ebe028bce32ea4b4c59994268c84e07b299ad372", contract: "Namur" },
		srId:4326,
		xCoordPath: "position.lng",
		yCoordPath:"position.lat",
		templateTitle: "Station Li Bia Velo : ${name}",
		template: "<table><tr><td>Adresse</td><td>${address}</td></tr><tr><td>Statut</td><td>${status}</td></tr><tr><td>Total vélos</td><td>${bike_stands}</td></tr><tr><td>Total vélos</td><td>${bike_stands}</td></tr><tr><td>Vélos disponibles</td><td>${available_bike_stands}</td></tr><tr><td>Date de mise à jour</td><td>${last_update}</td></tr></table>",
		autoRefreshInterval: 10000,
		//symbol:
		
		_elements: null,
		_graphics: null,
		
		_simpleSymbol: new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 15, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([92,2,11]), 1), new Color([191,0,19,1])),
		_highlightSymbol: new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 15, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color("darkgreen"), 1), new Color("green")),
		
        /**
         * @constructs
         * @param config
         */
		constructor: function() {
			this._elements = [];
			this._graphics = [];
		},
		
		
		postCreate: function(){
			this.inherited(arguments);
			
			var btn = domConstruct.create("button", { innerHTML:"Afficher" }, this.domNode);			
			on(btn, "click", lang.hitch(this, this.displayJson));
		},
		
		onActivate: function(){
			this.inherited(arguments);
			
			if(dojoConfig.jsonDisplayerConfiguration){
				lang.mixin(this, dojoConfig.jsonDisplayerConfiguration);
			} else if(window.jsonDisplayerConfiguration){
				lang.mixin(this, window.jsonDisplayerConfiguration);
			}
			
			this.displayJson();
		},
		
		removeJson: function(){
			array.forEach(this._graphics, lang.hitch(this, function(g){
				this.spwViewer.get('spwMap').removeFeature(g);
			}));
			this._elements = [];
		},
		
		displayJson: function(){
			this.removeJson();

			request({
				url:this.url,
				content: this.parameters,
				handleAs: "json"
			}).then(
			    lang.hitch(this, function(response) {
			    	console.log(response);
			    	
			    	array.forEach(response, lang.hitch(this, this.processJsonElement));
			    	this.spwViewer.get('spwMap').zoomToFeatures(array.map(this._elements, function(e){return e.graphic;}));
			    }), 
			    lang.hitch(this, function(error) {
			        console.log("Error: ", error);
			    })
			);
			
			if(this.autoRefreshInterval){
				setTimeout(lang.hitch(this, this.displayJson), this.autoRefreshInterval);
			}
		},
		
		processJsonElement: function(elem){
			var x = this.getJsonValueFromPath(elem, this.xCoordPath);
			var y = this.getJsonValueFromPath(elem, this.yCoordPath);
			
			if(this.srId != this.spwViewer.get('spatialReference').wkid){
				var res = ProjectionManager.getInstance().transform(this.srId, this.spwViewer.spatialReference, x, y);
				x = res.x;
				y = res.y;
			}
			
			var g = new Graphic(new Point(x, y, this.spwViewer.get('spatialReference')), this._simpleSymbol, elem,new InfoTemplate(this.templateTitle, this.template));
			this.spwViewer.get('spwMap').showFeature(g);
			this._graphics.push(g);
			
			elem.graphic = g;
			this._elements.push(elem);
		},
		
		getJsonValueFromPath: function(elem, path){
    		var keys = path.split(".");
    		var val = elem;
    		array.forEach(keys, function(key){
    			val = val[key];
    		});
    		return val;
		}
	});

	return JsonDisplayer;
});