Leaflet QuickStart Guide

Leaflet QuickStart Guide

Quick Start Guide

This page is an introductory guide for website owners and software developers to integrate the following simple and interactive map into a webpage using AfriGIS maps and the open-source Leaflet JavaScript library.

 

Follow the four steps below to incorporate this map into a webpage.

Step 1: Register for an AfriGIS map authentication key

To implement AfriGIS Maps in Leaflet you will first need to sign up for a free trial account.

Your AuthKey will be sent to you via email.  You should replace the _YOUR_KEY_HERE_  placeholder in the code samples below with it.

Step 2: Include the Leaflet CSS file in your HTML page

Include the Leaflet CSS file in the head section of your document:

Step 3: Create a div tag to hold the map

In the <body> of your HTML page, create a <div> tag where you want the map to be. We call it MapPanel, which will be used later in step 4.  Make sure that the <div> tag has a height.

 Step 4: Add the JavaScript code to include AfriGIS base maps into your HTML page

Add the JavaScript code below just before the closing </body> tag of your HTML page and replace _YOUR_KEY_HERE_ with your AfriGIS authkey.  The reason why it goes at the end is so that it doesn’t block the loading of the rest of your website.  You can add any further Leaflet features to the bottom of this script.  The latest version of afrigis-leaflet is 2.2.0.

Switching map types

As you can see from the example above, there are 6 map types that are predefined:

  • Vector
  • Hybrid
  • Imagery
  • Vector-black
  • Vector-grey
  • None

Try using the map.switchTo(“map type”) function to change the map type.

Complete code sample

Putting it all together: https://gist.github.com/petersmythe/960cf9444f387a694e0dcc1504d696ad

 

You can also experiment with this example in JSFiddle.

Next steps