How can I reference dojo methods in Dart - javascript

How can I reference dojo methods in Dart? I am specificaly trying to use ESRI's Javascript API, which is built on top of dojo within dart by referencing Google's article on on javascript/Dart interoperability
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Home Extent</title>
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<style>
html, body, #map {
padding:0;
margin:0;
height:100%;
}
#HomeButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
</style>
<script src="//js.arcgis.com/3.8/"></script>
<script>
require([
"esri/map",
"esri/dijit/HomeButton",
"dojo/domReady!"
], function(
Map, HomeButton
) {
var map = new Map("map", {
center: [-56.049, 38.485],
zoom: 3,
basemap: "streets"
});
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
});
</script>
</head>
<body>
<div id="map" class="map">
<div id="HomeButton"></div>
</div>
</body>
</html>
I think I have a good grasp on how to call methods and convert objects but I can't figure out how to call dojo methods (specifically the Dojo 1.7+ method), in this case "requires".

With dart:js the following should work :
import 'dart:js' as js;
main() {
js.context.callMethod('require', [new js.JsArray.from(["esri/map",
"esri/dijit/HomeButton", "dojo/domReady!"]), (Map, HomeButton) {
var map = new js.JsObject(Map, ["map", new js.JsObject.jsify({
'center': [-56.049, 38.485],
'zoom': 3,
'basemap': "streets"
})]);
var home = new js.JsObject(HomeButton, [new js.JsObject.jsify({
map: map
}), "HomeButton"]);
home.callMethod('startup');
}]);
}

Related

Markers issue when uploading KML file my website using API key

everyone, I have uploaded my google map KML file to my website then I have used google map javascript API key. if you notice once you run the map you will see all my markers in white( transparent ) is there a way to have my map exactly the same way like I had it before saving. the code below, Thank you in advance:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>KML Layers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(35.5715, -97.66704),
});
var ctaLayer = new google.maps.KmlLayer({
url: 'https://rogerslimos.com/KML.kml',
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>

Using drawing tool of ArcGIS

I am discovering Drawing tool of ArcGIS. The code of a widget looks as follows:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Maps Toolbar</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<style>
html, body, #mainWindow {
font-family: sans-serif;
height: 100%;
width: 100%;
}
html, body {
margin: 0;
padding: 0;
}
#header {
height: 80px;
overflow: auto;
padding: 0.5em;
}
</style>
<script src="https://js.arcgis.com/3.20/"></script>
<script>
var map, toolbar, symbol, geomTask;
require([
"esri/map",
"esri/toolbars/draw",
"esri/graphic",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"dojo/parser", "dijit/registry",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"
], function(
Map, Draw, Graphic,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
parser, registry
) {
parser.parse();
map = new Map("map", {
basemap: "streets",
center: [-15.469, 36.428],
zoom: 3
});
map.on("load", createToolbar);
// loop through all dijits, connect onClick event
// listeners for buttons to activate drawing tools
registry.forEach(function(d) {
// d is a reference to a dijit
// could be a layout container or a button
if ( d.declaredClass === "dijit.form.Button" ) {
d.on("click", activateTool);
}
});
function activateTool() {
var tool = this.label.toUpperCase().replace(/ /g, "_");
toolbar.activate(Draw[tool]);
map.hideZoomSlider();
}
function createToolbar(themap) {
toolbar = new Draw(map);
toolbar.on("draw-end", addToMap);
}
function addToMap(evt) {
var symbol;
toolbar.deactivate();
map.showZoomSlider();
switch (evt.geometry.type) {
case "point":
case "multipoint":
symbol = new SimpleMarkerSymbol();
break;
case "polyline":
symbol = new SimpleLineSymbol();
break;
default:
symbol = new SimpleFillSymbol();
break;
}
var graphic = new Graphic(evt.geometry, symbol);
map.graphics.add(graphic);
}
});
</script>
</head>
<body class="nihilo">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<span>Draw:<br /></span>
<button data-dojo-type="dijit/form/Button">Point</button>
<button data-dojo-type="dijit/form/Button">Multi Point</button>
<button data-dojo-type="dijit/form/Button">Line</button>
<button data-dojo-type="dijit/form/Button">Polyline</button>
<button data-dojo-type="dijit/form/Button">Polygon</button>
<button data-dojo-type="dijit/form/Button">Freehand Polyline</button>
<button data-dojo-type="dijit/form/Button">Freehand Polygon</button>
<button data-dojo-type="dijit/form/Button">Arrow</button>
<button data-dojo-type="dijit/form/Button">Triangle</button>
<button data-dojo-type="dijit/form/Button">Circle</button>
<button data-dojo-type="dijit/form/Button">Ellipse</button>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>
I am very new to ArcGIS, therefore my question might be simple. I wonder if it's possible to substitute the background map by some other image, for example, the layer that represents a floor in a building? I have this image available in JPEG format and it has global coordinates assigned to it. So, how can I substitute a map by this image? Should I update these lines of code?
map = new Map("map", {
basemap: "streets",
center: [-15.469, 36.428],
zoom: 3
});
Well, those background images are known as basemap in Gis term.
ARCGIS js api provides multiple basemaps like topo, street, imagery etc.
To change the background/basemap you need to change the basemap keyword.
Example-
Change "streets" to "topo". It will change the basemap/background.
Note- you can try various types of basemaps which is available on arcgis api.
EDITED[30/May/2017]-
Here I am proposing you to use existing basemap provided by ESRI, However if you want to show your own images as backgroud/basemap then you need to publish/republish a basemap.
Hoping this will help you.

