Using drawing tool of ArcGIS

Using drawing tool of ArcGIS - javascript

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.

Related

Convert Latitude Longtitude to an Address in a map

my code:
(i used ArcGIS for the map code https://developers.arcgis.com/javascript/3/jssamples/widget_locate.html )
<!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>OpenStreetMap</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.35/esri/css/esri.css">
<style>
html, body, #esri-map-container {
padding: 0px;
margin: 0px;
height: 100%;
width: 800px;
height: 500px;
}
#LocateButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
</style>
<script src="https://js.arcgis.com/3.35/"></script>
<script>
var map;
require([
"esri/map",
"esri/dijit/LocateButton",
"dojo/domReady!"
], function(Map, LocateButton)
{
map = new Map("map", {
center: [-56.049, 38.485],
zoom: 3,
basemap: "streets"
});
geoLocate = new LocateButton({
map: map
}, "LocateButton");
geoLocate.startup();
geoLocate.on('locate', (data) => {
console.log(data);
});
});
</script>
</head>
<body>
<div id="map" class="map">
<div id="LocateButton"></div>
</body>
</html>
So i get coordinates with:
geoLocate.on('locate', (data) => {
console.log(data);
});
and then i want to convert them into an address.
with the address i want to give them information about the city they live in.
since i want to get an address on my specific country (Israel)
which is not big, the idea is maybe to write a table with longitude and latitude and the main citys
and when some user use his locate button, i will find which from the table is the closest to him, and then return the data i already written in a table or something like this
so my question is:
is there a way to convert my long and latitude to the address with what i have written? or maybe is it better for me to do the second idea with prewritten data.
i don't know how to do those, so i would like to get some directions on where to start or how to look for it.
thanks.

In your second method, you have to use rectangular boundaries of all cities, you can search for it.
but if you want direct from long lat to location.
use google map cloud APIs, visit their website to learn more.

InfoWindowLite not appearing

