Adding Charts in Infowindows- CartoDB

The GIS analyst in many organizations usually find that their activities in the office centre around information management and presentation. Some of the complex issues in GIS only come up during the occasional three to five years project. Everyday tasks that involve using geodata to estimate or explain trends to decision makers are far more commonplace in the office.
One of the best ways of summarizing and presenting spreadsheet data is by using charts and graphs. In this post, we will prepare data into charts and display them inside the feature info window of a webmap in CartoDB.

Things to note
- The charts and graphs were prepared in Microsoft Excel 2013 environment and then saved as png images.
- The charts were then hosted online and their URLs copied out.
-The charts are viewed as images within the infowindow of features on a map in CartoDB.

Click the Link here to download a sample data for practice-ChartSample
(Kindly attribute this data to www.mapsnigeriainitiative.wordpress.com)
Chart preparation steps

• Save the data as a table or spreadsheet format and Open with Spreadsheet software (be sure that the software has the capability to create charts).
• Create the chart or charts and store on PC or host online.
• Add a fresh column on the spreadsheet.
• Insert the link address of the image into HTML image tags .
• Put this into the fresh column and save the data sheet.

Sign into CartoDB account and open an empty map. Add layer. For the demo, we added a point feature layer in CSV format to the base map.


Click on Data VIEW to inspect the attribute table of the layer. A field named ‘url’ contains the HTML codes for the links to the URL of the images (see cursor finger position on the screenshot below).


We double click on one of the values in the ‘url’  field to adjust the image height and width.


Go back to MAP VIEW and click on the infowindow icon (see red box)


In the infowindow settings, we activate the pt no (represent the Pt number) and the url fields. (see red box)


Click on a Point feature and confirm the chart is embedded in the infowindow.
See screenshot below.


Another point is clicked and a corresponding chart opens up in the infowindow.


Thank you for following the blog.

Merging datasets in CartoDb using toggle control

Datasets or Layers in CartoDB can be merged by similar columns (attribute fields) or by Spatial relationship.

Click this link and download Sample geodata - Grazing Spots, West Africa 

Login into CartoDB. Click on New map and CONNECT DATASET. Download the sample geodata- a Point feature shapefile and a polygon feature shapefile.
Click on DATA FILE and scroll down to UPLOAD FROM FILE. Start with the polygon feature layer.
Once Upload is complete, the layer should appear in MAPVIEW or DATAVIEW. If it appears in DATAVIEW, click the MAPVIEW.
See our example screenshot below.


Click on the + button where the cursor finger is positioned in the screenshot to add the point feature layer.
See screenshot of our demo of the CartoDb MAPVIEW showing the two layers.


Our goal is to spatially join or merge the Points and the Polygon layers into a single layer as we want to merge the points according to the polygons which they fall within or intersect.
Select DATAVIEW to display the attribute table and Click on merge dataset icon (red boxed area in the screenshot below).


Click on Spatial Join since we are merging by the spatial intersection (meaning the topology relationship between the Points and Polygons) and not column.


On the next page we select the datasets to merge. Since the polygon layer is our principal target, the source point feature layer is chosen from the drop down list as shown on the screenshot below.


Select COUNT (red boxed on screenshot below) and click MERGE DATASETS.


A new layer is created from the merge. Open the DATAVIEW and notice the red boxed column where the intersect_count is listed. This list the number of points within each polygon.


To visualize this properly on the map, click on MAPVIEW.
Click on the Map Layer Wizard icon and choose SIMPLE option. Go to Label Text option and choose intersect_count column to label the layer with.


Results are shown on the screenshot below. Each polygon are now labeled with the number of points that intersect it.


Thank you for following our demonstration.

Creating a simple web map using Mapbox javascript

This post will demonstrate creating web map using Mapbox javascript.

We will do the following using Mapbox javascript:

-Initiate a Mapbox project as a basemap on our web page;
- Add markers on the base map to create a simple web map in the web page.

We create the HTML web page that will enclose the javascripts. In the Head section, we link the mapbox.js website and reference the mapbox.css library online.
Also note that we created the div container for the map.

---

/fontahref=https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js
https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css'
rel='stylesheet' />;

Creating simple web map using Mapbox javascript

---

Below is a screenshot of our example HTML web page above.

---

Next, we insert the script to add the base map. See the section where text colour is red.
Here we bring in the map tiles using the L.mapbox and define the map as ‘mapbox.streets’.

---

/fontahref=https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js
https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css'
rel='stylesheet' />;

Creating simple web map using Mapbox javascript

// Add the mapbox access token and map –‘mapbox.streets’. You can replace the ‘mapbox.streets’ with a Map ID to display your mapbox style as the base map.

L.mapbox.accessToken = 'pk.eyJ1IjoibWF5b3R1bmRlIiwiYSI6IlpFM1Jmck0ifQ.13TB14FKWB328q1q7eEZUQ';
var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([4.9, 2.6], 4);

---

the screenshot below illustrates the addition of the base map- ‘mapbox.streets’ centred in Africa.

---

Within the we add the markers as L.marker, use the L.icon to add marker options – symbol, colour and size.

---

https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css'
rel='stylesheet' />

Creating simple web map using Mapbox javascript

L.mapbox.accessToken = 'pk.eyJ1IjoibWF5b3R1bmRlIiwiYSI6IlpFM1Jmck0ifQ.13TB14FKWB328q1q7eEZUQ';
var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([4.9, 2.6], 4);
L.marker([5.56,-0.2], {
    icon: L.mapbox.marker.icon({
    'marker-size': 'large',
        'marker-symbol': 'bus',
        'marker-color': '#fa0'
    })
}).addTo(map);
L.marker([9.02,38.75], {
    icon: L.mapbox.marker.icon({
        'marker-size': 'large',
        'marker-symbol': 'bus',
        'marker-color': '#fa0'
    })
}).addTo(map);

---

Below is the screenshot showing the two markers added to the javascript appearing on the base map as yellow icons.

---

Let us edit the L.marker icon.

L.marker([9.02,38.75], {
    icon: L.mapbox.marker.icon({
        'marker-size': 'large',
        'marker-symbol': 'bus',  change the symbol to ‘circle’
        'marker-color': '#f45', change the color to '#f45' 
    })
}).addTo(map);

---

Below is a screenshot reflecting the changes made to the appearance of the second marker.

---

Next we decide to change the base map from ‘mapbox.streets’ to one of our own mapbox projects.

L.mapbox.accessToken = 'pk.eyJ1IjoibWF5b3R1bmRlIiwiYSI6IlpFM1Jmck0ifQ.13TB14FKWB328q1q7eEZUQ';
var map = L.mapbox.map('map', 'Insert Mapbox ID')
    .setView([4.9, 2.6], 4);

---

  Below is a screenshot showing the new base map with the markers on top.


Copy out the example into your preferred Text editor. You can make edits to the original example to customize it to your needs.
Save as .html and Open with a modern web browser.

Thank you for following the demonstration.