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.
Hi,
I already tried this, but its not working.
Currently I am using JBOSS application Server, Can you let me know where should I keep the files?
I am using Eclipse (Windows Platform) for my application.
Regards
you are on your own there. I have no experience with JBOSS or Eclipse
HomeButton will do this. Please note that HomeButton will get the initial extent of the map and set it as your original extent, some sort of.