Hello,
I have integrated map with my application.
But when the page (thymeleaf html) loads the map keeps loading and the page grows which goes blank. I want the map to be in that square box and not to grow. can somebody help? its urgent...I think there is issue with CSS?
Javascript:
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/geometry/Point",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"dojo/domReady!"
],function( Map,MapView,
Graphic, Point,
SimpleMarkerSymbol, SimpleLineSymbol){
var map = new Map({
basemap: "hybrid"
});
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: 5, // Sets the zoom level based on level of detail (LOD)
center: [20, 60] // Sets the center point of view in lon/lat
});
// First create a point geometry (this is the location of the Titanic)
var point = new Point({
longitude:18.5204,
latitude: 73.8567
});
// Create a symbol for drawing the point
var markerSymbol = new SimpleMarkerSymbol({
color: [226, 119, 40],
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 2
}
});
// Create a graphic and add the geometry and symbol to it
var pointGraphic = new Graphic({
geometry: point,
symbol: markerSymbol
});
// Add the graphics to the view's graphics layer
view.graphics.addMany([pointGraphic]);
});
CSS:
#mapDiv {
padding-top: 0px;
padding-bottom: 10px;
margin: 50px;
height: 50px;
width: 50%;
}
Solved! Go to Solution.
For that you just switch SimoleMarkerSymbol for a PictureMarkerSymbol:
PictureMarkerSymbol | API Reference | ArcGIS API for JavaScript 3.20
Rajnayan,
How does your html look for the mapDiv? I would add a div wrapped around the mapDiv that has the css rule you have for mapDiv now and then have a new rule for the actual mapDiv that is just:
#mapDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#mapOuterDiv {
padding-top: 0px;
padding-bottom: 10px;
margin: 50px;
height: 50px; /*this seems really small*/
width: 50%;
}
Hello Robert,
Thank you for your prompt reply and help.
Actually I have included the mapDiv in another HTML (thymeleaf) which calls the CSS and JS. Below is the Snippet:
<div class="row">
<div id="mapDiv"/>
</div>
FYI, the issue is now solved.
Yeah. the height is small because I am embedding a map in an application and I need to show only the portion for which lat/long will be provided.
I have another problem now, i.e. with "center". When I give lat/long in Point Function the map is not shown on that point but I have to manually pan it to the Point. How to coordinate with lat/long and center?
Your help is appreciated.
Thanks for your reply in advance.
So you are saying that the map does not respect the center value you define here?
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: 5, // Sets the zoom level based on level of detail (LOD)
center: [20, 60] // Sets the center point of view in lon/lat
});
Hi,
Actually not.
Below is the Snippet:
var view = new MapView({
container: "mapDiv", //Reference to the div id created in html
map: map, // Reference to the map object created above
zoom: 5, // Sets the zoom level based on level of detail (LOD)
center: [82, 22] // Sets the center point of view in lon/lat -------> I have to Manually Set this with trial/error method to check get it aligned to lat/long.
});
// First create a point geometry (this is the location of the Titanic)
var point = new Point({
longitude:72, // for Mumbai (India)
latitude:19 //for Mumbai (India)
});
I have to Manually Set this with trial/error method to check get it aligned to lat/long to see my Point.
My Goal : I want to pass lat/long dynamically (coming from another application) and it should show me the desired location in the specified area. As of now I am entering lat/long manually, but stuck in the concept of "Center".
Can you tell me how should I deal with it?
Your reply and help is appreciated
I would suggest you use the following code to dynamically set the maps center:
var pt = new Point({ latitude: 19, longitude: 72 });
// go to the given point
view.goTo(pt);
https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#goTo
Hi,
view.goTo(pt);
--> Doesn't Work as it takes the map to different continent and also does not show my Point graphic
view.center=pt; --> But thanks to your Article as this works Perfectly
Now I need to just find a way to dynamically pass the lat/long values to the JS Point.
Regards
Hello Robert,
I want a "stick pin or push Pin" to point on map on the specific location.
As of now I am able to show a filled circle using Simple marker Symbol.
Can you please let me know how to add Push Pin/Stick pin?
Regards
For that you just switch SimoleMarkerSymbol for a PictureMarkerSymbol:
PictureMarkerSymbol | API Reference | ArcGIS API for JavaScript 3.20
Thanks Robert. I figured it out.
I have one issue: I have raised this question:
https://community.esri.com/thread/193728-none-of-the-widgets-are-working-in-my-application
Can you answer this question?
Regards