Latest Contributions by AllanLaframboise

‎08-16-2017

Sometimes you just need to embed a "static map" in your app. For example, you might be building an enterprise application and just want to add a map to an automated email system or a reporting system to provide some additional location context. These maps are not interactive and are often referred to as "static maps". If you want to make them interactive, then you need to wrap a mapping API around them. How does it work? With the ArcGIS REST API you can fetch static maps directly from Map Services by calling Export. All you need to do is pass in a few simple parameters such as the bounding box coordinates, image size and image format, and the service will return an map image. Here's an example: https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer/export?bbox=-74.2,40.6,-73.7,41&bboxSR=4326&size=600,400&f=image‍‍‍‍‍‍‍ How do you get a map? If you don't have your own Map Services and you just need a simple map, you can just use the ArcGIS Online basemap services. Here you will find an assortment of hosted basemap services that you can export maps from. Feel free to browse all of the map services and parameters and pick the ones that best suites your needs. Simple Example Here's a simple HTML example that shows how to use the REST API to fetch a few different maps. The nicest thing about making the REST calls directly is that you aren't dependent upon a client-side library and it makes it easy to build into existing frameworks or enterprise systems. All you need to be able to do is execute an HTTP request. Enjoy! <!DOCTYPE html> <html> <head> <meta name="description" content="ArcGIS REST Export Maps"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <span> <img src="https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer/export?bbox=-74.2,40.6,-73.7,41&bboxSR=4326&size=298,200&f=image"> <img src="https://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Dark_Gray_Base/MapServer/export?bbox=-74.2,40.6,-73.7,41&bboxSR=4326&size=298,200&f=image"> </span> <img src="https://services.arcgisonline.com/arcgis/rest/services/ESRI_Imagery_World_2D/MapServer/export?bbox=-74.2,40.6,-73.7,41&bboxSR=4326&size=600,400&f=image"> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

‎08-16-2017

How to make this map 2D http://www.arcgis.com/apps/styler/index.html?webmap=default &title=Toronto Places &subtitle=Explore neighborhoods around the city &search=Toronto,CA &zoom=12 &places=Neighborhoods &bgcolor=rgb(0, 88, 123) &layout=bottom &widgetslayout=top-right &legend=top-left 3D http://www.arcgis.com/apps/styler/index.html?webscene=default &title=Toronto Places &subtitle=Explore neighborhoods around the city &search=Toronto,CA &zoom=12 &places=Neighborhoods &bgcolor=rgb(0, 88, 123) &layout=bottom &widgetslayout=top-right &legend=top-left Learn more about designing maps and apps with Styler and the new ArcGIS API for JavaScript v4.

‎08-11-2017

How to make this map http://www.arcgis.com/apps/Styler/index.html?webscene=91b46c2b162c48dba264b2190e1dbcff &title=Interesting Places in 3D &subtitle=Take a tour around the world &bgcolor=rgb(150,80,10) &opacity=.5 &theme=custom &layout=bottom &menuslides=true &activepanel=slides Learn more about designing maps and apps with Styler and the new ArcGIS API for JavaScript v4.

‎07-31-2017

How to make this map http://www.arcgis.com/apps/Styler/index.html?webscene=ba138a72546a46faa94983a4f0eceb95 &title=Lyon Tourism &subtitle=A virtual tour around town &activepanel=slides &menuslides=true &widgetslayout=bottom-left &bgcolor=transparent &textcolor=dark &layout=top-large Learn more about designing maps and apps with Styler and the new ArcGIS API for JavaScript v4.

‎07-25-2017

I think the folks in this group could answer this one better... https://community.esri.com/groups/cats

‎07-25-2017

How to make this map http://www.arcgis.com/apps/Styler/index.html?webmap=deb5cbd451ea468aa1e6cc489b448619 &title=Tour de France 2017 &subtitle=Stages and Routes &bgcolor=#fab800 &textcolor=dark &activepanel=legend Learn more about designing maps and apps with Styler and the new ArcGIS API for JavaScript v4.

‎07-18-2017

