
National Biodiversity Network members and other wildlife enthusiasts, often want to display an NBN map showing observations of a chosen species from the NBN database on their own website. The EasyMap service provided by the NBN Atlas enables you to embed a live NBN species map on your website, using just one line of simple HTML code.
In our work as a Corporate Supporter of the NBN, we offer technical and digital marketing support for NBN Members. Read on to find out how you can use iFrames to get an NBN Atlas species map for your own wildlife website.
EasyMap Service For NBN Atlas
The EasyMap service can be used to draw in content from the NBN Atlas, to display on your species map.
These consist of:
- Map Title including species name and link to NBN terms
- Species Map which can be customised using parameters described below
- Link to Interactive Map on the NBN Atlas
- Data Provider List and datasets contributing to the map
- NBN Logo
How To Use EasyMap With NBN Atlas
The URL used for the NBN Atlas iFrame consists of the standard web address to the EasyMap service followed by a query string to specify the TaxonVersionKey (TVK). The query string can also contain one or more parameters to determine what data will show on the map and how the map will be displayed, more on that below.
NBN Atlas Species Map iFrame Format
The basic iFrame format to display a species map is:
<iframe src="https://easymap.nbnatlas.org/EasyMap?tvk=TAXONVERSIONKEY&retina=2"></iframe>
Finding Your Species TVK
TAXONVERSIONKEY will need to be replaced with the TaxonVersionKey (TVK) used on the NBN Atlas for the species. To find the TVK search for the species on the NBN Atlas. The TVK will be displayed at the end of the URL of the species’ information page on the NBN Atlas. An example is shown below for Thecla betulae (Brown Hairstreak Butterflies):
https://species.nbnatlas.org/species/NHMSYS0000504486
The NBN Atlas TVK of a particular species is generally made up of 6 letters e.g. NHMSYS, followed by a 10 digit number e.g. 0000516260.
The final EasyMap URL for this species would be:
https://easymap.nbnatlas.org/EasyMap?tvk=NHMSYS0000504486
1. How To Embed NBN Map
The HTML tag <iframe> can be used to embed an NBN Atlas species map in your website. The iFrame will create a window on your web page, which will display the NBN Atlas species map inside, specified using the EasyMap URL you created above.
An example, producing a map of Brown Hairstreak Butterflies looks like
<iframe src="https://easymap.nbnatlas.org/EasyMap?tvk=NHMSYS0000504486&retina=2"></iframe>
This is how the basic iFrame code above will display on your website:
How To Customise Your iFrame
The first thing you will probably notice, is that not much of the information in your species map can be viewed with the basic iFrame code. To resolve this you will need to set the width and height of your iFrame.
What you set this as will depend on whether you want the iFrame to fill the width of your page and how much information is included with your species map. You may need to experiment a little to get the width and height of your iFrame just right for your needs.
Here is an example that will display the map full width in your web page, allowing for a list of up to 27 data providers and the NBN logo below the map.
<iframe src="https://easymap.nbnatlas.org/EasyMap?tvk=NHMSYS0000504486&retina=2" width="100%" height="900"></iframe>
Customising Your NBN Species Map
Without changing any parameters by using a custom query string, the map will follow a set of default configuration parameters as follows:
w = Map Width - Default = 350 h = Map Height - Default = 350 res = Resolution - Default = 10km
By specifying parameters in the query string you can customise the appearance of your species map.
Adding Parameters To Your Custom Query String
Your custom parameters should be added to the end of the basic EasyMap URL and query string (e.g. https://easymap.nbnatlas.org/EasyMap?tvk=NHMSYS0000504486&retina=2&CUSTOMQUERY). Separated each custom parameter from the previous one by an ‘&’ (ampersand) and they should all take the format of ParameterName=Value.
Tip: The values are all case sensitive and there should be no spaces anywhere in the custom query string.
How To Change EasyMap Default Map Parameter
Each of the default parameter settings can be changed using the custom query string. The options available for each are detailed here:
w = Map Width - Enter in px - Max = 800 h = Map Height - Enter in px - Max = 800 res = Size of grid squares - Options = 100m/1km/2km
An example of an iFrame code that would adjust the default parameters, set by a custom query string would be:
<iframe src="https://easymap.nbnatlas.org/EasyMap?tvk=NHMSYS0000504486&retina=2&w=800&h=800&res=100m"></iframe>
Tip: Some datasets cannot be viewed at higher resolutions.
Custom CSS Style For Your NBN Map
You can enforce custom CSS styling on your species map by adding a custom CSS file URL to your query string, like this:
<iframe src="https://easymap.nbnatlas.org/EasyMap?tvk=NHMSYS0000504486&retina=2&css=//mywebsite.com/mapstyle.css"></iframe>
Tip: Easily use the same CSS style as your website by adding your default CSS file URL.
Changing Your NBN Species Map Further
By specifying more parameters in the query string, you can customise the appearance of your species map even further.
Adding County Lines To Your Species Map
You can add Vice County boundary lines to your map with the bg parameter as below:
<iframe src="https://easymap.nbnatlas.org/EasyMap?tvk=NHMSYS0000504486&retina=2&bg=vc"></iframe>
Zoom Your Species Map To A Chosen Area
If you would like to focus your species map on a particular geographic area, you can do this with the various parameters listed below, using the same format as previously mentioned:
zoom - Options = england/scotland/wales/highland/sco-mainland/outer-heb vc - Options = Number of the Vice County to display bl & tr - Options = Bottom Left (bl) and Top Right (tr) grid reference blCoord & trCoord - Options = Bottom Left and Top Right Easting,Northing
Tip: bl+tr and blCoord+trCoord parameters must be used together.
Changing The Colour Of NBN Map Tiles
You can change the fill colour of the tiles displayed on your species map, by using the b0fill parameter as shown in the example iFrame code below:
<iframe src="https://easymap.nbnatlas.org/EasyMap?tvk=NHMSYS0000504486&retina=2&b0fill=ff0000"></iframe>
Tip: This feature is a basic use of the date layer parameters. Follow this link to find out more about the date layers.
Limiting Dataset Displayed On Your Map
By default all the NBN Atlas datasets will be displayed on your species map. If you would like to reduce this to a specific dataset or group of datasets, you can do this by using a comma separated list of DatasetKeys in the ds parameter. The DatasetKey is usually made up of two letters followed by a string of numbers e.g. “dr1206”. Find the DatasetKey you require from the data provider’s page on the NBN website (at the end of the URL).
Here is an example iFrame code limiting the dataset displayed on the species map to data provided by the UK Butterfly Monitoring Scheme (UKBMS):
<iframe src="https://easymap.nbnatlas.org/EasyMap?tvk=NHMSYS0000504486&retina=2&ds=dr1206"></iframe>
Hiding Parts Of The EasyMap Service
All of the added EasyMap service parts can be hidden from your map. Here is an example iFrame code that will hide all parts except for the map. Try using different parameters to hide the parts of the map information that you do not want to display.
<iframe src="https://easymap.nbnatlas.org/EasyMap?tvk=NHMSYS0000504486&retina=2&terms=0&link=0&ref=0&logo=0"></iframe>
If you only want to display the map and hide all other information components of the EasyMap service, you can do this using the example iFrame code below:
<iframe src="https://easymap.nbnatlas.org/EasyMap?tvk=NHMSYS0000504486&retina=2&maponly=1"></iframe>
2. More Striking NBN Atlas Maps
The NBN has developed more striking map display parameters with their API. These are more complex and full documentation can be found on the NBN website. Below are two example URLs and associated custom query strings, that you can use within an iFrame to show large images of the species data (map only).
Tip: With a more striking and interesting visual display you can give more depth and context to your species map.
Example 1:
https://records-ws.nbnatlas.org/mapping/wms/image?pcolour=3333FF&popacity=1&q=*:*&fq=lsid:NHMSYS0000504486
Add the following custom query string to see the results:
&extents=-11.2538,48.6754,3.0270,60.7995&outline=true&outlineColour=0x000000&pradiusmm=0.5&dpi=300
Example 2:
https://records-ws.nbnatlas.org/mapping/wms/image?popacity=0.1&q=*:*&fq=lsid:NHMSYS0000504486
Add the following custom query string to see the results:
&extents=-11.2538,48.6754,3.0270,60.7995&outlineColour=0&pradiusmm=0.25&dpi=300
Try & Learn: Try changing the parameters in these URLs and custom query strings to see how it affects the map display.
Example NBN Atlas Species Maps
#WordPressForWildlife
Founder and strategic mind behind White Rabbit. Associate Member of the Chartered Institute of Marketing, focused on serving clients with a creative and ethical business model. Digital philanthropist giving time to support charitable groups, projects and organisations; that revolve around the arts, wildlife conservation, local community and heritage crafts.