nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Map layers not loading clearly

Gowri_sankarReddy

Hi Guys,

I am include esri maps in my application when even i am lancing my application it asking permission i am clicked Yes button After clicking map getting current position.Then some layers not loading.Could u please suggest me to fix error.Please find images

1.png

2.png

Vind meer berichten getagd met

Accepted answers

rscheitlin

Change this line:

<link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">

to:

<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">

All comments

Gowri_sankarReddy

Thanks Robert,

Its working fine.

Could u please suggest me how esri maps works offline.

I am included <script src="offline.min.map.js"></script>

rscheitlin

Change this line:

<link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">

to:

<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">

Gowri_sankarReddy

Hi Robert,

Thanks for replay

This is the code i am included in my application

console.log("Loading ArcGIS...");
require(["esri/map","esri/layers/FeatureLayer","esri/symbols/PictureMarkerSymbol","esri/graphic",
"esri/SpatialReference",
"esri/geometry/Point","esri/InfoTemplate",
"dojo/on","dojo/domReady!"],
function(Map,FeatureLayer,PictureMarkerSymbol,Graphic,SpatialReference,Point,InfoTemplate,on) {
// Create map
var map = new Map(""+$scope.logedinuser,{
basemap: "topo",
center: [17.387140, 78.491684],
zoom: 3
});
// Wait until map has loaded before starting geolocation
map.on("load", startGeolocation);
/*map.on("click", function (evt) {
console.log(("lat/lon : " + evt.mapPoint.y + ", " + evt.mapPoint.x));
map.infoWindow.setTitle("Coordinates");
map.infoWindow.setContent("lat/lon : " + evt.mapPoint.y + ", " + evt.mapPoint.x);
map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
});*/
// Create the marker symbol
var infoTemplate = new InfoTemplate();
infoTemplate.setTitle("Equpment ${AssetID}");
infoTemplate.setContent("<b>Equpment : </b>${AssetID}<br/>" +
"<b><div ><a href='#/app1/notificationadd/10002605/newhere'>Notification: </a></b><br/><br/></div>"
//+ "<b>2000: </b>${POP2000:NumberFormat}<br/>" +
// "<b>2000 density: </b>${POP00_SQMI:NumberFormat}"
);
var markerSymbol = new PictureMarkerSymbol({
"angle":0,
"xoffset":0,
"yoffset":0,
"type":"esriPMS",
"url":"img/Location.png",
"width":35,
"height":35
});

function startGeolocation(){
console.log("Starting geolocation...");
var location = navigator.geolocation.getCurrentPosition(locationSuccess, locationError);
/* var location = navigator.geolocation.watchPosition(
locationSuccess,
locationError,
{
maxAge: 250000,
timeout: 15000,
enableHighAccuracy:true
}
);*/
}

// Handle location success
function locationSuccess(position){
//navigator.notification.alert("Came here");
if(position.coords.latitude != null || position.coords.longitude != null){
console.log("long: " + position.coords.longitude + ", lat: " + position.coords.latitude);

var pointInfoTemplate = new InfoTemplate("Albuquerque");
var wgsPt = new Point(position.coords.longitude,position.coords.latitude, new SpatialReference({wkid:4326}));
map.graphics.add(new Graphic(wgsPt, markerSymbol).setInfoTemplate(pointInfoTemplate));
var lineFeatureLayer = new FeatureLayer("https://services7.arcgis.com/MaZxgL04O7KLTOGI/arcgis/rest/services/Point_Assets/FeatureServer/0", {
mode: FeatureLayer.MODE_SNAPSHOT,
infoTemplate: infoTemplate,
outFields: ["AssetID"],//here to mention display all fields

id: "lineFeatureLayer"
});
// var offlineEdit = new O.esri.Edit.OfflineEditBasic();

//offlineEdit.goOffline();
function initEditing() {
offlineEdit.extend(lineFeatureLayer,function(success,error){
if(success){
console.log("TEST layer loaded and extended for offline use!");
}
else {
console.warn("Unable to load FeatureLayer!");
}
});
}
//var updateHandler = lineFeatureLayer.on("update-end", initEditing);
console.log(lineFeatureLayer);
map.addLayer(lineFeatureLayer);
map.centerAndZoom(wgsPt, 7);
}
}

function locationError(error){
console.log("locationError code: " + error.code);

switch(error.code) {
case error.PERMISSION_DENIED:
alert("User denied request for geolocation.");
break;
case error.POSITION_UNAVAILABLE:
alert("Location information is unavailable. Check application settings, make sure location permissions have been granted");
break;
case error.TIMEOUT:
alert( "The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred.");
break;
}
}
}
);

rscheitlin

Gowri,

Can you post your code? What I see in the images is normal when you have forgotten to add the esri css files to your code or you have a bad url for them.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.