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.

Creating Charts as Pop-up Media in ArcGIS Online

Putting charts in the pop window of features on a web map help to convey more information on the theme of the map. ArcGIS Online is the web mapping platform for Esri and this post will demonstrate how to add charts as a media in the Pop-up display.

Things to note
-ArcGIS Online is a web mapping application which implies it can be accessed only via the internet.
- ArcGIS Online accounts are available at ESRI.com. Registered ESRI Global account holders have automatic access to ArcGIS Online Basic Accounts.

Download sample data here- %Concentration
(Kindly attribute this sample data to www.mapsnigeriainitiative.wordpress.com)

We sign into our ArcGIS Online account and Click MAP on the HOMEPAGE.
On the screenshot below is the layer to be used for the demonstration- a Point feature layer containing attribute data on the different %concentrations of elements at each point.
Click on the red boxed …. point and select Configure Pop-up from the drop down menu list.


In the Configure Pop-up window, we edit the default Pop-up title and add a suitable one.


Scroll down and click on Configure Attributes (red boxed). A Configure Attributes window will pop up. Check or Uncheck the boxes to select which fields will have the  values reflected in the Pop-up display.


Scroll down in the Configure Pop-up window and go to Pop-Up Media. Click on ADD and select the Chart of your choice. For this demo, Bar Chart is selected.
Click SAVE POP-UP to save all the edits made.


A Configure Pie Chart window will open. Check the boxes of the fields whose values will form the Pie Chart. Click OK


Click on a Point feature on the map and the Pop-up display will contain the chart.
See screenshot below showing the result of the demonstration.

Labeling and visualizing markers in TileMill

We set out in this post to demonstrate how other ways of labeling can improve the aesthetics and end-user visualization in a map. Using cluster markers is very nice but at times, we can also show a wide variety of data on the map using their numerical values.

Click this link- Grazing Spots to download the sample data.

Add the Sample data to the new project. The sample data consist of Point features representing major grazing spots in the West African sub-region. See the default style in the style.mss window of the screenshot


Click on the Features icon of the sample dataset to open the Attribute table. Our attribute field of interest is the HeadCount. We intend to label the point features by their corresponding numerical value in the HeadCount attribute field.


 Write this CartoCSS style into the style.mss window. The CartoCSS lines of code are allocating different text sizes to ranges of values. The values in the HeadCount attribute field are classified into three categories.
In the screenshot below, an example from each category is encircled in red.


 Edit the polygon-fill of the pseudo-element hashtag countries as on the CartoCSS on the left. Add an extra line of code in each style layer defining the category. See red boxed lines on the style layers.
On the screenshot example below, the different labels now have different colours depending on the category they fall within.


Notice that the numbers tend to cluster at certain zooms and make the map messy. Lets adjust the style layers and add line of extra code to show only certain figures at certain zoom level. The extra code [Zoom>=6] adjust any label above 5001 and less than 10000 to only show after zoom 6.

The screenshot below shows the labels at zoom level 1-5.


In the screenshot example, the labels whose values are in the 5001-10000 category appear at zoom level 6.


Then at zoom 7, the labels with the highest numerical values appear.


This way we have been able to make the map less clustered with labels and easier to read by the end-user.
Thank you for following the blog. Send in your comments and feedback.

Creating a Simple leaflet map

Leaflet is a light weight java script application created some years back. The popularity has grown over time because it gives a lot of room for customization of many features on a web map.

Creating a web map in web pages by using javasript language and object libraries enclosed within web pages designed with HTML/CSS seems novel to many GIS analyst and cartographers in this part of the world. Vector layers can also be added as variables or in the geojson format as well as other more advanced plugins like marker clustering.

Let us start by building the HTML web page.
Open a new file in a Text editor.
Write this in. (You can edit title and text if you want). Save as HTML.

---

We add the link to leaflet.CSS application in the section of the web HTML (red boxed area).

---

---

Add the div container for the map (red boxed area).

---

---

Connect to the leaflet javascript library (red boxed area).

---

---

Next, we add  the set view of the map- Var map- (red boxed area). The map centre is in West Africa at a zoom of 8. The Tile layers – L.tilelayer are added from openstreetmap.org open layers- http:\\www.openstreetmap.org

---

---

Open the html file with a modern browser. Screenshot below displays the leaflet map in the web page.


Viola! we have added a simple leaflet map into the webpage. The leaflet map centre is in West Africa.

Thank you for following the blog.

Labeling Bubble maps in Arcmap 10.2 Desktop

Task
- To create a Bubble map of various points and their PH values using graduated symbol sizes.
-Labeling the Point features with their PH value.

FOR SAMPLE DATA CLICK THIS LINK BELOW:
https://www.dropbox.com/s/iaev3uyo7uhgwzx/Points.csv?dl=0
(kindly attribute the production of this data to www.mapsnigeriainitiative.wordpress.com)


Let us have a look at our dataset. In the Table of Contents, we have a Point feature layer which has on its attribute table a field containing the PH values of the different points. The goal here is to use graduated symbol sizes to create a Bubble map with the values in the attribute field –‘PH’.


Right Click on the Point feature layer  > Properties.


In the Layer Properties window, Click on the tab- Symbology (red boxed).
Then since we are dealing with quantitative data, under the features, click on Quantities (red box 2).


1) Select Graduated symbols under quantities (2) In the Value option, select the attribute field of interest- PH (3) Define the number of classes the data will be classified into. (4) Define the range of the symbol size.


A Bubble map is created in the screenshot below. Notice that the symbol sizes are graduated according to increasing value of PH.


Labeling
The goal will be to label the point features with the PH values displayed right inside the marker.
Right Click the Point feature layer and go to Properties.


Click on the Labels tab. Check the box titled ‘Label features in this layer’. Select the attribute field whose values will be used to label the features. Choose font and font size. Next Click on Placement Properties –see cursor arrow position.


In this window-Placement Properties- Select the option in the red box. Click Ok


Next in the Label window, Click on the Label Styles tab. The Label Style Selector window will open. Select a style and Click Ok.


The labels are placed inside the symbols here in the screenshot below.