I am trying to implement an InfoWindowLite Javascript function on my map. However, everything else is working i.e. legend, scalebar, featurelayer.
Below is the code for reference:
<!DOCTYPE html>
<html>
<head>
<!-- add in meta elements -->
<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>Map</title>
<!-- reference styles -->
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
<!-- reference arcGIS javascript -->
<script src="http://js.arcgis.com/3.9/"></script>
<style>
html, body {
height: 97%;
width: 98%;
margin: 1%;
}
#rightPane {
width: 20%;
}
#legendPane {
border: solid #97DCF2 1px;
}
</style>
<!-- javascript -->
<script>
var map;
require([
"esri/map", "esri/dijit/InfoWindowLite",
"esri/InfoTemplate", "esri/layers/FeatureLayer", "esri/dijit/Legend",
"dojo/_base/array", "dojo/parser", "esri/dijit/Scalebar",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/layout/AccordionContainer", "dojo/dom-construct", "dojo/domReady!"
], function(
Map, InfoWindowLite, InfoTemplate, FeatureLayer, Legend,
arrayUtils, parser, Scalebar, domConstruct
) {
parser.parse();
map = new Map("map", {
basemap:"topo",
center: [-98.416, 39.781],
zoom: 6
});
// scalebar
var scalebar = new Scalebar({
map: map,
// "dual" displays both miles and kilmometers
// "english" is the default, which displays miles
// use "metric" for kilometers
scalebarUnit: "dual", attachTo:"bottom-center"
});
// feature layer
var featureLayer = new
FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields:["STATE_NAME", "SUB_REGION", "STATE_ABBR"]
});
map.addLayer(featureLayer);
//add the legend
map.on("layers-add-result", function (evt) {
var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
return {layer:layer.layer, title:layer.layer.name};
});
if (layerInfo.length > 0) {
var legendDijit = new Legend({
map: map,
layerInfos: layerInfo
}, "legendDiv");
legendDijit.startup();
}
});
map.addLayers([featureLayer]);
var legendFeature = new
FeatureLayer("http://www.onemap.sg/ArcGIS/rest/services/TOC/MapServer/6", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields:["*"]
});
// infoWindow
var infoWindow = new InfoWindowLite(null, domConstruct.create("div", null, null,
map.root));
infoWindow.startup();
map.setInfoWindow(infoWindow);
var template = new InfoTemplate();
template.setTitle("<b>State name ${STATE_NAME} - State abbr ${STATE_ABBR}</b>");
template.setContent("${SUB_REGION} is in district ${STATE_NAME}.");
map.infoWindow.resize(200,75);
});
function init() {
dojo.connect(map,"onLoad", function(map) {map.infoWindow.resize(200, 90);} );
dojo.connect(map, "onClick", addPoint);
}
function addPoint(evt) {
map.infoWindow.setTitle("Coordinates");
map.infoWindow.setContent("lat/lon : " + evt.mapPoint.y + ", " + evt.mapPoint.x);
map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin: 0;">
<div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div data-dojo-type="dijit/layout/AccordionContainer">
<div data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:'Legend', selected:true">
<div id="legendDiv"></div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Pane 2'">
This pane could contain tools or additional content
</div>
</div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;">
</div>
</div>
</body>
</html>
I was thinking maybe the sequence in which the codes are placed is the reason why it isn't appearing. But when I move the codes under //infoWindow before the other functions like //legend etc., the other functions will not be displayed when I run it in chrome.

Well, I found some small faults in above snippet code. Below are the details.
you forget to add "BorderContainer, ContentPane, AccordionContainer," before domConstruct.
Below is the working code:
<!DOCTYPE html>
<html>
<head>
<!-- add in meta elements -->
<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>Map</title>
<!-- reference styles -->
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
<!-- reference arcGIS javascript -->
<script src="http://js.arcgis.com/3.9/"></script>
<style>
html, body {
height: 97%;
width: 98%;
margin: 1%;
}
#rightPane {
width: 20%;
}
#legendPane {
border: solid #97DCF2 1px;
}
</style>
<!-- javascript -->
<script>
var map;
require([
"esri/map", "esri/dijit/InfoWindowLite",
"esri/InfoTemplate", "esri/layers/FeatureLayer", "esri/dijit/Legend",
"dojo/_base/array", "dojo/parser", "esri/dijit/Scalebar",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/layout/AccordionContainer", "dojo/dom-construct", "dojo/domReady!"
], function(
Map, InfoWindowLite, InfoTemplate, FeatureLayer, Legend,
arrayUtils, parser, Scalebar, BorderContainer, ContentPane, AccordionContainer, domConstruct
) {
parser.parse();
map = new Map("map", {
basemap:"topo",
center: [-98.416, 39.781],
zoom: 6
});
// scalebar
var scalebar = new Scalebar({
map: map,
// "dual" displays both miles and kilmometers
// "english" is the default, which displays miles
// use "metric" for kilometers
scalebarUnit: "dual", attachTo:"bottom-center"
});
// feature layer
var featureLayer = new
FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields:["STATE_NAME", "SUB_REGION", "STATE_ABBR"]
});
map.addLayer(featureLayer);
//add the legend
map.on("layers-add-result", function (evt) {
var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
return {layer:layer.layer, title:layer.layer.name};
});
if (layerInfo.length > 0) {
var legendDijit = new Legend({
map: map,
layerInfos: layerInfo
}, "legendDiv");
legendDijit.startup();
}
});
map.addLayers([featureLayer]);
var legendFeature = new
FeatureLayer("http://www.onemap.sg/ArcGIS/rest/services/TOC/MapServer/6", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields:["*"]
});
// infoWindow
var infoWindow = new InfoWindowLite(null, domConstruct.create("div", null, null,
map.root));
infoWindow.startup();
map.setInfoWindow(infoWindow);
var template = new InfoTemplate();
template.setTitle("<b>State name ${STATE_NAME} - State abbr ${STATE_ABBR}</b>");
template.setContent("${SUB_REGION} is in district ${STATE_NAME}.");
map.infoWindow.resize(200,75);
});
function init() {
dojo.connect(map,"onLoad", function(map) {map.infoWindow.resize(200, 90);} );
dojo.connect(map, "onClick", addPoint);
}
function addPoint(evt) {
map.infoWindow.setTitle("Coordinates");
map.infoWindow.setContent("lat/lon : " + evt.mapPoint.y + ", " + evt.mapPoint.x);
map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin: 0;">
<div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div data-dojo-type="dijit/layout/AccordionContainer">
<div data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:'Legend', selected:true">
<div id="legendDiv"></div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Pane 2'">
This pane could contain tools or additional content
</div>
</div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;">
</div>
</div>
</body>
</html>
This will show you infopopup whenever you will click on the map.
Hope this will help you :)

