Tag Archives: javascript

Custom Print Tool for 3D SceneView in ArcGIS Javascript API 4.4

Leave a reply

Custom Print Tool for SceneView in 4.4

**DISCLAIMER**the resulting pdf is in 2D.**

Here’s a link to my sample:

JS Bin – Collaborative JavaScript Debugging 

*your browser will probably block the pdf by default, as it appears in a new tab or window

This is a print tool I made for a 3D app. It works by spinning up a transparent 2D map of the same area when the print button is clicked, and then uses that 2D map for the print task. When the tools modal is closed, the 2D map container is emptied, so it is not running behind the scenes unless the print modal is open. The widget was made using materialize, and the print task uses the default ArcGIS Online print (export web map) service.

I also implemented some simple error handling for the case when the browser’s popup blocker blocks the requested pdf like this:

function printResult(response) {
   var url = response.url;
   var newWindow = window.open(url);
   if (!newWindow) {
      $("#enablePopupModal").show();
   }
}

Hope this helps anyone trying to print in their 3D app!

Cheers

Sample 3D Draw Line/Measure Tool for ArcGIS API for Javascript 4.4

Leave a reply

Sample Draw Line / Measure Tool for Sceneview in 4.4

**DISCLAIMER* the resulting length is only a 2D measurement**

Here’s a link to my example:

JS Bin – Collaborative JavaScript Debugging

I threw together a draw polyline tool that drapes over the world elevation layer in a sceneview, and adds a text graphic showing the 2D length of the line upon completion. This is what I’m using in my app until the API supports a proper 3D measure tool. Just wanted to share it incase someone is trying to incorporate at least some level of measurement functionality in their 3D app.

I also want to give credit to whoever made this sandbox example:

Draw polygon for spatial query | ArcGIS API for JavaScript 4.4

I used that sample as a starting template for my tool, only adding a few tweaks to get it looking good in 3D, and to add the measurement functionality.

I also have a polygon version of this tool too. If anyone would like to see it just ask!

Hope this is helpful.

Cheers,

Drew

arcgis js 3D camera setter

Leave a reply

ArcGIS JS 3D Camera Setter

tl;dr
A simple way to grab arcgis js 4.x 3D camera json by copying the current camera state to your clipboard:

http://dev.brightrain.com/camera-setter/

code here

https://github.com/BrightRainSolutions/arc-camera-setter

 

Moar

I’m building a 3D mapping app using the ArcGIS JS 4.x API that requires a new 3D camera position for each instance. This presented a funny problem because it is rather tedious to capture a specific camera position. Unlike a simpler, 2D map, in which you only have to set an extent or a center point with zoom level, a 3D camera has more variables that require you to take a pilot’s view of the earth. You need to set the position of the camera including coordinates and height, as well as the tilt of the camera and it’s heading.

While it’s kind of fun to just tweak it and refresh the page to get it just right, it takes a lot of tweaking!

So I built a simple tool that captures all of the properties of the camera and formats it in the json required to set the view of your 3D map and copies it to your clipboard.

It’s simple! A camera json object is created for the current 3D map view and displayed in the right panel. The copy button copies the json to your clipboard for direct use in your arcgis js 3D map view (sceneview). Just paste it right into your code.

Give it a try here

http://dev.brightrain.com/camera-setter/

and you can find the code here

https://github.com/BrightRainSolutions/arc-camera-setter

It includes a sample feature service for reference, but obviously you don’t have to. The 3D scene will work just fine.

Also, this could be used to create tour by using a series of camera positions, for example. (Potential future post…)

 

Stuff used

arcgis js api 4.x

clipboad js

icon from Icons

Togglability

Leave a reply

Togglability
Many of the desktop GIS paradigms have unfortunately made their way to the web. Second only to the ‘Identify’ tool in popularity, the checkbox for toggling layers is still the most common way to turn map layers on and off. While I appreciate the simplicity it just doesn’t seem all that, well, elegant. And now that skeuomorphism is out and flat design is here to stay, the good ole checkbox might just be going the way of

This doesn’t hurt my feelings but it does leave some interesting voids and presents lots of possibilities.

Here’s my first departure from the old paradigm that I’m using pretty regularly. A sized
< div > floating directly over the map with some roundy edges and applying slight transparency. Position these togglable layer elements in a corner or off to the side and they work pretty well.
visible
visible
not-visible
not-visible
dual purpose layer toggler and legend
togglable-layers

Styling
Set the css hover to cursor: pointer and change the background color and it becomes obvious that you can interact with it. Adding an icon can be used to invite users and indicate what it does. This allows you to maximize space by using the element for both togglability and as a legend. Moving the element into the background by lightening the background color, removing the border and changing the icon indicates its in-visibility. Conversely, applying a solid border, increasing opacity and swapping icons give the visual cue that this thing is live.

the css:

Toggling
Wire up a click event for each togglable-layer element to toggle the visibility of the layer on the map and also to toggle css classes that visually indicate the visibility state of that layer.

the js:

You can see this in action,
demo of togglable layers using recreation sites at Wenatchee National Forest

Source of demo on github.

I realize that there is a growing contingency of ‘no GIS’ proponents who would do away with the concept of turning layers of data on and off and, in some contexts, I agree. But there are many use cases where this can be extremely powerful and, if done well, dare I say, elegant.

naip wms | mapbox satellite

Leave a reply

On Tuesday MapBox announced the release of its new Satellite layer based, partially, on NAIP imagery in the US. So I said I’d like to test it for speed against the NAIP Web Map Service (WMS) hosted by USGS National Map I’m currently using.

I was initially planning to do some benchmarking on tile load speed etc but really, it just isn’t necessary. One zoom or pan of each will tell you that MapBox is faster, hands down. So since what I do is highly visual, and because it’s a helluvah lot more fun, I simply dropped the two maps side by side and wired up some events such that, as one side is panned or zoomed, the other is set to the same resulting extent. Some flying around in either map will indeed confirm the hypothesis that MapBox is faster. But this didn’t turn out to be the most interesting part really. You can see that the quality is higher with higher contrast and crispy colors on the MapBox side. I did not alter saturation, hues etc of the imagery but simply left the default. Lots of interesting experimentation to be done there too.

Take a look for yourself and you’ll see which is faster. You will likely also discover more interesting comparisons.

http://dev.brightrain.com/naipspeed/naipspeed.html

Pro tip: go full screen (F11 in Firefox and Chrome)

Hat tip: And it’s centered on DC by default, for @cageyjames  – I get it, I used to be west coast.

So if you’re looking for hard data on tile loading speeds, sorry, I’ve got no numbers. I’m sure I could rig some JavaScript to test the loading speeds and gather number of tiles loaded etc., but this setup doesn’t lend itself to rigorous, fair testing for a few reasons anyway.

  1. There isn’t a map event in Leaflet that fires when all tiles are loaded (didn’t consider using anything else)
  2. Map events are wired such that a slight advantage is given to the target map
  3. MapBox Satellite also has roads and labels so a bit more load (handicap, like bowling)