Map layers not loading clearly

1295
5
Jump to solution
11-03-2017 03:20 AM
Gowri_sankarReddy
New Contributor

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 

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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">

View solution in original post

0 Kudos
5 Replies
RobertScheitlin__GISP
MVP Emeritus

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.

0 Kudos
Gowri_sankarReddy
New Contributor

Hi Robert,

Thanks for replay

This is the code i am included in my application


<script src="https://js.arcgis.com/3.20"></script>

<script src="offline.min.map.js"></script>
<link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">


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;
}
}
}
);

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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">

0 Kudos
Gowri_sankarReddy
New Contributor

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>

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Sorry I have never seen that script.

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

0 Kudos