jQuery Mobile won't load OpenLayers Map

I'm starting with jQueryMobile and wanted to display a map using OpenLayers. However I'm having a weird issue. Here is the almost working code. Sorry I couldn't make a fiddle, however you can test it easily with copy/paste on notepad or whatever.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<style type="text/css">
html ,body {
margin: 0;
padding: 0;
height: 100%;
}
.ui-content {
padding: 0;
}
#pageone, #pageone .ui-content, #basicMap {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<div id="basicMap"></div>
</div>
</div>
<script>
function init() {
map = new OpenLayers.Map("basicMap", {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.ArgParser(),
new OpenLayers.Control.Attribution()
]
});
var mapnik = new OpenLayers.Layer.OSM();
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var position = new OpenLayers.LonLat(7.55785346031189,50.3625329673905).transform( fromProjection, toProjection);
var zoom = 3;
map.addLayer(mapnik);
map.setCenter(position, zoom );
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
var marker = new OpenLayers.Marker(position);
marker.events.register("click", map , function(e){ alert("click");
});
markers.addMarker(marker);
}
$(document).on("pagecreate","#pageone",init());
</script>
</body>
</html>
This code doesn't show the map.
Now if you take off the following line :
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
You can see that the map is showing.
Any idea on how can I solve this ? because I think it can be solved easily but can't see how.
Thank you.

I knew it was stupid, if it can interest someone , the css should be like :
#pageone, #pageone .ui-content, #basicMap {
width: 100%;
height: 100%;
display : block;
}
And call JS :
$(document).ready(init());
Don't know however why this works.

How can I reference dojo methods in Dart

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');
}]);
}

Button to drop markers on google maps (for a non programmer)

I'm dabbling a bit with google maps and data presentation and was wondering if it is possible to create a button on the map page to drop the markers.
I have no programming experience (I deal with SQL mainly) so any help appreciated - I have the following code taken from varying webistes:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
// Standard google maps function
function initialize() {
var myLatlng = new google.maps.LatLng(52.469397,-3.208008);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
TestMarker();
}
// Function for adding a marker to the page.
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP
});
}
// Testing the addMarker function
function TestMarker() {
Marker1=new google.maps.LatLng(52.268000,-3.043000); addMarker(Marker1);
Marker23=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker23);
Marker24=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker24);
Marker25=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker25);
Marker26=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker26);
Marker584=new google.maps.LatLng(51.747777,-3.500599); addMarker(Marker584);
Marker585=new google.maps.LatLng(51.608871,-3.647570); addMarker(Marker585);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="border: 1px solid black; width: 500px; height: 400px;">map div</div>
<p style="margin-top: 5px">
<button id="drop">Drop</button>
</p>
</body>
</html>
Now this creates a button, but I can't for the life of me work out how to link this back to my markers. I have found something here that I should be able to adapt but I just don't have the knowhow.
My markers are defined by a sql query, but for now I would like to be able to simply feed in a list and get a drop button to drop them when I click on it.
Any help massively appreciated :)

Remove the call to TestMarker from your initialize function. Then just add an onclick attribute to your button:
<button id="drop" onclick="TestMarker()">Drop</button>

We Keep Coding

JavaScript is the programming language of the Web.

Using drawing tool of ArcGIS - javascript

Related

Convert Latitude Longtitude to an Address in a map

InfoWindowLite not appearing

jQuery Mobile won't load OpenLayers Map

How can I reference dojo methods in Dart

Button to drop markers on google maps (for a non programmer)

Categories

Resources