The video above and the following tutorial will show you how you can use SavvyMapper to integrate data from your CartoDB account into WordPress.
There are three main steps in the tutorial below:
Create a map in CartoDB
CartoDB is a popular GIS service, with really nice, easy to use visualization tools. To use SavvyMapper with CartoDB you will need a CartoDB account.
If you have your own dataset, load it into CartoDB and make a map with it. If you’d rather just want to try CartoDB and SavvyMapper quickly, then go to your CartoDB Dashboard and click New Map.
On the map setup page click Data Library and select one a dataset that looks interesting.
Feel free to spend some time experamenting with CartoDB. When your map is ready, continue this tutorial.
Create a Custom Post Type in WordPress
SavvyMapper is made for tying posts to GIS records. In most simple cases you will want to have a custom post type for each GIS data set that you’re using.
In this demo my GIS data is a collection of country boundaries, so I’m gong to create a Countries custom post type. You can do this in a plugin or theme with register_post_type, or with a plugin like CPT UI.
In CPT UI, simply enter a the slug and labels for your new post type. The slug is what you will see in your URL, ie http://example.com/<the slug>/<the post title>/.
After creating your new post type you may need to go to your permalinks page to trigger a flush of the rewrite rules. Just visiting the permalinks page is enough to trigger the flush.
Download the SavvyMapper .zip file and upload it through the plugins preferences page.
Don’t forget to activate it!
There are two steps to configuring SavvyMapper. First we need to set up a Connection which tells SavvyMapper about a data source. Second we need to set up a Mapping which tells SavvyMapper how a post type corresponds to a certain connection.
Connecting to CartoDB
In your WordPress dashboard click the SavvyMapper icon. This will show you the main options page where you can add a connection to CartoDB.
Enter a connection name for your own convenience, then enter your CartoDB username and API key.
To find your CartoDB API key go to your CartoDB dashboard, click on your profile picture and then on Your API keys.
You should keep your API key secret since it gives anyone read-write access to your CartoDB account.
Mapping our Post Type to our Connection
Next we’ll go to the Post Mapping options page.
On the Post Mapping page you’ll find two drop down lists and an Add Mapping button.
Select the post type for this mapping, in our case, the Countries post type. Then select the CartoDB connection we just made in the next drop down and click Add Mapping.
Enter a Mapping Name, once again, this is for your convenience.
If you have multiple mappings for a given post type you can set their stacking order in the Layer Oder field. Since we’re setting up our first mapping, we can leave it set to 0.
In the CartoDB Table drop down we’ll find all of the tables we have access to in CartoDB. Select the table with the country information.
After selecting a table, the CartoDB Field drop down will populate with the fields available in the selected table. Pick the field which will be used for looking up records. A unique key is usually the best choice, but if your filter returns multiple records SavvyMapper will still display them correctly.
If you would like to show any CartoDB visualizations on your map along with your selected feature(s) you can add the URLs for the visualizations here. If you add multiple please put one per line.
CartoDB visualzation URLs can be found by going to any map in CartoDB and clicking the Publish button.The value you want is in the CartoDB.js box.
With SavvyMapper configured, we can now turn to using it.
Create a new Countries post.
Accessing Spatial Data
In the body of the post you can use shortcodes to access the information from CartoDB.
The full documentation can be found on GitHub, but for basic usage these will be enough.
To display an attribute for the selected feature(s), use:
To display a map of the feature(s), use:
Selecting Records From CartoDB
To select which records to associate with the current post, scroll down to the SavvyMapper metabox. The search box will auto-complete against the field you selected on the Post Mapping settings page.
Upon selecting one of the auto-complete suggestions the map will display the features that correspond with your selection.
Adding Extra Visualizations
The map will already include any CartoDB visualizations that you configured on the Post Mapping settings page, but if you wish to add additional visualizations just for this post you can enter them in the Visualizations box.
And that’s it! You’re now using CartoDB data right within WordPress!