I am viewing BuildingSceneLayer using ArcGIS Javascript API.
I want to display a SceneLayer which is not shared as public in the ArcGIS portal.
When I try viewing it I get
Sceenshot
When I view in Codepen
https://codepen.io/arnofiva/pen/c410babb5384945a12b1d8206ebe27ce?editors=1010
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/BuildingSceneLayer"
], function(Map, SceneView, BuildingSceneLayer) {
// Create Map
var map = new Map({
basemap: "terrain",
ground: "world-elevation"
});
// Create the SceneView
var view = new SceneView({
container: "viewDiv",
map: map,
camera: {
position: [-74.0338, 40.6913, 707],
tilt: 81,
heading: 50
}
});
// Create SceneLayer and add to the map
var sceneLayer = new BuildingSceneLayer({
portalItem: {
id: "e7bf9f676ed64937bff9f44c84fdae2b"
},
popupEnabled: false
});
map.add(sceneLayer);
sceneLayer.when().then(function() {
view.goTo(sceneLayer.fullExtent);
});
});
I get a popup for logging in. How do I enable that in my code?
Related
How can I add and remove the dynamic marker on esri map using the javascript api? When I add the marker in the graphics layer, it's added but how can I remove it and add the new marker by another latitude longitude?
This is my code so far;
require(
["esri/map",
"esri/graphic",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/TextSymbol",
"esri/geometry/Point",
"esri/SpatialReference",
"esri/tasks/ProjectParameters",
"esri/tasks/GeometryService",
"dojo/dom",
"dojo/on",
"esri/dijit/HomeButton",
"dojo/domReady!"
],
function setupmap(Map, Graphic, PictureMarkerSymbol, TextSymbol, Point, SpatialReference, ProjectParameters, GeometryService, dom, on, HomeButton) {
var map = new Map("map-container", {
center: [83.0179802, 25.32327],
zoom: 13,
basemap: "streets"
});
map.graphics.clear();
map.on("load", function (evt) {
var home = new HomeButton({map: map}, "HomeButton");
home.startup();
picSymbol = new PictureMarkerSymbol(iconType, 20, 20);
$.each(detailsJSON, function (location, lstNodes) {
var locArr = location.split("--");
var latitude=locArr[0];
var longitude=locArr[1];
var geometryPoint = new Point(longitude, latitude,new SpatialReference(4326));
map.graphics.add(new Graphic(geometryPoint, picSymbol));
});
});
}
);
You can store a reference to the Graphic object you're adding and later remove it using the remove(graphic) method.
let graphic = new Graphic(geometryPoint, picSymbol);
map.graphics.add(graphic);
...
map.graphics.remove(graphic);
You can also remove all graphics from the layer using method removeAll().
See the arcgis-js-api reference for further info.
To make your component more stateless you can use the attributes collection of the Graphic to store a tag (or an Id or similar) and remove the item based on this value.
When adding;
let graphic = new Graphic(geometryPoint, picSymbol);
graphic.attributes = { "tag": "toBeRemovedLater" };
map.graphics.add(graphic);
When removing;
angular.forEach(map.graphics.graphics, (graphic: any) => {
if (graphic.attributes && graphic.attributes.tag == "toBeRemovedLater")
map.graphics.remove(graphic);
});
You can use Sketch Widget that simplifies the process of adding and updating graphics.
const sketch = new Sketch({
availableCreateTools: ['point'],
layer: graphicsLayer,
view,
});
view.ui.add(sketch, 'top-right');
I am working on arcgis map JavaScript API and i want to show map layer legend with close icon but i am unable to find legend load event to show the same. Legend along with close icon is shown in below image.enter image description here
You can access the dom node of the legend widget after it was added to the mapview.ui with the container property of the legend widget.
This script below was taken from a sample demo
require([
"esri/views/MapView",
"esri/widgets/Legend",
"esri/WebMap"
], function(MapView, Legend, WebMap) {
var webmap = new WebMap({
portalItem: {
// autocasts as new PortalItem()
id: "4abe6a830b8f466dacf8abfde567a781"
}
});
var view = new MapView({
container: "viewDiv",
map: webmap
});
view.when(function() {
// get the first layer in the collection of operational layers in the WebMap
// when the resources in the MapView have loaded.
var featureLayer = webmap.layers.getItemAt(0);
var legend = new Legend({
view: view,
layerInfos: [
{
layer: featureLayer,
title: "NY Educational Attainment"
}
]
});
// Add widget to the bottom right corner of the view
view.ui.add(legend, "bottom-right");
//Now you can access the legend domNode and add a close button
console.log(legend.container)
});
});
I'm trying to show all users geolocation from a web site in a map. Through google maps API documentation I've got a way to show my location as user. But, how I make it for show all geolocation from the registered people on the website?
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
var infoWindow = new google.maps.InfoWindow({map: map});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
</script>
Create objects of the google.maps.Marker() type, set a position using the setPosition function of it and add it to your map using the setMap function.
Example (Lat/Lng is the center of Germany - insert your users coordinates there):
var marker=new google.maps.Marker();
// use your registered user coordinates here
marker.setPosition(new google.maps.LatLng(48.14544, 8.19208));
marker.setMap(map);
Additionally you can use boundaries to make your map autozoom to get every marker visible:
var bounds=new google.maps.LatLngBounds();
...
bounds.extend(marker.getPosition());
...
map.fitBounds(bounds);
I have an ArcGIS Online public account and add WebMap to my website.
My ArcGIS Online WebMap looks like this ESRI's sample: LINK
And I am trying to add my WebMap to my website like this ESRI's reference page. You will see there is a map in the center of page: LINK
My WebMap is displayed on my webpage well. When I access my webpage, my WebMap asks my ID and Password. If I entered it, then it shows my map.
However, my question is, if I moved to different page and then come back to map page, it asks again. Is it possible to set a timeout so I don't have to sign in everytime I access the page?
The reason I asked this question is that to find out if there were a way to reduce my code simple and work on code in front-end.
I've researched OAuth that ESRI provided and I ended up using esri/IdentityManager. There were references to use esri/IdentityManager package; however there were no sample code to using it with personal WebMap which used arcgisUtils.createMap
So here is sample code that I worked:
require([
"dojo/parser",
"dojo/ready",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/dom",
"esri/map",
"esri/urlUtils",
"esri/arcgis/utils",
"esri/dijit/Legend",
"esri/dijit/LayerList",
"esri/graphic",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/TextSymbol",
"esri/geometry/Point",
"esri/dijit/Scalebar",
"dojo/_base/unload",
"dojo/cookie",
"dojo/json",
"esri/config",
"esri/IdentityManager",
"esri/layers/FeatureLayer",
"dojo/domReady!"
], function (
parser,
ready,
BorderContainer,
ContentPane,
dom,
Map,
urlUtils,
arcgisUtils,
Legend,
LayerList,
Graphic,
PictureMarkerSymbol,
TextSymbol,
Point,
Scalebar,
baseUnload,
cookie,
JSON,
esriConfig,
esriId,
FeatureLayer
) {
var mapOptions = {
basemap: "topo",
autoResize: true, // see http://forums.arcgis.com/threads/90825-Mobile-Sample-Fail
center: [currentPosition.lng, currentPosition.lat],
zoom: 15,
logo: false
};
// cookie/local storage name
var cred = "esri_jsapi_id_manager_data";
// store credentials/serverInfos before the page unloads
baseUnload.addOnUnload(storeCredentials);
// look for credentials in local storage
loadCredentials();
parser.parse();
esriConfig.defaults.io.proxyUrl = "/proxy/";
//Create a map based on an ArcGIS Online web map id
arcgisUtils.createMap('PUT-YOUR-ESRI-KEY', "esriMapCanvas", { mapOptions: mapOptions }).then(function (response) {
var map = response.map;
// add a blue marker
var picSymbol = new PictureMarkerSymbol(
'http://static.arcgis.com/images/Symbols/Shapes/RedPin1LargeB.png', 50, 50);
var geometryPoint = new Point('SET YOUR LAT', 'SET YOUR LONG');
map.graphics.add(new Graphic(geometryPoint, picSymbol));
//add the scalebar
var scalebar = new Scalebar({
map: map,
scalebarUnit: "english"
});
//add the map layers
var mapLayers = new LayerList({
map: map,
layers: arcgisUtils.getLayerList(response)
}, "esriLayerList");
mapLayers.startup();
//add the legend. Note that we use the utility method getLegendLayers to get
//the layers to display in the legend from the createMap response.
var legendLayers = arcgisUtils.getLegendLayers(response);
var legendDijit = new Legend({
map: map,
layerInfos: legendLayers
}, "esriLegend");
legendDijit.startup();
});
function storeCredentials() {
// make sure there are some credentials to persist
if (esriId.credentials.length === 0) {
return;
}
// serialize the ID manager state to a string
var idString = JSON.stringify(esriId.toJson());
// store it client side
if (supports_local_storage()) {
// use local storage
window.localStorage.setItem(cred, idString);
// console.log("wrote to local storage");
}
else {
// use a cookie
cookie(cred, idString, { expires: 1 });
// console.log("wrote a cookie :-/");
}
}
function supports_local_storage() {
try {
return "localStorage" in window && window["localStorage"] !== null;
} catch (e) {
return false;
}
}
function loadCredentials() {
var idJson, idObject;
if (supports_local_storage()) {
// read from local storage
idJson = window.localStorage.getItem(cred);
}
else {
// read from a cookie
idJson = cookie(cred);
}
if (idJson && idJson != "null" && idJson.length > 4) {
idObject = JSON.parse(idJson);
esriId.initialize(idObject);
}
else {
// console.log("didn't find anything to load :(");
}
}
});
I am new to the ArcGIS API for Javscript 4.0 API. Using the calcite sample on the API website. Where can I add in a feature Layer to the map view and scene view? Essentially I'm trying to merge the Feature layer sample
here: https://developers.arcgis.com/javascript/latest/sample-code/layers-featurelayer/index.html
/********************
* Add feature layer
********************/
// Carbon storage of trees in Warren Wilson College.
var featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0"
});
map.add(featureLayer);
with the calcite map sample here:
https://developers.arcgis.com/javascript/latest/sample-code/frameworks-bootstrap/index.html
but am not sure what part to add the layers to. I have tried a few times. See below. Thanks
/******************************************************************
*
* Create the map and scene view and ui components
*
******************************************************************/
// Map
var map = new Map({
basemap: app.basemap
});
app.mapView = new MapView({
container: "mapViewDiv",
map: map,
center: app.center,
scale: app.scale,
padding: app.viewPadding,
popup: new Popup({
dockOptions: app.dockOptions
}),
ui: {
components: app.uiComponents
}
});
// Scene
var mapScene = new Map({
basemap: app.basemap,
ground: "world-elevation"
});
app.sceneView = new SceneView({
container: "sceneViewDiv",
map: mapScene,
center: app.center,
scale: app.scale,
padding: app.viewPadding,
popup: new Popup({
dockOptions: app.dockOptions
}),
ui: {
components: app.uiComponents
}
});
// Set the active view to scene
app.activeView = app.mapView;
// Create the search widget and add it to the navbar instead of view
app.searchWidget = new Search({
view: app.activeView
}, "searchWidgetDiv");
app.searchWidget.startup();
// IS THIS WHERE I CAN ADD LAYERS??????????????????
var featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0"
});
app.mapView.map.add(featureLayer);
app.sceneView.map.add(featureLayer);
You can add them directly to the map object in 4.0. Look at the API documentation here for a small example: https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#layers.
Essentially it would look something like this:
var featureLayer = new FeatureLayer(url);
var map = new Map({
basemap: app.basemap,
layers: [featureLayer]
});
You would need to make sure you apply this to whichever map you want them to render on.
you may need the following code:
var countyLayer = new FeatureLayer({
url: "http://127.0.0.1:6080/arcgis/rest/services/newyourk/MapServer/1"
});
app.map.add(countyLayer);