Create a map in LocalFocus

With LocalFocus Maps you can create an informative map in a few clicks that you can easily share.

Getting started with Maps in LocalFocus

• 1 Add map layer
  • 1.1 When do I draw individual elements and when do I use a table?
  • 1.2 How do I add my table to the chart module?
  • 1.3 How do I link my data via a Google Drive spreadsheet (and what are the benefits)?
  • 1.4 Which map layer should I use for my dataset?
  • 1.5 How do I rename a map layer?
• 2 Card with icons
  • 2.1 When do I use the map layer 'icons'?
  • 2.2 How do I make a map with icons?
  • 2.3 How do I style the icons on the map?
  • 2.4 How do I make icons on the map different colors?
• 3 Map of proportional circles
  • 3.1 When do I use the 'proportional circles' map layer?
  • 3.2 How do I create a map with proportional circles?
  • 3.3 How do I style the circles on the map?
• 4 Map with areas and numbers
  • 4.1 When do I use the map layer 'area map with numbers'?
  • 4.2 How do I make a surface map with numbers?
  • 4.3 How do I adjust the scale?
  • 4.4 How do I format the unit (percentage, currency, etc.) of the legend?
  • 4.5 Which area subdivisions are available for the area map?
• 5 Map with areas and categories
  • 5.1 When do I use the map layer 'area map with categories'?
  • 5.2 How do you make a surface map with categories?
  • 5.3 How do I style my area map with categories?
  • 5.4 Which area subdivisions are available for the area map?
• 6 Card with text labels
  • 6.1 When do I use the map layer text labels?
  • 6.2 How do I make a card with text labels?
  • 6.3 How do I style a card with text labels?
• 7 Format card
  • 7.1 How do I make my own legend?
  • 7.2 How do I edit the automatically generated legend?
  • 7.3 How do I add a search screen to my map?
  • 7.4 What does 'Make area map fit within screen?'
  • 7.5 How do I add a tooltip to the map?
  • 7.6 How do I add a pop-up to the map?
  • 7.7 How do I add a URL link to a popup screen?
  • 7.8 Compose a popup in HTML mode
• 8 Additional card options
  • 8.1 How do I create a drop-down menu for my card to switch between different years?
  • 8.2 How do I add districts or neighborhoods to the map?
  • 8.3 How do I add postcode areas to the map?
• 9 Add your own geographic files (shapes)
  • 9.1 How do I add my own geographic files to the map?
  • 9.2 How do I add circles with a radius around a specific point to the map?
• 10 Accessibility
  • 10.1 What is the accessibility mode?
  • 10.2 How do I open the accessibility mode?
  • 10.3 Can I disable the accessibility mode?
  • 10.4 How to make icons on the map accessibile?
  • 10.5 Can I navigate the map with my arrow keys?

1 Add map layer

Each map visualization starts with adding a map layer. You can choose to draw individual elements directly on the map or to use numbers from a table. You can also easily combine different map layers.

1.1 When do I draw individual elements and when do I use a table?

• You draw separate elements if you want to put a point on the map very quickly. Think of a major traffic accident, or the route of the Canal Parade in Amsterdam.
• You use a table when you are dealing with more than a handful of data. This way you keep an overview and save time. You can add and style all points at once.

1.2 How do I add my table to the chart module?

Do you already have a data file that you want to work with? Then you can add the table to the map module in two ways: 'copy and paste' or link via a Google Drive spreadsheet (see next question). If you want a simple and fast way, copy-paste is a good option.

These are the steps:

• Make sure your data is neatly presented in a table, remove titles, citation and empty rows.

• You then copy and paste this table into the map module, after you have chosen which type of map layer you use.

1.3 How do I link my data via a Google Drive spreadsheet (and what are the benefits)?

Do you want to be able to easily adjust the figures after making your data visualization? Even if it has already been published online? Then you can link your data liberalization to a Google Drive spreadsheet. This link allows you to update the data of published widgets without having to use an embed code again. This is very useful if you often want to add new numbers or correct a typo.

These are the steps:

• Put your table of data in a Google Drive spreadsheet if you haven't already done so.