How to make this map http://www.arcgis.com/apps/Styler/index.html?webscene=default &basemap=streets-night-vector &search=San Diego, California &title=San Diego Streets at Night in 3D &zoom=14 Learn more about designing maps and apps with Styler and the new ArcGIS API for JavaScript v4.

‎07-13-2017

Create, Style, and Share With the latest release of ArcGIS Online and just in time for the UC, the Styler template got a major update. Styler is a new configurable app template that you can use to create and share 2D or 3D web map apps on-the-fly. What makes it different from other templates is that you don't need a web map or web scene to get started, and you can completely configure an application with URL parameters on-the-fly in your web browser. To get started, all you need to do is zoom to a location, change a parameter or two, and send the URL to a friend. e.g. http://www.arcgis.com/apps/Styler/index.html?webscene=default&title=Planet Earth&subtitle=Share your world! &lat=45.09823&lon=-84.67922 &zoom=6&tilt=49&heading=359&bgcolor=transparent&widgetslayout=bottom-left Share Panel - New One of the biggest enhancements to Styler was the addition of the Share panel. With the Share panel, you can style an entire map in your web browser just by adding, removing, and changing URL parameters in the window. Once you are finished, you can apply the changes and then share the URL with your friends. You can configure everything from the title, colors, layout, to the position of widgets on the map and much more. See a list of all of the configurable parameters here. Here's the url that created the map above. Give it a try! Default 2D Map http://www.arcgis.com/apps/Styler/index.html?webmap=default Default 3D Map http://www.arcgis.com/apps/Styler/index.html?webscene=default New York City Neighborhoods http://www.arcgis.com/apps/Styler/index.html?webmap=default&title=New York City Neighborhoods&basemap=streets-night-vector&lat=40.71380&lon=-74.00650&zoom=14&places=Neighborhoods&bgcolor=dark-blue Mount Everest http://www.arcgis.com/apps/Styler/index.html?webscene=default&title=Mount Everest&subtitle=Are you up for the challenge&lat=27.98908&lon=86.92537&zoom=12&tilt=79&heading=262&search=Mount Everest&widgettheme=dark&widgetslayout=bottom-left&layout=bottom Durango Trails (Web Map) http://www.arcgis.com/apps/Styler/index.html?webmap=9f91f911f58540ceaac0300c55e18fbb&title=Durango Trails&bgcolor=dark-green Durango Trails - 3D (Web Scene) http://www.arcgis.com/apps/Styler/index.html?webscene=12e3c39c017343e5b284ddffddf8cd43&title=Durango Trails - 3D&lat=37.32026&lon=-107.85935&zoom=13&tilt=71&heading=346&bgcolor=rgb(111, 74, 3)&theme=light&activepanel=legend&widgetslayout=top-right

‎07-12-2017

I'm sure you can do this with Python but if the data are stored in ArcGIS feature services, then you can use any language to make a REST API call with the appropriate spatialRelationship operator and parameters. See the layer query doc here ArcGIS REST API . Here's an example of a REST request that will return the state that intersects the given point: https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_States_Generalized/FeatureServer/0/query?where=&ob…

‎06-15-2017

