How to Set the Initial Zoom and Position of Geographic Maps

Create a geographic map to your liking using the leaflet map package in Displayr

1. Follow instructions on How to Make a Geographic Map in Displayr to create a map and hook up your data to the map. The example I will walk through maps the percentage of food inspections that passed in each Chicago zip code between 2010 and June 2018 (original data found here).
   
2. Select a few more settings to make the map look nice. For my map I am also selecting the following in the Object Inspector:
   • Use the leaflet map package using Chart > APPEARANCE > Map package > leaflet.
   • Only show "Pass" rates by setting Inputs > COLUMN MANIPULATIONS > Number of columns from left to show as 1.
   • Show background map for context by checking Chart > APPEARANCE > Background map.
   • Set the color of missing regions to transparent by selecting Chart > APPEARANCE > Color of NA values > More colors > white box with the red X.
   • Set the shading so that darker reds mean a lower pass rate using Chart > DATA SERIES > Color palette > Reds, dark to light.

The map below is created using the steps above.

You can't see any of the data for Chicago in the map initially. To help the viewer see where the data is, we will zoom the map into Chicago automatically for them.

How to customize the default area shown on the geographic map

You'll need four bits of information before we get started:

For the code	Description	Value in example
YourVisualizationName	The Name of your map in Dispayr. You can find this by going to Properties > GENERAL > Name	chart.5
TheLongitude	The longitude for the center of the map	-87.6298
TheLatitude	The latitude for the center of the map	41.8781
TheZoomLevel	The zoom level from 0 (the world) to 18 (street-level)	9

 

We will use this information in our R code to customize the initial appearance of the map.

1. Access the R code underlying the map Properties> R CODE
2. At the bottom of the R code, load in the leaflet R package with library(leaflet) to get access to the full set of functions to customized the leaflet map.
3. Add another line after that, to set the initial position and zoom of the map using the setView function from the leaflet R package. The syntax is as follows: YourVisualizationName <- setView(map = YourVisualizationName$htmlwidget, lng = TheLongitude, lat = TheLatitude, zoom = TheZoomLevel). For this example, this will be:
   

   [sourcecode language="r"]
   library(leaflet)
   chart.5 <- setView(chart.5$htmlwidget, lng = -87.6298, lat = 41.8781, zoom = 9)
   [/sourcecode]

   

After your map recalculates, it will now automatically be zoomed into your desired area. The final map from my example is shown below.

Tips for positioning the initial map

• You can tweak your initial zoom level by using decimals, such as 1.5.
• To find the latitude and longitude to center your map you can:
  1. Click on a blank spot on a Google map. A small window at the bottom of the screen will display the coordinates.
  2. Google "YourCity/State/Country lat long", and use coordinates from the results.
  3. Use a website such as https://www.latlong.net/ to find the coordinates.