DEV Community

Courtney Yatteau
Courtney Yatteau

Posted on

Six Steps to Create a Brewery Map Online

Happy Drink Beer Day! 🍺

Hi there! If you clicked on this article, I assume you like beer (duh!) and you probably also fancy creating things on the web. Today I’m going to show you just how easy it is to create your own Brewery Map online. Afterward, you’ll be able to print the map as a PDF, share the map with others online, or find details about how to add your map to a webpage. Let’s get started!

San Diego Breweries Map

Step 1 — Start with a JSON File
You’ll first start by finding a JSON file containing information about breweries. Don’t worry if you’ve never done this before, it’s quite simple! First, navigate to an API containing brewery information. I recommend using this one. Next, you can read the documentation if you’d like, or simply use this URL and replace the san_diego portion with the city you’d like to use. This URL takes you to a JSON file that you’ll need in the next step.

Step 2 — JSON to CSV
There are many file formats that can be used when making an online map. I’m going to use CSV, as it’s a compact format. To convert to CSV, navigate to this page. Then, paste the JSON URL you created in the white input box. After converting, you’ll see a blue download CSV button to click. After pressing this, you’ll have the breweries list in your Downloads folder.

JSON to CSV Image

Step 3 — Get an ArcGIS Free Account
To host your data online, you’ll need to create a free (no credit card required!) ArcGIS Developer Account here.

Step 4 — Import the Data
Once inside of your ArcGIS Developer account, go to the Layers tab under the Dashboard. Next, select the purple Import data button at the top left. Select your CSV file and click Upload file.

ArcGIS Developers Layers Dashboard
Import Data Button

Step 5 — Check Data & Make Layer
Now, ensure the CSV columns of latitude and longitude are correct. Click next and also ensure all other data types are correct. Click next once again and give a title to your breweries layer (i.e. San Diego Breweries). Click Create Layer.

Step 6 — View Map & Beyond
You should now see a small map of the breweries but we’ll open this in a larger screen. Before doing so, make sure to press Settings and make the Layer access public for anyone to access. Going back to the small map in Overview, press the “Open in” button in the top right of the small map on the screen and select MapView (2D). You should see a map of the breweries in the city you chose! You can now do many things with this map including print (from the left dark gray navigation menu), share the URL with friends or learn how to use this with an embedded map in a webpage here.

Cheers

Top comments (0)