As a map app developer, one of the easiest ways to improve productivity before writing a line of code is to use the ArcGIS platform tools such as the Map Viewer or the Scene Viewer. The viewers are online map editors that you can use to design maps and scenes interactively. Once created, the maps can be consumed by your custom apps. Designing maps with the viewers can save you a significant amount of time during the application development process, especially when you are in the experimental and prototype phase. For example, it's a lot easier to change, apply, and visualize map settings interactively when you are selecting basemaps, deciding the best symbols and colors to use for layers, and when you are trying to select the best fields and content to display in popups. The viewers also have built-in features like smart mapping that help you make better styling decisions based on the type of data in your map. If you are new to ArcGIS and the viewers, you might want to check out these Data and Design DevLabs to learn how to create your own maps. The best part of taking this "design a map first" approach is that once you are finished designing your map, you can save it in ArcGIS Online or Enterprise, and then use the ArcGIS APIs to load the entire map (along with all of its settings) in your app with just a few lines of code, saving you a ton of development time. Let's take a look at how to take advantage of this workflow. Step 1: Get a web map ID Web maps and web scenes are stored as items in ArcGIS Online and Enterprise. Each item has it's own unique ID e.g. 71a8b15a0383449a9a65a4f84ba76f07. To display a map in your app via code, you need the ID. If you don't have an ID, you have two choices: 1) Search in the gallery for an existing map on ArcGIS Online (there are literally thousands to choose from); or 2) Create a new one from scratch with the Map Viewer or Scene Viewer and store it in ArcGIS Online. Or if you want, you can use the map and ID below. http://www.arcgis.com/home/webmap/viewer.html?webmap=71a8b15a0383449a9a65a4f84ba76f07 This web map has been designed with the World Vector Tile Topographic basemap, an overlay of World Hillshade 50% with transparency, and with a trails layer on top that have been classified by difficulty. The popups have also been customized to display textual information as well as some field data. You can view the map or make your own copy of this one here. Step 2: Load the web map Now that you have a map ID, you can use the ArcGIS API of your choice to load and display the map. With the ID, the ArcGIS APIs know how to access the item (PortalItem) on ArcGIS Online. The item is stored as a JSON structure based on the web map and web scene specification. In this case, we'll just use one of the samples from the ArcGIS API for JavaScript and the ID above to load the map. You should notice the that map has all of the same settings and behavior as the map in the viewer. Feel free to copy the jsBin and give it a try. Step 3: Update the web map (and app) Now here's the best part! Since the app is referencing the item ID on ArcGIS Online, if you go back to the viewer and update the map, and then refresh your app, the changes will be automatically applied to your application as well - no code updates required! This is a very powerful way to "remotely" edit the map in your app without actually changing any code. In this case we just changed the basemap in the Map Viewer to Satellite, saved it, and then re-ran the jsBin. Feel free to try to update and save your map and then refresh your web map. Summary If you are not already using the viewers to design your maps and scenes for your apps, then be sure to give this technique a try. It's a lot easier to experiment with color and symbol changes in a viewer than it is through code. This is one of the most effective ways to optimize your development work-flow with the ArcGIS platform.

‎04-25-2017

Hi Makiko. You should be using just Calcite Maps (bootstrap) or Calcite Web, not both. They are both similar frameworks and offer much of the same functionality, but shouldn't be mixed. Let me know if I missed something.

‎03-16-2017

Check out the new ArcGIS DevLabs. They walk you through the Data - Design - Develop pattern to using the platform to build apps - fast!

‎12-23-2014

Good point. There's really so much more you can do but I had to skip a lot of it to keep it short. For those interested, here's more doc on configuring fields for pop-ups. Thanks!

‎12-22-2014

