Hello,
I am trying to add widgets (popup, search, basemaptoggle,etc) to my Map, but none of them are working.
Any help from anybody appreciated.
If I add any widget then the map does not show and I get a blank page.
Below is the sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Get started with MapView - Create a 2D map</title>
<style>
html, body,#mapDiv {
padding: 50px;
height: 500px;
width: 80%;
position: absolute;
}
</style>
<!-- <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css"/> -->
<!-- <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css"/> -->
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/geometry/Point",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/widgets/BasemapToggle"
"dojo/domReady!"
], function( Map,MapView,
Graphic, Point,PictureMarkerSymbol,
SimpleMarkerSymbol, SimpleLineSymbol,BasemapToggle){
var map = new Map({
basemap: "topo",
});
var view = new MapView({
container: "mapDiv", // Reference to the scene div created in step 5
map: map, // Reference to the map object created before the scene
zoom:17, // Sets the zoom level based on level of detail (LOD)
//center: [90, 22] // Sets the center point of view in lon/lat
});
// 1 - Create the widget
var toggle = new BasemapToggle({
// 2 - Set properties
view: view, // view that provides access to the map's 'topo' basemap
nextBasemap: "hybrid" // allows for toggling to the 'hybrid' basemap
});
// Add widget to the top right corner of the view
view.ui.add(toggle, "top-right");
});
var pt = new Point({
latitude:53.350140,
longitude:-6.266155
});
//go to the given point
view.center=pt;
// Create a symbol for drawing the point
<!-- var markerSymbol1 = new SimpleMarkerSymbol({ -->
<!-- color: [226, 119, 40], -->
<!-- outline: { // autocasts as new SimpleLineSymbol() -->
<!-- color: [100, 100, 100], -->
<!-- width: 1 -->
<!-- } -->
<!-- }); -->
var markerSymbol = new PictureMarkerSymbol({
url: "http://static.arcgis.com/images/Symbols/Basic/RedStickpin.png",
width: 30,
height: 50
});
// Create a graphic and add the geometry and symbol to it
var pointGraphic = new Graphic({
geometry: pt,
symbol: markerSymbol
});
// Add the graphics to the view's graphics layer
view.graphics.addMany([pointGraphic]);
});
</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>
Solved! Go to Solution.
Rajnayan,
You had some simple errors in your code:BasemapToggle require, then everything after line 55 was outside your require code block because of your misplaced });
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Get started with MapView - Create a 2D map</title>
<style>
html,
body,
#mapDiv {
margin: 50px;
height: 500px;
width: 80%;
position: absolute;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/geometry/Point",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/widgets/BasemapToggle",
"dojo/domReady!"
], function(Map, MapView,
Graphic, Point, PictureMarkerSymbol,
SimpleMarkerSymbol, SimpleLineSymbol, BasemapToggle) {
var map = new Map({
basemap: "topo",
});
var view = new MapView({
container: "mapDiv", // Reference to the scene div created in step 5
map: map, // Reference to the map object created before the scene
zoom: 17, // Sets the zoom level based on level of detail (LOD)
//center: [90, 22] // Sets the center point of view in lon/lat
});
// 1 - Create the widget
var toggle = new BasemapToggle({
// 2 - Set properties
view: view, // view that provides access to the map's 'topo' basemap
nextBasemap: "hybrid" // allows for toggling to the 'hybrid' basemap
});
// Add widget to the top right corner of the view
view.ui.add(toggle, "top-right");
var pt = new Point({
latitude: 53.350140,
longitude: -6.266155
});
//go to the given point
view.center = pt;
var markerSymbol = new PictureMarkerSymbol({
url: "http://static.arcgis.com/images/Symbols/Basic/RedStickpin.png",
width: 20,
height: 20
});
// Create a graphic and add the geometry and symbol to it
var pointGraphic = new Graphic({
geometry: pt,
symbol: markerSymbol
});
// Add the graphics to the view's graphics layer
view.graphics.addMany([pointGraphic]);
});
</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>
Rajnayan,
You had some simple errors in your code:BasemapToggle require, then everything after line 55 was outside your require code block because of your misplaced });
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Get started with MapView - Create a 2D map</title>
<style>
html,
body,
#mapDiv {
margin: 50px;
height: 500px;
width: 80%;
position: absolute;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/geometry/Point",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/widgets/BasemapToggle",
"dojo/domReady!"
], function(Map, MapView,
Graphic, Point, PictureMarkerSymbol,
SimpleMarkerSymbol, SimpleLineSymbol, BasemapToggle) {
var map = new Map({
basemap: "topo",
});
var view = new MapView({
container: "mapDiv", // Reference to the scene div created in step 5
map: map, // Reference to the map object created before the scene
zoom: 17, // Sets the zoom level based on level of detail (LOD)
//center: [90, 22] // Sets the center point of view in lon/lat
});
// 1 - Create the widget
var toggle = new BasemapToggle({
// 2 - Set properties
view: view, // view that provides access to the map's 'topo' basemap
nextBasemap: "hybrid" // allows for toggling to the 'hybrid' basemap
});
// Add widget to the top right corner of the view
view.ui.add(toggle, "top-right");
var pt = new Point({
latitude: 53.350140,
longitude: -6.266155
});
//go to the given point
view.center = pt;
var markerSymbol = new PictureMarkerSymbol({
url: "http://static.arcgis.com/images/Symbols/Basic/RedStickpin.png",
width: 20,
height: 20
});
// Create a graphic and add the geometry and symbol to it
var pointGraphic = new Graphic({
geometry: pt,
symbol: markerSymbol
});
// Add the graphics to the view's graphics layer
view.graphics.addMany([pointGraphic]);
});
</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>
Robert,
Thank you for correcting my silly mistake. You are a savior.
I have one more query if you don't mind to answer.
Can't we write the "require" and "function" block separately? Like below:
require(["esri/Map","esri/views/MapView",...]);
function(Map,Mapview,....)
{.....}
If I try to do above then it doesn't work.
My aim is to pass the Lat/long value dynamically from another source.
Something like this:
var pt=new Point(x,y)
{
longitude=x;
latitude=y;
};
Is this possible?
Warm Regards
Rajnayan,
I think what you are looking for is a global var that you can set outside the require block.
<script>
var lat, lon;
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/geometry/Point",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/widgets/BasemapToggle",
"dojo/domReady!"
], function(Map, MapView,
Graphic, Point, PictureMarkerSymbol,
SimpleMarkerSymbol, SimpleLineSymbol, BasemapToggle) {
....
var pt = new Point({
latitude: lat,
longitude: lon
});
....
Hello,
Its done. Thank you
Can you let me know if there is some method to automatically bring back to initial point on Map if user pans/zooms away from initial point?
Regards
You can disable navigation. Is that what you are after?
Hi,
No. But if the user goes on Panning and zooming and then he wants to come back to original view then is there any functionality/button by which user can come back to initial view/point of map.
Also I am messed up with the API, I have downloaded the ArcGis API for Javascript 4.3 version, but I dont know how to use it. To brief, as of now I am directly using the code in Javascript and using the functions including the module, but how do I configure the API with my Application directly?
Can you please help?
Rajnayan,
but how do I configure the API with my Application directly
Are you asking how to host the API directly instead of using the esri CDN?
As far as a button to return to the original extent you can configure and use the Home widget:
Hello,
Are you asking how to host the API directly instead of using the esri CDN? --> Yes.
You start by downloading the API:
SDK Downloads | ArcGIS for Developers
Then you follow the instructions (install.html) inside the download for hosting the API.