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>