Data 5% Design 70% Code 25% Hello fellow geo developers! In this post we’ll look at how to design and build your first custom web mapping app with the ArcGIS platform. And yes, we are going to build the whole thing from scratch, but don't worry, the whole process shouldn’t take more than about 20-30 minutes. If you just want to jump right to the finished app, you can view it here. Custom Web Mapping Apps There are a variety of different ways you can build custom web mapping apps with ArcGIS, but one of the easiest ways is to use ArcGIS Online to find data, use the Map Viewer to create and style a map, and then use the ArcGIS API for JavaScript to build the application (see below). This process doesn’t require any installed software and the only thing you need is free ArcGIS Developer account so you can save your maps. Designing Maps and Apps One of most important parts of building a mapping app is designing a good map, so that is something we will focus on. This means creating a map that has cartographic symbols and elements that are meaningful, color correct, and most important, are usable at different zoom levels. The map (and app) for this scenario will show bicycle paths, lanes, designated streets and parking locations around the City of Portland. In this how-to you will... Step 1: Use ArcGIS Online and the ArcGIS Map Viewer to add some layers to a map. Step 2: Use the ArcGIS Map Viewer to design a map by changing symbols, setting visibility ranges and configuring popups. Step 3: Build a custom web app with the ArcGIS API for JavaScript to display the map. NOTE: If you are new to ArcGIS, please review the getting started article before proceeding. Step 1: Add data to your map The first thing we need to do is add some data to the map. Since ArcGIS Online contains a ton of maps and layers that people have already published, we’ll just search for existing bike-related feature layers for Portland and add them to our map. A feature layer is just a vector layer that can be styled easily with the Map Viewer. Learn more about feature layers here. TIP: If you don’t already have a free ArcGIS Developer or a ArcGIS Organization account, you’ll need to sign up for one now so you can save your map. If you don’t have an account, go to ArcGIS for Developers and sign up for one now. Create a new map Let’s start by searching for a layer and then creating a new map. Go to ArcGIS Online > Gallery. Click Search (icon) > Portland Bike Parking (Feature Layer by al_geodev). Notice there are a few different people who have published parking layers. Make sure you use the “Bike Parking” layer published by al_geodev. Click Bike Parking > Open > Add Layer to new Map. This opens the Map Viewer. Save the map Before we get too far, let’s login and save our map. Click Sign In and log into your ArcGIS account. Click Save and fill in the following fields: Title: Portland Bike Map Tags: Portland, Bike, Map Summary: Map to help cyclists get around Save in folder: <your name> Click Save Map. Add more layers Now let’s add a few more layers that will help cyclists identify different ways to get around town. Click Add > Search for Layers and add the following layers to the map. In: ArcGIS Online (Make sure this is checked!) Find: “Portland Bike Routes” > Go > Add Find: “Portland Bike Paths” > Go > Add Find: “Light Rail Lines” > Go > Add Find: “Light Rail Stops” > Go > Add Click Done Adding Layers. Click Add > Search for layers again. Find: “Portland Bike Paths” > Go > Add Yes, add the same layer twice! You may have to close the window and re-open to add the layer again. Click Bike Parking > Drop-Down Arrow Click Move Down until the Bike Paths layers are next to one anther. Save the map. Your map should look something like this. Yikes! These are just the default symbols saved each feature service. We need to override these in our map. Step 2: Design and style your map Now that we have some feature layers in our map we can use the Map Viewer to style them. This is a bit of a tedious process, but creating nice cartographic symbols is probably the most important step to make your map (and app) usable. In this step, you will set the basemap, symbols, viewing scales, filters and popups. Learn more about creating and styling maps here. If you already know how to design and author maps you can jump right to the finished map here. Set the Basemap Click Basemap > Dark Gray Canvas. Much better! Now zoom in a couple of times and center on downtown Portland. Save the map. TIP: The easiest way to set layer properties is to use the “Drop-Down Arrow” for each layer (see below). With this menu you can configure all aspects of the layer including symbols, pop-ups, and visibility. You will use this extensively in the following steps. Reorder the layers Since bike parking is more important than rail lines, let’s change the order the layers draw. Click Bike Parking > Drop-Down Arrow Click Move Up until the layer is at the top. Click Light Rail Lines > Drop-Down Arrow Click Move Down until the layer is at the bottom. Save the map. Style the Bike Parking layer You may have noticed that there are thousands of bike parking locations, so let’s improve the cartographic symbols by using a size renderer to group parking spots by the number of parking spaces available. We’ll also configure the popup to show this information too. Learn more about changing symbols here. Click Bike Parking > Drop-Down Arrow. Click Change Symbols > Size and set the following values: Use: Size To show: NUMSPACES By: Natural Breaks With: 5 Classes Click > Options > Change All Symbols Start size: 4px End size: 28px Color: Cornflower Blue Transparency: 75% Outline Color: Light Sky Blue Outline Width: 1px Click Done > Done Changing Symbols. Save the map. Now style the popup to show the number of parking spaces available in each area. Click Bike Parking > Drop-Down Arrow > Configure Popup and set the following: Pop-up Title: Bike Parking Click Configure Attributes Remove all checkboxes Check NUMSPACES Format: 0 decimal places Click Ok > Save Pop-up. Save the map. Zoom in and center the map on Portland downtown. Test the pop-up. Style the Light Rail Stops and Light Rail Lines layers Let’s format the popups for these layers to show the station name, type of train and line. Click Light Rail Stops > Drop-down Arrow > Configure Pop-up Pop-up Title: Rail Stop Click Configure Attributes and set the following: Remove all checkboxes Check STATION Check TYPE Check LINE Click Ok > Save Pop-up. Click Light Rail Lines > Drop-down Arrow > Remove Pop-up. Save the map. Test the popup. Style the Bike Paths layers Now let’s set the symbol and popup for the Bike Paths layers so we can easily identify those features. We will need to use a unique renderer to set styles based on attributes for bike paths and lanes. We’ll also use some advanced styling techniques where the first layer will be the inner layer and will represent the different types of paths and lanes and and the second layer will represent the outer layer to create a sharper edge. Click the first Bike Paths > Drop-Down Arrow Click Change Symbols > Change Symbol > Use and set the following: Use: Unique Symbols To show: BIKEMODE Click the Bike boulevard symbol Color: Pale Turquoise Pattern: Solid Transparency: 25% Width: 3px Done Click the Bike lane symbol Color: Light Sky Blue Pattern: Solid Transparency: 25% Width: 3px Done Click the Local multi-use path symbol Color: Dark Cyan Pattern: Solid Transparency: 25% Width: 3px Done Click the Regional multi-use symbol Lane symbol Color: Dark Cyan Pattern: Solid Transparency: 25% Width: 3px Done Click Done Changing Symbols. Now let's configure the pop-up. Click the first Bike Paths > Drop-Down Arrow > Configure Pop-up Pop-up Title: Lanes and Paths Configure Attributes > Uncheck all fields and just leave these on: STREETNAME BIKEMODE Click Ok > Save Pop-up. Click the second Bike Paths > Drop-Down Arrow > Remove Popup-up. Click the second Bike Paths > Drop-Down Arrow > Hide in Legend. Save the map. Test the symbols and pop-us by clicking on the bike paths. Also check the legend to make sure you only have one Bike Paths layer. Your map should look something like this. Style the Bike Routes layer Now let’s show the street name and bike mode for this layer. The bike mode tells us whether the street is high, moderate or low traffic so this will be handy when planning routes. Click the Bike Routes > Drop-Down Arrow > Configure Pop-up Pop-up Title: Street Route Configure Attributes > Uncheck all fields and just leave these on: STREETNAME BIKEMODE Click Ok > Save Pop-up. Save the map. Test the pop-up. Remove the Light Rail Lines layer pop-ups We don’t need the pop-ups for this layer so let’s remove it. Click Light Rail Lines > Drop-down Arrow > Remove Pop-up. Save the map. Set the visibility range for each layer Now that we have our layers styled, let’s declutter things a little by turning layers on and off as we zoom in and out of the map. We can accomplish this by setting each layer’s visibility range. Bike Parking layer Zoom in fairly close to downtown so that the scale bar shows about 0.4 miles. Click Bike Parking > Drop-down Arrow > Set Visibility Range: In Closer than: 1:36,112 > Use Current NOTE: Just click on the map to dismiss the window. Zoom out one more level. Your scale bar should now show 1 mile. Click Light Rail Stops > Drop-down Arrow > Set Visibility Range: In Closer than: 1:72,224 > Use Current Click on the map to dismiss. Light Rail Stops layer Zoom out one more level. Your scale bar should now show 2 miles. Skip down to Bike Routes. Click Bike Routes > Drop-down Arrow > Set Visibility Range: In Closer than: 1:144,448 > Use Current Click on the map to dismiss. Bike Paths (both layers) Zoom out one more level. Your scale bar should show 3 miles. For both Bike Paths click Drop-down Arrow > Set Visibility Range: In Closer than: 1:288,896 > Use Current Click on the map to dismiss. Light Rail Lines layer Zoom out one more level. Your scale bar should show 6 miles. Click Light Rail Lines > Drop-down Arrow > Set Visibility Range: In Closer than: 1:577,791 > Use Current Save the map. Try zooming in and out to test the preset zoom levels. Add a label to the map Using Map Notes you can add text and shapes to your map interactively. Let’s add a label now. Click > Add > Map Notes > Create. Click on Map Notes - Text > Text Click on the right corner of the map > type “Portland Bike Map”. Double-click on the label to and change the color to light grey. Save the map. Now test drive the entire map to make sure the zoom levels, pop-ups and symbols are how you want them. TIP: At this point, you could deploy the entire map as a pre-built template or a Web AppBuilder app without writing code by selecting Share > Make a web application. We’ll learn how to do this in another tutorial. In our case however, we are going to write a custom JavaScript app from scratch. Step 3: Build a custom JavaScript app The last step is to use the ArcGIS API for JavaScript to build an app that uses your map. If you are new to the JavaScript API, it’s probably a good idea to review the documentation first. If you want to fast forward to the finished app, go here. TIP: Every map that you create and save with the Map Viewer is stored in ArcGIS Online and has a unique ID. This ID is stored as an item in your account. When the map is loaded in the Map Viewer, it’s easy to identify the ID in the URL in your browser. The great thing about this ID is that you can reference it directly in any custom app that you build. The advantage of doing this is the map will maintain all of its configuration settings as you saved them. For example, all of the map layers, symbols, colors, popup and filter settings will be honored. Find your map ID Identify the ID for your map in your web browser. For example: http://edn.maps.arcgis.com/home/webmap/viewer.html?webmap=8e42e164d4174da09f61fe0d3f206641 Build your app Now let’s write the code to load our map. We’ll use three DIV elements to represent different items stored in the map: title, legend, and map. We need to extract each item and then set their location and style on the web page. We'll also use some nice fonts (fast fonts) and a little CSS styling to finish off the rest of the app. NOTE: This code extends an existing JavaScript tutorial, so if you want more details about the code, go here. Go to JSBin to create a new application. Copy and paste the code below. <!DOCTYPE html> <html> <head> <title>Design a Web Mapping App</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">  <link type="text/css" rel="stylesheet" href="https://community.esri.com//fast.fonts.net/cssapi/3706abc4-0756-424b-b07b-1748122f85d8.css">  <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.11/esri/css/esri.css"> <style> html,body,#mapDiv { padding: 0; margin: 0; height: 100%; overflow: hidden; } #mapDiv { position: absolute !important; left: 250px; right: 0; } #sidebar { position: absolute !important; top: 0; bottom: 0; width: 250px; overflow: hidden; color: #c3c3c3; background-color: black; font-family: "Avenir LT W01 35 Light", Arial, Helvetica, sans-serif; } #titleDiv { position: absolute !important; top: 0; left: 0; right: 0; height: 30px; padding: 20px; border-bottom: rgba(255, 255, 255, 0.5) 1px solid; font-size: 25px; } #legendDiv { position: absolute !important; top: 90px; bottom: 0; left: 0; right: -15px; padding: 0 0 25px 25px; overflow: auto; } .esriLegendServiceLabel { font-weight: normal; } .esriScalebarLabel { color: white; font-weight: normal; font-family: "Avenir LT W01 35 Light", Arial, Helvetica, sans-serif; } .esriAttribution { color: #ddd; background-color: transparent; font-family: "Avenir LT W01 35 Light", Arial, Helvetica, sans-serif; } </style>  <script src="http://js.arcgis.com/3.12/"></script> <script> require(["esri/map", "esri/arcgis/utils", "esri/dijit/Legend", "esri/dijit/Scalebar", "dojo/domReady!" ], function (Map, arcgisUtils, Legend, Scalebar) { // Create the map - Replace the map ID with your own map ID! arcgisUtils.createMap("8e42e164d4174da09f61fe0d3f206641", "mapDiv").then(function (response) { // Get the map var map = response.map; // Show the title var title = document.getElementById("titleDiv"); title.innerHTML = response.itemInfo.item.title; // Show scalebar var scalebar = new Scalebar({ map: response.map, scalebarUnit: "english" }); // Show the legend var legend = new Legend({ map: map, layerInfos: (arcgisUtils.getLegendLayers(response)) }, "legendDiv"); legend.startup(); }); }); </script> </head> <body>  <div id="mapDiv"></div> <div id="sidebar"> <div id="titleDiv"></div> <div id="legendDiv"></div> </div> </body> </html> 3. Now replace the map ID below with the ID for your map. // Create the map - Replace the map ID with your own map ID! arcgisUtils.createMap(<your map ID goes here>, "mapDiv").then(function (response) { Run the app and presto! You have your first custom JavaScript web app! Conclusion So there you have it - your first custom web mapping app in 20-30 minutes! In the end, we learned how to find layers in ArcGIS Online, use the Map Viewer to style map layers, and then use the map in a simple JavaScript app. Be sure to keep your eyes peeled for the next GeoDev tutorial. If you have feedback, feel free to tweet @AL_Laframboise or @EsriGeoDev and be sure to use #geodev! Happy Holidays What’s next? GeoDev How-to: Getting Started with the ArcGIS Platform for Developers GeoDev How-to: Design your first custom web mapping app with the ArcGIS Platform GeoDev How-to: Perform spatial analyses for your mapping app [coming soon] ...