• In your Google Drive spreadsheet, click the 'Share' button at the top right. A screen with sharing options appears.

• In the bottom block under 'Get link' it says Change to 'everyone with link'. Click on this. This ensures that anyone with the link from the page can view your Google Drive spreadsheet. Make sure that 'Reader' is selected in the right drop-down menu (and not 'Editor' or 'Respond').

• You can now copy the link that appears to your project in LocalFocus.

• After you have pasted the link, your data will be visualized immediately!

If you adjust grades in the Google Drive spreadsheet, your graphic will be updated automatically, even if your graphic has already been published. Note: it sometimes takes a few minutes before you see the changes.

1.4 Which map layer should I use for my dataset?

Each dataset is different and requires a different type of map. You have to decide which card shape to use with the data you have. With the map module you can add five different map layers based on a table. These can of course also be combined:

1. icons (you put individual points on the map)
2. proportional circles (the greater the number, the bigger the circle)
3. area map with figures (compare figures for different areas)
4. area map with categories (compare categories of different areas)
5. text labels

In the following chapters we explain when to use which option and how to make such a map.

1.5 How do I rename a map layer?

If you work with multiple map layers, it can be useful to give the different layers a title. You do this by clicking on the cogwheel at the top right of the map layer in the overview. Then click on 'Rename map layer'. A panel will now appear where you can change the name of the layer. Click on the cross to close the panel again.

TODO:: AFBEELDING TOEVOEGEN

2 Card with icons

2.1 When do I use the map layer 'icons'?

Do you want to show multiple separate locations on the map? Then you use the option 'icons'. You can style the labels yourself. Consider, for example, reports of car fires, places where bombs from World War II have been found, or locations of monuments that receive subsidies. For example, it looks like this:

2.2 How do I make a map with icons?

To make a map with icons you need a table with coordinates. A coordinate is made up of a longitude (longitude) and a latitude (latitude) or an X value and a Y value. For example, the table is structured as in the example below:

In the third column you see the 'latitude' and in the fourth column the 'longtitude'. Usually the chart module recognizes which column the coordinates are in. The points are immediately visible on the map. Is this not the case? Then click on the icon in the first line of the coordinate columns, and check if the correct option is checked.

When you put a lot of points on the map, we recommend activating clusters. For example, when zooming out, points that are close to each other are merged. This makes the map faster and makes it easier for users to navigate. Click on 'Cluster layout' in the 'Map layers' tab to tick 'activate'.

2.3 How do I style the icons on the map?

You can adjust both the 'normal' icons and the cluster icons. You do this by clicking on 'Layout icons' or 'Layout clusters' in the 'Map layers' tab. A screen will appear in which you can adjust the layout.

2.4 How do I make icons on the map different colors?

Do you have different categories that you want to show on the map? Then you can give each icon a different color. Click on '... from table' in the 'Map layers' tab and tick 'layout icons' in the appropriate column of your table. You can then format each category separately by clicking on the individual categories.

3 Map of proportional circles

3.1 When do I use the 'proportional circles' map layer?

Do you want to put absolute numbers on the map? Then use the 'proportional circles' option. This is how you make a 'bulb map'. The larger the circle, the higher the number. Consider, for example, the number of sightings of crayfish per municipality, or the number of train travelers per station. For example, it looks like this:

The bottom layer of this map shows the Dutch municipalities and the railway network. So three different map layers have been combined. Incidentally, this is already possible in a few clicks, as the railways and municipalities are already ready in the platform. See the chapter 'Area map with categories' for this.

3.2 How do I create a map with proportional circles?

To create a map with proportional circles, you need a coordinate for each location of a circle. In the case of the example above, that's the location of each train station. In addition, you must tick in the table which column determines the size of the circle. For example, the table is structured like this:

3.3 How do I style the circles on the map?

You do this by clicking on 'Format circles' on the left in the 'Map layers' tab. In the screen that appears you can adjust the layout.

4 Map with areas and numbers

4.1 When do I use the map layer 'area map with numbers'?

