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.
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.
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.
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.
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:
In the following chapters we explain when to use which option and how to make such a map.
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
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:
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'.
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.
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.
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.
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:
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.
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.
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.
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
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:
Here you will find a list with all area maps available in the map module.
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.
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'.
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.
Here you will find a list with all area maps available in the map module.
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:
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:
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.
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:
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:
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:
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.
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.
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.
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}} "/>
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:
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.
Add a new map layer. In this case, choose "Area map with numbers", because you want to show percentages on the map.
LocalFocus then asks which area division you want to use. Select "Netherlands"> "District, neighborhood, zip code"> "Districts by municipality"> "Almere".
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.
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.
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:
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
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.
Open the KML to Spreadsheet Converter and add your file at "Choose a KML file".
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.
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.
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.
Leave the third option "Remove Polygons with less than 3 coordinates from MultiGeometry" checked.
Click on "Parse KML to Spreadsheet" to generate the new table.
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.
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.
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.
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:
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:
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).
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.
Under 'options' enter 'radius distance' '300 meters'.
Click on 'Generate KML'. You have now created a KML shape that you can add to the platform.
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.
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.
Open the KML-to Spreadhseet Converter and add your file at 'Choose a KML-file'.
You don't have to change the settings, you can ignore them.
Click on 'Parse KML to Spreadsheet' to generate the table.
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:
Go to the LocalFocus map module. Add an area map with categories and click on the bottom option 'Add own areas and lines'.
Paste your table from Excel into the card module.
Open the settings of the column with the geodata. Check 'location name' so that the map module can put the data on the map.
Done!You added the circle.
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.
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.
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.
No, the accessibility mode is always active.
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.
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.