‎12-10-2014

There’s a lot of cool things‌ available with the December release of ArcGIS Online, but if you are a dev, here’s something you are not going to want to miss: The enhanced interop (data) support for GeoJSON! At this release, you can now import, export and access data from ArcGIS Online hosted feature services via GeoJSON. Here’s what you can do: Import GeoJSON: Using the Add Item button you can simply import GeoJSON to create a new ArcGIS Online hosted feature service. Export GeoJSON: For all feature services, you can also export features out as GeoJSON. Access Directly: And lastly, you can access all hosted feature services as GeoJSON simply by adding the f=geojson query parameter. You can even change the outSR if you happen to need the GeoJSON in a different spatial reference. Accessing GeoJSON from a Feature Services http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/Portland_Coffee_Shops/FeatureServer/0/query?where=1=1&outFields=*&outSR=4326&f=geojson Accessing GeoJSON from other Applications View it live <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=1024, user-scalable=no"> <style> html { height: 100% } body { height: 100%; margin: 0; padding: 0;} #map{ height: 100% } </style> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />  <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script> <script type="text/javascript" src="https://rawgit.com/calvinmetcalf/leaflet-ajax/master/dist/leaflet.ajax.js"></script> <title>Leaflet AJAX</title> </head> <body> <div id="map"></div> <script type="text/javascript"> var m = L.map('map').setView([45.52, -122.6819], 13); var osmDataAttr = 'Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'; var osm = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{attribution:osmDataAttr}); osm.addTo(m); var geojson = new L.GeoJSON.AJAX("http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/Portland_Coffee_Shops/FeatureServer/0/query?where=1%3D1&outFields=*&outSR=4326&f=geojson", {}); geojson.addTo(m); </script> </body> </html> NOTE: Special thanks to Calvin Metcalf's L.GeoJSON.AJAX plug-in ‌that gives you direct access GeoJSON resources. So there you have it. But what about ArcGIS Server? Well, the team says it’s coming soon, so keep your eyes peeled! Happy interoping!

Online Status	Offline
Date Last Visited	‎10-14-2025 02:38 PM

My Ideas

Latest Contributions by AllanLaframboise

How to put a static map in your app

Styler Map of the Week - Toronto Places (2D & 3D)

Styler Map of the Week - Interesting places in 3D

Styler Map of the Week - Lyon Tourism

Re: How to change onClick (pointerDown) to onLoad for side panel in Crowdsource Reporter App?

Styler Map of the Week - Tour de France

Styler Map of the Week - San Diego Streets at Night

Styler - Design and Share 2D and 3D Maps with a URL

Re: Best way to return whether a feature falls within a polygon?

Designing Maps Before Building Apps

Re: Calcite Maps: Accordion not working

How to build an ArcGIS app in 15 minutes

Re: GeoDev How-to: Design your first custom web mapping app with the ArcGIS Platform

GeoDev How-to: Design your first custom web mapping app with the ArcGIS Platform

New GeoJSON Capabilities for Developers

Re: Calcite Maps: Accordion not working

Add support for importing gpx files in ArcGIS Onli...

Re: How come arbitrary (tile) lines are appearing ...

Re: Vector Tile Popups/Select

Re: Edit Pattern in Vector Tile Style Editor?

Web AppBuilder Custom Widgets