How to rotate a MapImage with ArcGIS Javascript API

I created a map and added a MapImage trough a MapImageLayer. Now I want to rotate the image by a certain angle on the map. How is this possible?
Or is there an other way to add a rotated image to a map?
var map;
require(["esri/geometry/Extent", "esri/geometry/geometryEngine", "esri/layers/MapImageLayer", "esri/layers/MapImage",
"esri/map", "dojo/domReady!"
], function(Extent, geometryEngine, MapImageLayer, MapImage, Map) {
map = new Map("map", {
basemap: "topo",
center: [-80.93, 31.47],
zoom: 4
});
var mil = new MapImageLayer({
'id': 'image_layer'
});
var mi = new MapImage({
'extent': {
'xmin': -8864908,
'ymin': 3085443,
'xmax': -8062763,
'ymax': 3976997,
'spatialReference': {
'wkid': 3857
}
},
'href': 'https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png'
});
mil.addImage(mi);
map.addLayer(mil);
});
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Simple Image Service</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css" />
<script src="https://js.arcgis.com/3.16/"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Well, Using Css we can try to rotate the image.
However esri esri/layers/MapImageLayer expect className property where you can pass your expected css properties.
This CSS properties applies on the whole layer not only at one image.
Below running code will explain how to achieve this:
var map;
require(["esri/geometry/Extent", "esri/geometry/geometryEngine", "esri/layers/MapImageLayer", "esri/layers/MapImage",
"esri/map", "dojo/domReady!"
], function(Extent, geometryEngine, MapImageLayer, MapImage, Map) {
map = new Map("map", {
basemap: "topo",
center: [-80, 25],
zoom: 4
});
var mil = new MapImageLayer({
'id': 'image_layer',
'className':'rotateClass'
});
var mi = new MapImage({
'extent': {
'xmin': -8864908,
'ymin': 3085443,
'xmax': -8062763,
'ymax': 3976997,
'spatialReference': {
'wkid': 3857
}
},
'href': 'https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png'
});
mil.addImage(mi);
map.addLayer(mil);
});
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.rotateClass {
-ms-transform: rotate(15deg) !important; /* IE 9 */
-webkit-transform: rotate(15deg) !important; /* Chrome, Safari, Opera */
transform: rotate(15deg) !important;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Simple Image Service</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css" />
<script src="https://js.arcgis.com/3.16/"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Hope this will help you :)

Fusion Tables API and google Maps Advanced Visualization [duplicate]

I prepared a simple page by using the data of a fusion table. ( FusionTablesLayer with Google Maps JavaScript API v3 ) but the map is not displayed. You can see the page here: http://www.siterary.com/0test.html . What's the problem ? The code is as below
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>test</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBK_ErFIm-CYBsslK_9ZB6m0wPV197UaJg&sensor=false"></script>
<script>
function initialize() {
var istanbul = new google.maps.LatLng(41.01, 28.97);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: istanbul,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Location' ,
from: '1s3DYRvmNAfKgo-swjG39-8UEb9tHMm0UPHvW_tc'
}
});
layer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<B>MAP</B> <BR>
<div id="map_canvas"></div>
</body>
</html>
The file "/maps/documentation/javascript/examples/default.css" doesn't exist on your site. Your map doesn't have a valid size.
Working version
code snippet:
function initialize() {
var istanbul = new google.maps.LatLng(41.01, 28.97);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: istanbul,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Location',
from: '1s3DYRvmNAfKgo-swjG39-8UEb9tHMm0UPHvW_tc'
}
});
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
}
#media print {
html,
body {
height: auto;
}
#map_canvas {
height: 650px;
}
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<B>MAP</B>
<BR>
<div id="map_canvas"></div>

Google Maps API v3 Street View "google is not defined"

I am just getting started with the Maps API and I was trying to copy the following example.
https://code.google.com/apis/maps/documentation/javascript/examples/streetview-simple.html
When I copy the source I get the following error in the script.
google is not defined
Line 11
var fenway = new google.maps.LatLng(42.345573,-71.098326);
This is the html file I am using.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Street View Layer</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="//maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
map.setStreetView(panorama);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 400px; height: 300px"></div>
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
</body>
</html>
The google example loads perfectly but my code does not.
I have seen a few people getting this error but none of the fixes listed seem to work for me. Have I just made a basic error while copying the script?
There is the protocol missing in the path.
//maps.googleapis.com/maps/api/js?sensor=false
should be
http://maps.googleapis.com/maps/api/js?sensor=false
(it's missing in many of the examples)

Categories