Do you want to put figures on the map and compare different areas? Then use the option 'area map with numbers'. This way you create an informative map that shows at a glance which areas stand out. For example, the municipalities with the most traffic fines per ten thousand inhabitants. Or Amsterdam neighborhoods with the most 'petrified' gardens, as in the example below.

4.2 How do I make a surface map with numbers?

First you choose the area layout you need. We have already prepared many different types of areas for you: from the care office regions in the Netherlands to the provinces of Burkina Faso. View all area plans here.

In the example of the gardens in Amsterdam above, you choose, for example, the Netherlands> District, neighborhood and zip code> Districts by municipality> Amsterdam.

The map module immediately adds a column with all districts. You can choose to manually add your grades, or to clear the column and paste your own data set. Make sure that your neighborhood names are written in the same way, otherwise they will not be recognized.

4.3 How do I adjust the scale?

The chart module automatically scales. Do you want a different distribution or different colors? Click on 'Layout areas' in the 'Map layers' tab and activate 'custom scaling'. You can choose how many colors you want to show on the map. Do you want to use colors other than blue or red? You can if you look up the hex color codes. For example, take a look at colorbrewer2.org

4.4 How do I format the unit (percentage, currency, etc.) of the legend?

You must of course clearly indicate in the legend what grade you have put on the map. This can be a percentage or, for example, an amount of money in euros. Click on 'Layout areas' in the 'Map layers' tab. You can then adjust the following:

