POST
|
I am trying to incorporate MaterializeCSS into my project (http://materializecss.com/). The material design is really nice and makes it easy for me to switch from android to javascript. Unfortunately I'm running into compatibility issues with the ESRI JS api, and materialize which relies on JQuery. It might related to the age old battle of dojo vs jquery, and I'm still new to this, but I was hoping with the release of the JavaScript API 4.X that the api would be easier to incorporate 3rd party libraries. I've got it partially working, to the point where I can finally load both MaterializeCSS, and the necessary core functionality for a 4.4 map, but it fails in IE with "parentElement" undefined or null". The odd thing is, is if I leave out the Main.css file, it works fine in IE, except for the fact that none of the layers will load. Also, functionality is perfect in Chrome and Firefox with no breaks. Does anyone have any success with incorporating 3rd party libraries, and hopefully some experience with MaterializeCSS? I'm particularly confused with how leaving out a CSS file will fix/break javascript? For those not wanting to download the file, here is my code: <!DOCTYPE html> <html> <head> <title>Materialize Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--import jQuery--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <!--import fullpage.js <link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.6/jquery.fullPage.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.6/vendors/scrolloverflow.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.6/jquery.fullPage.min.js"></script>--> <!--import esri.css--> <link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css"> <!--Import materialize.css--> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" media="screen,projection" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script> <!--import esri.js--> <script src="https://js.arcgis.com/4.4/"></script> <script src="classList.js"></script> <script src="gistfile1.js"></script> <!--import layout.css--> <style> #map { height: 80vh; position: relative; } #addNewInitiative{ padding-top: 50px; } .no-pad { padding: 0; } .container { padding: 0; } .input-field .prefix.invalid.active { color: #F44336; } #LocateButton { position: absolute; z-index: 9999; top: 86px; left: 21px; } .esriPopup.esriPopupHidden { display: none; } .fp-no-easing { -webkit-transition: all 0s ease-out !important; transition: all 0s ease-out !important; } </style> </head> <body> <div id="fullpagenew"> <div class="section no-pad" data-anchor="Click"> <div class="slide head"> <div class="row"> <div class="col s6 m6 l6"> <a href="#vclick" class="waves-effect waves-light btn blue lighten-1">Click</a> </div> <div class="col s6 m6 l6"> <a href="#another/Click" class="waves-effect waves-light btn blue lighten-1">Another Click</a> </div> </div> </div> <div class="slide blue" data-anchor="Another Click"> <h1>Slide 2</h1> </div> </div> <div class="section" id="addNewInitiative" data-anchor="Click"> <div class="slide desktop" data-anchor="podatki"> <div class="container"> <form role="form" id="inputFormDesktop"> <div class="row"> <div class="col l6 s12 item" id="mapCol"> <div class="card-panel"> <div id="map"> <div id="LocateButton"></div> </div> </div> </div> </div> <div class="hide-on-med-and-down"> <div class="row"> <div class="file-field input-field col l12 s12"> <div class="btn"> <span>Folder Explorer</span> <input type="file" multiple> </div> <div class="file-path-wrapper"> <input class="file-path validate" type="text"> </div> </div> </div> <div class="row"> <div class="col l6"> <button type="button" class="btn btn-danger head-btn btn-sm" id="Bot Left">Bot Left</button> </div> <div class="col l6"> <button type="button" class="btn btn-success head-btn btn-sm" id="Bot Right">Bot Right</button> </div> </div> </div> </form> </div> </div> </div> </div> <script> var map; require([ "esri/Map", "esri/views/MapView", "dojo/on", 'dojo/dom', "dojo/cookie", "dojo/domReady!" ], function (Map, MapView, on, dom, cookie) { map = new Map({ basemap: "streets" }); var view = new MapView({ container: "map", // Reference to the scene div created in step 5 map: map, // Reference to the map object created before the scene zoom: 12, // Sets the zoom level based on level of detail (LOD)a' center: [15, 65] }); map.add(annoLayer); }); </script> </body> </html>
... View more
07-12-2017
03:30 PM
|
0
|
0
|
618
|
POST
|
This has been identified as a BUG and ESRI has it currently open: BUG-000101188: A line event layer with an offset does not include v..
... View more
05-23-2017
07:38 AM
|
2
|
0
|
373
|
POST
|
Thanks Robert.So I've adjusted the zoom level to be something within the LOD of the basemap, and it still seems to default at the max view envelope, bypassing the things I put in my map view. For instance it looks like:
... View more
05-19-2017
07:25 AM
|
0
|
1
|
893
|
POST
|
I'm using the ESRI Javascript API for 4.3 and my MapView is not respecting the initial extents of what I'm trying to set as the initial extents. I can change the extents after the map loads, but this does some snap zooming after the map loads which feels wrong. Am I missing something? Here is my basic map: require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/layers/MapImageLayer", "esri/Basemap", "dojo/domReady!" ], function (Map, MapView, FeatureLayer, MapImageLayer, Basemap) { var roadLayer = new MapImageLayer({ url: a basemap service }); var map = new Map({ layers: "topo" }); 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: [ -122.3321, 47.6062 ] // Sets the center point of view in lon/lat }); map.add(roadLayer); });
... View more
05-16-2017
02:11 PM
|
0
|
3
|
2157
|
POST
|
I have Lines and Points that, when linear referenced, draw "correctly". What I mean by correctly is, my Points features are strewn across the lines features, but the Points have a distinct start and an end that should be aligned to the start and end of the line. When drawn with no offset, they line up correctly: As soon as I include an offset equally to both the lines and points, they start to "skew": As you can see, the points don't line up with where the line features end. The line length is the same value given as the points length, with the same offset value and using the same linear referenced resource. Why is this happening?
... View more
12-27-2016
08:19 AM
|
0
|
2
|
1565
|
POST
|
Thanks Robert! That was exactly it. I went back to the source MXD and saw that there was an opacity set on the layer. I didn't realize the differences in how the layer is drawn from the DynamicMapServiceLayer vs FeatureLayer. Thanks for the help!
... View more
12-12-2016
09:45 AM
|
0
|
0
|
495
|
POST
|
I'm using a map service that has simple green and gold lines. I don't want to expose the map service to the world, but I can provide an example of what the map service looks like through the AGO map viewer: But as soon as I put this in a "custom" javascript page using ArcGISDynamicMapServiceLayer, the colors on the layers become muted: Attached below is my source code consuming the dynamic map service: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title></title> <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css"> <script src="https://js.arcgis.com/3.18/"></script> <script> var map; require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "dojo/domReady!"], function(Map, ArcGISDynamicMapServiceLayer) { map = new Map("map", { basemap: "topo", center: [-122.3321, 47.606], zoom: 13 }); var testLayer = new ArcGISDynamicMapServiceLayer("My Map Service Layer"); map.addLayer(testLayer); }); </script> <style> html, body, #map { height: 100%; padding: 0; margin: 0; } </style> </head> <body class="claro"> <div id="map"></div> </body> </html> It's a basic setup but for some reason the layer is coming across with muted colors. Any help or suggestions would be appreciated!
... View more
12-12-2016
09:22 AM
|
0
|
2
|
1071
|
POST
|
In the Javascript API 4.0, I believe I'm to interact with the map via a MapView if I'm doing a 2D map. I couldn't help but notice that the events for the MapView are pretty bare, with only 4 supported events. If I wanted to have the map event of "extent-change" like in 3.16, is there a different process to hook into this event in 4.0? Or is this a feature to be added in the future?
... View more
05-09-2016
02:36 PM
|
0
|
5
|
5112
|
POST
|
Yeah this is the route I'm going, but I was hoping to avoid this route. But thanks for the tip on the arcpy.env.scratchFolder!
... View more
04-06-2016
11:36 AM
|
0
|
0
|
1205
|
POST
|
Hi Dan, So I have a way to prompt the user for a username/password. My issue is the connection. Ideally, I would like to supplant the username/password into my connection string somehow so that I can pass the user credentials that way. I realize that perhaps ESRI might not like this as the password would need to be encrypted so it won't be passed in the clear, but I don't know how their connection strings are formatted. I couldn't find documentation to go through the "ESRI" way. I know I can create my own database connection string, but I'm trying to interface as much as possible utilizing the ESRI abstraction layer. So really, I'm looking to supply the username password I get from the prompt to the user, and embed that into the pre-existing database connection.
... View more
04-06-2016
08:34 AM
|
0
|
0
|
1205
|
POST
|
Hi Dan! Yes I've ensured the script is running in the foreground and did do those steps. The problem with it running in the foreground is that you can see in the image I provided that the dialog box in the background is unfocusable because the script is "run in foreground." So the user can't supply their credentials because the script is in the foreground.
... View more
04-06-2016
07:56 AM
|
0
|
1
|
1205
|
POST
|
I was wondering if there was a way of using a pre-existing connection that does not have a username/password set to it by default. Then, in my python script, I could prompt the user for username and password, and then pass the credentials to the connection string, as opposed to having the user wait for the prompt. My main issue with the prompt is that it doesn't work with the script when it's "run in foreground" because the user can't interact with the username/password dialog... since it's in the background... (seems like a bug to me!) But if I don't have the script running in the foreground, I don't get the dialog box to present to the user the progress bar. So far, the only solution that might seem viable is to create a new connection file, use that connection file, and then delete the connection file when the python script is complete. Found it in this thread here:Cannot Acces SDE Connection File Properly using Arcpy Is there any way for me to inject a username/password into the pre-existing connection?
... View more
04-06-2016
07:32 AM
|
0
|
7
|
5387
|
Title | Kudos | Posted |
---|---|---|
2 | 05-23-2017 07:38 AM |
Online Status |
Offline
|
Date Last Visited |
11-11-2020
02:24 AM
|