WikiTude Augmented reality JavaScript SDK has an array of markers named markerList. I want to know what is the structure of the array (It is no in the documentation). For example, I want to know how to access the enabled property of a geoObject in markerlist.
Example, can it be like,
World.markerList[i].enabled=false
What the the structure and sub-structures of the markerlist array?
Can I do like the following. Please help. I am really stuck here. I don't want to reload and recreate POIS every time I change my custom slider. I want the GeoOjects to activate and deactivate, so that it would prevent flickering.
marker.js
// Labels and properties described here.
this.markerObject = new AR.GeoObject(markerLocation, {
drawables: {
cam: [this.markerDrawable_idle,this.markerDrawable_selected,this.titleLabel,this.distanceUpdate,this.descriptionLabel],
enabled : true,
indicator: this.directionIndicatorDrawable,
radar: this.radardrawables
}
});
this.markerObject.changeVisibilitysetter= function(markerObject) {
this.markerObject.enabled = false;
}
and call the function from fromwebservice like
World.changeVisibilitysetter(marerList[i].markerObject);
The elements in the array are of type 'Marker'. Such a Marker does not have a enabled property. You need to extend the class with such a setter and in the implementation, access the underlying AR.GeoObject and change it's enabled property.
I'm trying to get a WebMap object (as JSON) from a JavaScript Map object in the ArcGIS JavaScript API. Is there any way to do this within the API, without using ArcGIS.com? Ideally something like:
webMapAsJSON = map.toWebMap();
From the "Export Web Map Task" documentation in the REST API, there's this line that suggests it should exist:
"The ArcGIS web APIs (for JavaScript, Flex, Silverlight, etc.) allow developers to easily get this JSON string from the map."
However, I don't see anything in the Map object or elsewhere in the API that would do this.
You can't. At least not officially. The steps outlined below are not recommended. They use part of the ArcGIS JS library that is not part of the public API and therefore this behavior may not work in the next version of the API or they may back-patch a previous version of the API and this could stop working even on something that previously did work.
That said, sometimes you need some "future" functionality right now and this is actually a pretty straightforward way of getting what you want using the common proxy pattern
Use the undocumented "private" function _getPrintDefinition
var proxy_getPrintDefinition = printTask._getPrintDefinition;
printTask._getPrintDefinition = function() {
var getPrintDefResult = proxy_getPrintDefinition.apply(this, arguments);
//Now you can do what you want with getPrintDefResults
//which should contain the Web_Map_as_JSON
console.log(Json.stringify(getPrintDefResult));
//make sure you return the result or you'll break this print task.
return getPrintDefResult;
}
_getPrintDefinition takes the map as the first argument and a PrintParameters object as the second.
so you'll have to create a PrintTask, redefine the _getPrintDefinition function on the newly created print task as outlined above, create a PrintParameters and then run:
myPrintTask._getPrintDefinition(myMap,myPrintParameters);
The results of this on my little test are:
{"mapOptions":{"showAttribution":false,"extent":{"xmin":-7967955.990468411,"ymin":5162705.099750506,"xmax":-7931266.216891576,"ymax":5184470.54355468,
"spatialReference":{"wkid":102100,"latestWkid":3857}},"spatialReference":{"wkid":102100,"latestWkid":3857}},
"operationalLayers":[
{"id":"layer0","title":"layer0","opacity":1,"minScale":591657527.591555,"maxScale":70.5310735,"url":"http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"},
{"id":"XXX-Redacted-XXX","title":"serviceTitle","opacity":1,"minScale":0,"maxScale":0,"token":"XXX-Redacted-XXX","url":"http://XXX-Redacted-XXX/arcgis/rest/services/TestService/MapServer"},
{"id":"XXX-Redacted-XXX","opacity":1,"minScale":0,"maxScale":0,"featureCollection":{"layers":[]}},
{"id":"featureGraphics","opacity":1,"minScale":0,"maxScale":0,"featureCollection":{"layers":[]}},
{"id":"map_graphics","opacity":1,"minScale":0,"maxScale":0,"featureCollection":{"layers":[]}}
]}
if you don't need to do any operations on the web map json and just need the output then you don't even need to use the proxy pattern.
#Suttikeat Witchayakul's answer above should work if your goal is to print the map using a print service.
However, if you are trying to export the map to the web map JSON spec so that you can save it to ArcGIS Online/Portal, or re-instantiate a map object from it later, you may have some problems. This is because the web map specification is not the same as the export web map specification, which what the print task generates and sends to printing services.
Unfortunately, the ArcGIS API for JavaScript does not provide any methods to export a map object to web map JSON. This is supposed to be coming in version 4... at some point. Until then, you can use the all but abandoned cereal library. However, if your map uses layer types that are not fully supported by cereal, it may not work for you as is and you would have to extend it.
If you want to use "esri/tasks/PrintTask" to export your map, you must use "esri/tasks/PrintParameters" for execute the printTask. Just set your map object directly to printParameter.
require([
"esri/map", "esri/tasks/PrintTemplate", "esri/tasks/PrintParameters", ...
], function(Map, PrintTemplate, PrintParameters, ... ) {
var map = new Map( ... );
var template = new PrintTemplate();
template.exportOptions = {
width: 500,
height: 400,
dpi: 96
};
template.format = "PDF";
template.layout = "MAP_ONLY";
template.preserveScale = false;
var params = new PrintParameters();
params.map = map;
params.template = template;
printTask.execute(params, printResult);
});
I've some js files organized this way (see source):
gmaps4rails.base.js : contains all the logic
gmaps4rails.googlemaps.js : contains functions
gmaps4rails.bing.js : contains functions with the same name as the previous file
So basically, base calls createMarkers() which is in both googlemaps and bing.
From now, I load only one among gmaps4rails.googlemaps.js and gmaps4rails.googlemaps.js, depending on the map API I need, so it works fine.
Now I'd like to be able to have all files loaded (and keep them separate) BUT of course only include the code of the desired maps API.
Basically I think about something like:
if desiredApi == "googlemaps"
include GoogleMapsNameSpace content in BaseNameSpace
Thanks in advance.
If I understand correctly you just want to be able to use either the google maps API or the bing API or someother based on the user selection (or some other criteria)? For that, instead of trying to merge the correct API into your base object, why don't you just refer a 'mapService' from your base object and select the mapService based on the criteria you want?
Something like this:
Map = function(service, canvasId) {
var mapService = MapServices[service];
return {
initialize: function() {
var theMap = mapService.createMap();
mapService.render(canvasId);
}
// more functionality for your base object (that the outside world calls) goes here
}
}
var MapServices = MapServices || {};
MapServices.google = {
createMap: function() {},
render: function(canvas) {
$("#"+canvas).html("I'm a google map");
},
createMarker: function(args) {}
// all your map functionality goes here calling google specific functions
};
// this could be in a different js
MapServices.bing = {
createMap: function() {},
render: function(canvas) {
$("#"+canvas).html("I'm a bing map");
},
createMarker: function(args) {},
// all your map functionality goes here calling bing specific functions
}
$(function() {
var theMap = new Map("google", "theDiv");
theMap.initialize();
});
Is this what you want to do?
Hope this helps
I think you are looking for some kind of asynchronous loader. CommonJS has proposed Modules 1.1 and the Asynchronous Module Definition (AMD) API that do this. There are quite a few implementations of async loaders, as listed in this Google spreadsheet. Of which, a few of them are AMD-compliant, for example:
curl.js http://github.com/unscriptable/curl
RequireJS http://requirejs.org/
bdLoad http://bdframework.org/bdLoad
This blog entry has a nice discussion on this topic.
Also see this SO post: Namespace a dynamically loaded javascript file's contents
I have a Silverlight application that generates a lot of Google Maps objects on the Silverlight site. For example a Map is created like this:
var map = HtmlPage.Window.CreateInstance(#"google.maps.Map", container, mapOptions);
var center = (ScriptObject)_map.Invoke("getCenter");
Everything works fine. But now I need to access the map object from Javascript directly. I think it could be done by exposing a map property as ScriptableMember and use it from Javascript. But that"s a bit odd because the map object lives already in the browser. But how do I access it?
Update
Just to make clearer what I'm talking about
Let's say I have created my map as shown above. Now I have a loaded Javasript file with this function:
function ReadMapCenter()
{
//Need the map object in Javascript
map.getCenter();
}
How can I access the existing map Object from Javascript?
If you just expose it as type ScriptObject I think the bridge will simply unpack the scripted object rather than create yet another layer of wrapping for it.
Alternative
Don't use CreateInstance
In your javascript at the global leve use:-
var map;
function createMap(container, mapOptions)
{
if (!map)
{
map = new google.maps.Map(container, mapOptions);
}
return map;
}
now your javascript has a map global it can use.
In silverlight use:-
var map = HtmlPage.Window.Invoke("createMap", container, mapOptions);
I'm using the codeigniter library for the google maps api. I load the map using the library located on the CI Wiki: http://www.phpinsider.com/php/code/GoogleMapAPI/
I want to then use javascript on the map object after loading the page. How can I get the map object in javascript? Can I use GMap2 on the same div? Won't that recreate the map?
The reason I want to do this is to bind an event to the map.
Thanks!
Hope this works:
var myMap;
function getMap()
{
if(myMap == null)
myMap = new GMap2(document.getElementById("map"));
return myMap;
}
and then refer to this function to get reference to the GMap2 object.