Latest Contributions by LukePaine2

Hi - I have noticed inconsistencies with map click locations when zoomed in, when using the Directions Widget from the JavaScript Maps SDK (v 4.29). This issue has also been in earlier 4.X versions of the API. Not exactly sure what is going on, but if you add a stop by clicking on the map, depending where you click the stop gets added at a different location to where you click. This is particularly noticeable when zoomed in, but I suspect it also happens when zoomed out - it is just hard to tell exactly where you click. For example: Interestingly though the offset is not consistent; 50m up the road, you get this result: Not sure if this is some sort of coordinate system thing? The MapView is in web mercator, perhaps the Directions widget uses WGS 84 lat / long? Given the inconsistent nature of the offsetting, I would have thought this was unlikely. Or perhaps it is trying to do something funky with the reverse geocoded address - moving the map click point to the located address (or similar). Anyway it is pretty annoying. Is anyone getting the same results and/or know of a workaround?

‎06-19-2022

Great idea!

‎05-22-2019

Best solution / workaround i have come up with is to register a click event on the .panel-close class through jquery. <script type="text/javascript"> $(document).ready(()=>{ $(".panel-close").click(e => { $(e.currentTarget).closest(".panel").collapse("hide"); e.stopPropagation(); }); }) </script>‍‍‍‍‍‍‍‍ This closes the panel and allows it to be re-opened, and the modal still works. The e.stopPropagation() line is important as it stops it from being re-opened (which I think was the issue). It does cause some issues with the collapsing of the panels, but I disabled that functionality, which we can live with.

‎01-03-2019

Interesting... I am using: Chrome: Version 71.0.3578.98 (Official Build) (64-bit) Firefox: 62.0.2 (64-bit) IE: Version 11.2665.14393.0 Edge: 38.14393.2068.0 In each browser, the modal displays fine and can be closed via the cross. The issue is with the info panel - the cross on this does not work. I published your page on our server using IIS - url is Calcite Maps - ArcGIS Sample. Does the same happen from your browser with this page?

‎01-02-2019

Tested in Chrome, IE, Firefox and Edge

‎01-02-2019

Thanks for replying Robert. Same behaviour is still present though - you can't close the info dialog via the 'x' close button, which is exactly what I was seeing.

‎12-17-2018

