Tag Archives: web map

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

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

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

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

Recreation Facilities around Lassen Volcanic National Park

outdoorsy-nerds

Come git it outdoorsy nerds! Recreation facilities for all (developers)!

The Recreation Information Database (RIDB) is a comprehensive database containing authoritative outdoor recreation facility information for most US federal agencies that provide recreation services including the National Park Service, US Forest Service and many, many others.

I’ve been following the progress since its inception and when the USDA came out with an API to access it I dove in to make a web map to access recreation facilities, from a map.

The application is pretty straightforward. You can pan and zoom the map and recreation facilities will be display with recognizable icons within the current extent or, if zoom level is far out, a predefined radius based on zoom level. Clustering keeps things tidy. I also used the Mapzen Search service along with the Mapzen Leaflet Geocoder to provide autocomplete search capability.

Give it a try here:

http://dev.brightrain.com/recreationer/

Source project:

https://github.com/brightrain/ridb-recreationer

The Services:

Recreation Information Database API

Mapzen Search (geocoding API)

The Stack:

Leaflet

Leaflet marker cluster

Mapzen leaflet geocoder

Leaflet locate control

Mapbox for basemap

map-autocomplete

Autocomplete Map Search:

Autocomplete multi-source Search with ArcGIS REST services

Search First. Search is expected in modern web applications. And what better use of a map application than to start typing what you want, be shown a list of relevant suggestions, pick one and be taken there with potentially some useful context info.

In several posts in the great geospatial blog, MapBrief, Brian Timoney has mentioned a Search First approach to web application building. The most recent example:

Good Thing #1: A Big, Obvious Auto-Complete Text Entry Box

I couldn’t agree more. It is core to nearly every application I build and is of far greater use than most of the novelty web mapping ‘standard’ tools <uhem, looking at you, measure tool>.

Search is the number one request I get in web mapping applications so I thought I’d share how I put all the pieces together to get an autocomplete search up and running with esri ArcGIS REST services.

I’ll walk through the steps to get a fully functioning autocomplete map search feature.

Here’s the source on github and a working sample application.

Let’s build an autocomplete search box for recreation sites in Okanogan-Wenatchee National Forest.

This autocomplete solution uses twitter typeahead js, the bundled download includes the bloodhound suggestion engine and the jQuery plugin, all of which we’ll use here.

Once you get typeahead all hooked into your application, the only html you’ll need is an input for your search and the rest is done via javascript.

<input id="search-box" type="text" placeholder="Search...">

There are three parts to getting things going:

  1. Define and initialize suggestion engines
  2. Wireup typeahead with jQuery including adding the engines and defining the UI
  3. Handle the event when a user selects one of the suggestions

Define the Engines

First, we’ll define an engine (bloodhound) for each source to include. In this example we’ll use four:

 icon-camp

A campground (arcgis) feature service layer

 icon-trail

A trail head feature service layer

 icon-ski

A ski area feature service layer

 icon-map-marker

The esri geocoder service

 

Construct the remote source(s)

This is the most critical piece of the whole operation and requires some consideration because you potentially have options here. The remote source needs a url to send a request each time the user types characters. Selecting the best option will result in the best performance. Here are our best options with arcgis REST services:

find

If you have a map server, find is a great option if you want to search multiple layers in the same request. I’d say if you have this option, take it.

query

If you only have a feature server, this is for you. You can either query a layer individually or query the entire feature server. We are going to query each of our feature layers individually.

suggest

Suggest is currently meant for geocoding, for now, but I suspect a locator service could be constructed to take advantage of this service. I’ll make the assumption that this is the best option because it is intended specifically for search.

You could roll your own locator service that supports suggest (ArcGIS 10.3 +). We’ll use the world geocoder and take advantage of suggest.

The code to build the campground site suggestion search engine and initialize it:

Here’s the engine setup for the esri world geocoder service. Note the searchExtent parameter. This can be used to limit the geographic area of you suggestion results. In this case it is (roughly) Washington State.

You can see that in both of these engines we set the ajax property to show the spinner before the request and remove it when the request is complete. These calls can step over each other if you have several engines but works pretty well here.

 

Add the engines and style the suggestions

Now we need to setup typeahead itself and wire up the engines and tell typeahead the properties we are using for each suggestion generated by the engines. We will also define how the suggestions will be displayed in the drop down.

First, turn the input box into a typeahead via jQuery and set some options like so

minLength is the number of characters a user types before suggestions start firing.

Next tell typeahead about the engines to use, here’s our campground setup

We’ve just told typeahead that the name of this source is ‘camp’, the displayKey is ‘name’, the source is our camp bloodhound engine adapter and set the template to use for the header (a campground icon inside a header tag).

You’ll do the same for all sources chaining them together. The whole set of sources looks like this:

Define what will happen when a user selects a suggestion

Okay, cool, we’ve got some suggestions for our users.

suggestions-ahead

Now we need to setup what will happen when one is actually selected. So we simply set up a jQuery event handler and chain it to our typeahead declaration. the event will pass the callback function the element and the selected datum (generated from the engine).

For the feature service layers we have set the datum to include the objectId (see the filter function in the bloodhound engine definition). This allows us to fetch the feature along with its’ geometry via another ajax call. We can then get attributes, zoom to it, make another call to get more info, whatever you want. In this sample we simply zoom to it and put a text label displaying the name right on the map.

For the geocoder a name and ‘magicKey’ are defined in the datum which allows us to call back to the service to retrieve the feature via a call to the find REST end point. For this one we simply zoom to the extent returned. Here’s the whole event handler:

That’s it, complete autocomplete.

You have an incredible amount of control over display via css as well. Here is what I’ve used in the sample app:

There are many more options available to you in this solution so please review the documentation for further info. I am very impressed with the flexibility of typeahead so if this setup doesn’t quite work for you I suspect there are ways to get it going.

BTW, If you are using esri-leaflet you can use the great geocoder plugin that also allows you to search via a geocoder service as well as map and feature services like we’re doing here.

Finally a shout out to Bryan McBride for his excellent mapping template, bootleaf, that I used as a starter for this solution.

The whole project is in a github repo here

https://github.com/brightrain/arcgis-autocomplete

And you can see it in action here

http://dev.brightrain.com/map-autocomplete