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

Find more posts tagged with

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.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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