• the 'prefix' that comes before the number (e.g. €)
• the 'suffix' that comes after the number (e.g.%)
• the unit, with which you describe what number you have put on the card (eg 'average income 2018 (x 10,000))' The unit will be placed above the legend, try to keep the text short.

4.5 Which area subdivisions are available for the area map?

Here you will find a list with all area maps available in the map module.

5 Map with areas and categories

5.1 When do I use the map layer 'area map with categories'?

Do you want to show different categories on the map? Then you go for this option. We made a map ourselves, which shows per municipality whether the average distance to the library has increased, decreased or remained the same, because new buildings were added or disappeared.

5.2 How do you make a surface map with categories?

Just as with the area map with numbers, you first choose the area division that you need. View all area plans that LocalFocus supports here.

Then you add your table with data. Did this succeed? Then click on the icon in the first line of the column with the categories in your table and tick 'formatting areas'.

5.3 How do I style my area map with categories?

After you have completed the previous step, you will see different colors on the map. You can adjust these by clicking on the different categories:

You can use the automatically generated legend if you want to add a legend yourself - for example because you want to change it slightly - tick the 'hide legend' box.

5.4 Which area subdivisions are available for the area map?

Here you will find a list with all area maps available in the map module.

6 Card with text labels

6.1 When do I use the map layer text labels?

With this option you put small text labels on the card. You do this, for example, because you want to highlight or clarify certain points on the map. For example, in the map below about people who walk on the highway, we have labeled the most important highways:

6.2 How do I make a card with text labels?

You need a file with coordinates for this, because this is how the location of each label is determined. The coordinates consist of a latitude and longitude or an x ​​and y value. For example, the table is structured like this:

6.3 How do I style a card with text labels?

When you have added the table and all labels are in the right place, you can format it. You do this by clicking on 'Format labels' to the left of the card. In the screen that opens you can adjust the color and size.

7 Format card

7.1 How do I make my own legend?

In the legend at the top of the map you can enter extra information to tell you what you see on the map. Such as a description of the categories you have mapped:

Here's how to make a legend:

1. Click on 'Legend' in the 'Map options' tab.
2. Then click on 'Add legend item'.
3. Enter the description in the text field. Keep it concise.
4. Click on the icon to edit it.
5. You can combine different legend items.
6. Click on a legend item and hold down the cursor to scroll.

7.2 How do I edit the automatically generated legend?

The labels and order of the automatic legend are based on how your categories are written in the dataset and in what order they appear in the column.

If you want to adjust the labels or order, you have two options. You can of course adjust your dataset and upload it again, but it is easier to add a manual legend yourself. This then replaces the automatic legend. If you go for this option, you must first hide the automatic legend, you do this like this:

1. Click on '... from table' in the 'Map layers' tab to open the map layer table.
2. Open the settings of the column containing the categories by clicking on the icon in the first row.
3. Under 'Format areas' it says 'Hide in legend', check this.
4. See question 7.1 for how to add a legend yourself.

7.3 How do I add a search screen to my map?

A search screen in the map can help visitors quickly navigate to a location (e.g. a country, town, or address), but you can also search for features other than location data.

Here's how to add a search screen:

1. Click on 'from table' in the 'Map layers' tab.
2. Open the settings of the column containing the locations you want to search for.
3. Check 'Search by'.
4. Click on 'Edit title and other labels' in the 'Card options' tab.
5. Enter a text at 'Text in search field' (eg "Search municipality ..")

7.4 What does 'Make area map fit within screen?'

This option ensures that the areas of your area map are neatly visible in the middle of your PC/phone/tablet screen. Do you want to zoom in on a smaller area of ​​the area map or show a larger area? Then you uncheck this option.

7.5 How do I add a tooltip to the map?

The tooltip is the compact text that appears when you move the mouse over a region on the map, as in the map about house prices below:

To add or edit a tooltip, click on 'Edit tooltip' in the map layer from the overview in the 'Map layers' tab.

TODO:: AFBEELDING BIJWERKEN

Select the columns from the table that you want to display in the text of the tooltip. In the example above, we show the average sales price in 2019 for each municipality.

7.6 How do I add a pop-up to the map?

The pop-up is a text screen that opens when you click on a region in the map. Here you can enter relevant information from your table that you cannot show on the map.

To add or edit a pop-up, click on 'Edit pop-up' in the map layer from the overview in the 'Map layers' tab.

TODO:: AFBEELDING BIJWERKEN

Select the columns from the table that you want to display in the text of the pop-up. Bullets and text formatting keep the information organized.

7.7 How do I add a URL link to a popup screen?

1. First make sure you have created a column in your dataset with all the links you want to show. For example, in the example below we have looked up the Wikipedia page of the cities and put it in the column with the heading 'Link'.

2. Open the popup editor and click on the button labeled "Link". You will see{{Link :: 4}}. Write down or copy this and delete the text.

3. Type the sentence you want to link to. For example "Click here for more information". Select the wordsClick hereand click the left URL button (circled in red).

4. Paste or type {{Link :: 4}} into the screen and press OK. The words 'Click here' now link for each city to the corresponding Wikipedia page.

7.8 Compose a popup in HTML mode

Do you know the basics of HTML? Then you can also compose popups in 'HTML mode'. You then write an HTML template yourself. LocalFocus only allows certain HTML tags and attributes, but it does give you more freedom.

You can use the following tags:

p,span, small,div, h1,h2, h3,h4, h5,h6, ul,ol, li,strong, b,i, br,a, img,table, tr,td, hr,center

You can use attributes with the tags below:

• a ->href (use https-urls)
• img ->src (use https-urls), width (e.g.100px or 100%), height (e.g.100px or 100%)
• table ->width (eg 100px or100%)

You can also use hyperlinks from your dataset in the HTML templates. For example a link from column 4:

<a href="**************************> Preview </a>

Or a link to an image from column 5:

<img src =" {{Logo :: 5}} "/>

8 Additional card options

8.1 How do I create a drop-down menu for my card to switch between different years?

With a drop-down menu, a reader can, for example, view the figures of another year on the card, or switch between crime statistics of men and women on the card. To make such a drop-down menu, your table does need the right structure. In many cases your table will look like the version on the left. However, to add a drop-down menu to a map you need the right structure. Here you will find the table used.

We have built in a button that does that automatically for you. This "unpivot" button ensures that data that is in columns next to each other is put one below the other in rows.

In the platform this function works like this:

1. Create a new map layer, add the table and click "unpivot"

2. Indicate which columns you want to place under each other. In this case, those are the two years that we are going to put in a drop-down menu. Click on "Submit". Your table has been converted.
3. Give the columns a meaningful name. Click on the gear at the column with values ​​and check "Color areas".

4. Go to the column you want to put in the dropdown menu. Click on the cogwheel, check "Dropdown" and - in the case of years - also check 'one choice'.
5. Then you have the map below with dropdown menu.

8.2 How do I add districts or neighborhoods to the map?

We are happy to show you that. We create the map of Almere below in six quick steps. The size of the garden area that has become petrified has been investigated for each district. Would you like to practice with this example yourself? Use this table.

1. Add a new map layer. In this case, choose "Area map with numbers", because you want to show percentages on the map.

2. LocalFocus then asks which area division you want to use. Select "Netherlands"> "District, neighborhood, zip code"> "Districts by municipality"> "Almere".

3. If all went well, you will already see the areas on the right side of the map. Now type the missing data in the second column in the table.

4. We are almost there. Click the icon in the column with "Petrification" and select "Color areas". The districts of Almere are now colored on the basis of the percentages in the table.

5. You are done!Play around with the map layout settings and format the legend, as in this example.

8.3 How do I add postcode areas to the map?

The LocalFocus map tool supports four-digit postcode areas in the Netherlands. This means that you can put all zip code areas of your municipality or province on the map in no time.

How? We are happy to show you that. We go through the steps on the basis of the example above with postcode areas in the municipality of Amsterdam. We map the percentage of households with a low income per postcode area. Copy this table if you want to practice using these numbers yourself.

1. Make sure your data is neatly in a table like the one above, with the four-digit zip codes in the left column.
2. Open a new map project in LocalFocus.
3. Add a map layer, for the example of Amsterdam we choose a 'Surface map figures', because we want to show percentages on the map. (For categorical maps you can choose 'Area map categories')
4. LocalFocus will now ask you which area layout you want to use. Select 'The Netherlands'> 'District, neighborhood, zip code'> 'Postcodes per municipality'.
5. The postcode areas immediately appear on the map. You can now add your data in two ways.Option 1:You can always type the missing data directly into the table. this is useful if you have a short list of postal codes.Option 2:But because the Amsterdam example is a somewhat larger dataset, it is easier to paste the dataset into the table in LocalFocus in one go.

6. Finished typing or pasting? then click on the icon in the column with "Percentage of households with low income" and select "Color areas". The postcode areas of Amsterdam are now colored on the basis of the percentages in the table.

9 Add your own geographic files (shapes)

9.1 How do I add my own geographic files to the map?

Metro routes, the stages of the Tour de France, or the Dutch gas supply. You can also add geographic files with planes and lines to the map yourself. To do this you need a KML file. This is standard file format for geographic data. As an example we now take oil and gas fields in the Netherlands, which is open data from NLOG.

Complete the following steps to add such a geographic file:

1. Does your file not yet have a KML format such as the oil and gas field shapefile? Convert your file to a KML, you can do this for example with QGIS or tools like MyGeodata Converter

2. Next you have to make a (simplified) table from the KML file. To do this, use the KML- to Spreadsheet Converter from LocalFocus, you can find it here.

3. Open the KML to Spreadsheet Converter and add your file at "Choose a KML file".

4. Under "Options" are settings that simplify the file. This makes the file less heavy and you can, for example, paste and edit the data in Excel.

5. With the first option: "Limit number of decimals for coordinates" you make coordinates shorter. The fewer decimal places, the less accurate the location determination. However, you can display streets and areas with 4 decimal places. Do you want to map smaller objects such as individual trees or the entrance to a building? Then it is better to set 5 decimal places.

6. With the second option ("Simplify lines") you simplify the shapes of your geographic data. The closer to 100, the more you simplify the file. Leave this at zero for the time being. If the file turns out to be too large, you can adjust this later.

7. Leave the third option "Remove Polygons with less than 3 coordinates from MultiGeometry" checked.

8. Click on "Parse KML to Spreadsheet" to generate the new table.

9. Do you get a message that the file is too large for Excel or a Google Drive spreadsheet? (See image below). Then enter the number '1' at 'Simplify Lines' and click again on 'Parse KML to Spreadsheet'. Is the table still too big? Repeat with the number '2' - and so on - until the message disappears. Factor '2' appears to be enough for the stock of oil and gas fields.

12. You can now copy the spreadsheet into a Google Drive spreadsheet or Excel. If necessary, adjust the text in the table and remove columns that you do not need.

13. Go to the map module and click on 'Add map layer'. Depending on the type of file, you can choose an area map with categories (H5) or an area map with numbers (H4). In the case of the gas and oil fields, we choose the second option, because we want to show the two categories (oil field/gas field) on the map.

14. After you have chosen the map layer you want to add, click on the bottom option "Add own planes and lines". You can copy-paste your table from Excel or link it to a Google Drive spreadsheet. For this you have to make the Google Drive spreadsheet public. You can do that easily via 'file'> 'publish on the internet'. Then use the Google Drive spreadsheet link to link it.

If the import was successful, the table will look like this:

15. Open the settings of the column with the geodata. Check 'location name' so that the map module can put the data on the map.

16. Done!Your own geodata has been added to the map module.

9.2 How do I add circles with a radius around a specific point to the map?

Sometimes you want to indicate a zone around a certain point on the map. For example, a radius of 300 meters around the National Monument on Dam Square in Amsterdam, or a radius of 200 kilometers around a nuclear power plant. It looks like this:

You can do this by creating and adding your own geo files (KML shapes). We go through the steps using the example of the monument:

1. You must first find out the coordinates of your location. If you don't know this yet, you can enter the address in the geocoder of LocalFocus. The monument's coordinates are 52.372822 (latitude) and 4.8937 (longtitude).

2. You can then use this tool 'Radius around point' from FreeMapTools. Scroll down a bit. Under 'options' you enter the coordinates at 'input coordinates'. Make sure thedecimals are separated by periodsand not commas.

3. Under 'options' enter 'radius distance' '300 meters'.

4. Click on 'Generate KML'. You have now created a KML shape that you can add to the platform.

5. To create the map in the image above you need to add two map layers. One with the point in the center of the circle, and one with the large circle. So you ensure that you ultimately have two separate tables in which they are neatly placed. How is explained below.

6. To make a table of the KML shape you just saved you need the KML-to Spreasheet Converter from LocalFocus, you can find it here.

7. Open the KML-to Spreadhseet Converter and add your file at 'Choose a KML-file'.

8. You don't have to change the settings, you can ignore them.

9. Click on 'Parse KML to Spreadsheet' to generate the table.

10. You can now copy the spreadsheet from the field at the bottom into Excel. If necessary, adjust the text and remove columns that you do not need. For example, it looks like this:

11. Go to the LocalFocus map module. Add an area map with categories and click on the bottom option 'Add own areas and lines'.

12. Paste your table from Excel into the card module.

13. Open the settings of the column with the geodata. Check 'location name' so that the map module can put the data on the map.

14. Done!You added the circle.

15. Do you also want to show a point in the middle of the circle as in the example? Use a table with the coordinates of the National Monument on Dam Square, as shown in the image below. Choose a map layer with 'icons' and paste the table into the map module.

10 Accessibility

10.1 What is the accessibility mode?

The accessibility mode makes the data behind a map available in a table layout view. In this view you will find all information that is on the map. Our map widgets are fully accessible by keyboard, so that all information is accessibile via a screen reader for blind and visually impaired users.

10.2 How do I open the accessibility mode?

The accessibility mode can be opened by clicking on the table icon in the bottom right corner of the widget. You can also activate the mode using your keyboard. Focus on the table icon using the tab key on your keyboard. Then use the enter key to open te view.

After clicking the icon, the view will open as you can see on the image below.

10.3 Can I disable the accessibility mode?

No, the accessibility mode is always active.

10.4 How to make icons on the map accessibile?

By adding a tooltip to map layers, you ensure accessible elements on the map. The user can then focus on map elements with the tab key and then see the tooltip. The text from the tooltip is read by screen readers, because it is placed on the element as an aria label.

Have you also set a popup for a layer? Then you can open it by pressing enter once you have focused on an element.

10.5 Can I navigate the map with my arrow keys?

Yes, that's possible. This can be done by focusing on the button with the keyboard icon above the zoom buttons. This can be done with the mouse or with the tab key. Once you are focused you can navigate the map using the arrow keys on the keyboard. You can also zoom in and out with the keyboard by focusing on the zoom buttons, and then pressing enter.