I am attempting to add a modal dialog into the Calcite Maps template, as per the About box in the style explorer example found Calcite Maps - Style Explorer. Following the steps outlined below, I am able to get a modal dialog to display, but when I do, the panels cannot be closed - the x buttons do nothing. Steps: Download the calcite maps project from Github (GitHub - Esri/calcite-maps: A Bootstrap theme for designing, styling and creating modern map apps. ) Modify the samples/arcgis-3.x/arcgis-3.x.html reference Bootstrap 3.3 javascript library (as per instructions here Calcite Bootstrap) Add a modal dialog and link to the nav bar to open it (based on sample at the Calcite Bootstrap link) Running the sample, the modal opens fine but the panels (e.g. Info panel) can no longer be closed. Removing the Bootstrap reference means the panels can be closed, but the modal no longer works. Any ideas? Full page code is below: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="description" content="Calcite Maps Demo - ArcGIS"> <meta name="author" content=""> <link rel="icon" href="https://www.esri.com/favicon.ico"> <title>Calcite Maps - ArcGIS Sample</title>  <link rel="stylesheet" href="../../dist/css/calcite-maps-bootstrap.min-v0.9.css">  <link rel="stylesheet" href="../../dist/css/calcite-maps-arcgis-3.x.min-v0.9.css"-->  <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/themes/calcite/dijit/calcite.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/themes/calcite/esri/esri.css"> <style> html, body { margin: 0; padding: 0; height: 100%; } </style> </head> <body class="calcite calcite-maps calcite-nav-top calcite-margin-all calcite-zoom-top-left calcite-layout-inline-left">  <nav class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-dark calcite-bgcolor-dark-purple">  <div class="dropdown calcite-dropdown calcite-bg-light calcite-text-dark" role="presentation"> <a class="dropdown-toggle" role="menubutton" aria-haspopup="true" aria-expanded="false" tabindex="0"> <div class="calcite-dropdown-toggle"> <span class="sr-only">Toggle dropdown menu</span> <span></span> <span></span> <span></span> <span></span> </div> </a> <ul class="dropdown-menu"> <li><a role="menuitem" tabindex="0" data-target="#panelInfo" aria-haspopup="true"><span class="glyphicon glyphicon-info-sign"></span> Info</a></li> <li><a class="visible-xs" role="button" data-target="#panelSearch" aria-haspopup="true"><span class="glyphicon glyphicon-search"></span> Search</a></li> <li><a role="menuitem" tabindex="0" data-target="#panelBasemaps" aria-haspopup="true"><span class="glyphicon glyphicon-th-large"></span> Basemaps</a></li> <li><a role="menuitem" tabindex="0" id="calciteToggleNavbar" aria-haspopup="true"><span class="glyphicon glyphicon-fullscreen"></span> Full Map</a></li> <li data-toggle="modal" data-target="#myModal"><a role="menuitem" tabindex="0" ><span class="glyphicon glyphicon-alert"></span> Modal</a></li> </ul> </div>  <div class="calcite-title calcite-overflow-hidden"> <span class="calcite-title-main">Calcite Maps</span> <span class="calcite-title-divider hidden-xs"></span> <span class="calcite-title-sub hidden-xs">Starter app for the ArcGIS API for JS 3.x (dojo)</span> </div>  <ul class="calcite-nav nav navbar-nav"> <li><div class="calcite-navbar-search hidden-xs"><div id="searchNavDiv"></div></div></li> </ul> </nav>  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>  <div class="calcite-map"> <div id="mapViewDiv" class="calcite-map-absolute"></div> </div>  <div class="calcite-panels calcite-panels-right calcite-bg-light calcite-text-dark panel-group" role="tablist" aria-multiselectable="true">  <div id="panelInfo" class="panel collapse"> <div id="headingInfo" class="panel-heading" role="tab"> <div class="panel-title"> <a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseInfo" aria-expanded="true" aria-controls="collapseInfo"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span><span class="panel-label">Info</span></a> <a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelInfo"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a> </div> </div> <div id="collapseInfo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingInfo"> <div class="panel-body"> <p>The main styles used in this app are:</p> Body <li>calcite-nav-top</li> <li>calcite-layout-inline-left</li> <br> Nav <li>calcite-bgcolor-dark-purple</li> <li>calcite-text-light</li> <br> Panels <li>calcite-panels-right</li> </div> </div> </div>  <div id="panelSearch" class="panel collapse hidden-sm hidden-md hidden-lg"> <div id="headingSearch" class="panel-heading" role="tab"> <div class="panel-title"> <a class="panel-toggle collapsed" role="button" data-toggle="collapse" href="#collapseSearch" aria-expanded="false" aria-controls="collapseSearch"><span class="glyphicon glyphicon-search" aria-hidden="true"></span><span class="panel-label">Search</span></a> <a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelSearch"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a> </div> </div> <div id="collapseSearch" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSearch"> <div class="panel-body calcite-body-expander"> <div id="searchPanelDiv"></div> </div> </div> </div>  <div id="panelBasemaps" class="panel collapse"> <div id="headingBasemaps" class="panel-heading" role="tab"> <div class="panel-title"> <a class="panel-toggle collapsed" role="button" data-toggle="collapse" href="#collapseBasemaps" aria-expanded="false" aria-controls="collapseBasemaps"><span class="glyphicon glyphicon-th-large" aria-hidden="true"></span><span class="panel-label">Basemaps</span></a> <a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelBasemaps"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a> </div> </div> <div id="collapseBasemaps" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingBasemaps"> <div class="panel-body"> <select id="selectBasemapPanel" class="form-control"> <option value="streets" data-vector="vector-streets">Streets</option> <option value="satellite" data-vector="satellite">Satellite</option> <option value="hybrid" data-vector="hybrid">Hybrid</option> <option value="national-geographic" data-vector="national-geographic">National Geographic</option> <option value="topo" data-vector="vector-streets-relief">Topographic</option> <option value="gray" data-vector="vector-canvas-light">Gray</option> <option value="dark-gray" data-vector="vector-canvas-dark">Dark Gray</option> <option value="osm" data-vector="osm">Open Street Map</option> <option value="dark-gray" data-vector="vector-streets-night">Streets Night</option> <option value="streets" data-vector="vector-streets-mobile">Streets Mobile</option> </select> </div> </div> </div> </div>  <script type="text/javascript"> var dojoConfig = { packages: [{ name: "bootstrap", //location: "https://esri.github.io/calcite-maps/dist/js/dojo-bootstrap" location: location.pathname.replace(/\/[^/]+$/, "") + "./../../dist/vendor/dojo-bootstrap" }, { name: "calcite-maps", //location: "https://esri.github.io/calcite-maps/dist/js/dojo" location: location.pathname.replace(/\/[^/]+$/, "") + "./../../dist/js/dojo" }] }; </script>  <script src="https://js.arcgis.com/3.25/"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> var app; require([ // ArcGIS "esri/map", "esri/dijit/Search", "dojo/query", // Calcite Maps "calcite-maps/calcitemaps-v0.9", // Bootstrap "bootstrap/Collapse", "bootstrap/Dropdown", "bootstrap/Tab", "dojo/domReady!" ], function(Map, Search, query, CalciteMaps) { // App app = { map: null, basemap: "dark-gray", center: [-40, 40], // lon, lat zoom: 3, initialExtent: null, searchWidgetNav: null, searchWidgetPanel: null } // Map app.map = new Map("mapViewDiv", { basemap: app.basemap, center: app.center, zoom: app.zoom }); app.map.on("load", function(){ app.initialExtent = app.map.extent; }) // Search app.searchDivNav = createSearchWidget("searchNavDiv"); app.searchWidgetPanel = createSearchWidget("searchPanelDiv"); function createSearchWidget(parentId) { var search = new Search({ map: app.map, enableHighlight: false }, parentId); search.startup(); return search; } // Basemaps query("#selectBasemapPanel").on("change", function(e){ app.map.setBasemap(e.target.options[e.target.selectedIndex].value); }); // Home query(".calcite-navbar .navbar-brand").on("click", function(e) { app.map.setExtent(app.initialExtent); }) }); </script> </body> </html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Online Status	Offline
Date Last Visited	Friday

My Ideas

Latest Contributions by LukePaine2

Inconsistent click location when using the Directions Widget

Re: Network Attribute Mappings - additional 'Road Class Value' required

Re: Modal dialog in Calcite Maps template

Re: Modal dialog in Calcite Maps template

Re: Modal dialog in Calcite Maps template

Re: Modal dialog in Calcite Maps template

Modal dialog in Calcite Maps template

Re: Modal dialog in Calcite Maps template