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.

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.

Summarize Point data using Aggregate Points in Polygon in ArcGIS Online

This post will demonstrate how to use our web based GIS application software-ArcGIS Online to summarize Point data as well as visualizing the aggregate points in each polygon feature on a map.

For sample data to practice, Click this link to download this zipped shapefiles: GrazingSpots.ZIP, West Africa.ZIP
(Kindly attribute this data to www.mapsnigeriainitiative.wordpress.com)

Sign into ArcGIS Online account (You must be subscribing to an organizational account to be able to perform analysis in ArcGIS Online). Click on Map to open a new map.


Let us look at our data in the Contents window. We have a Point feature layer- Grazingspots-which represent major grazing spots within the geographical extent. Below is a polygon map comprising the different countries that make up the West African sub-region.
Our task is to summarize the number of points per polygon and visualize this result on the map using ArcGIS Online.


Click on Analysis (red box 1). The Perform Analysis window will open, then click on Summarize Data (red box 2) and under it click on Aggregate Points (red box 3).


In Option 2, we select the polygon layer as that is the layer containing the countries. Option3- Add statistics and its an optional field. For the demo, the dataset contains information on the numerical sizes of the livestock at the mapped grazing spots. Headcount represents the numerical size in the wet months and Drycount in the dry months when migration to the south takes place. Click RUN ANALYSIS


The new layer-Summarize (red boxed) is added. The different circles represent the total number of points per polygon -the bigger the circle translates to a greater number of Points in Polygon. To create the visualization, Click on the ….. beside the layer and choose Create Labels.


The Label Features window will open. Select the appropriate attribute field for labeling the features. The Label size, color and font attributes can be edited. Click OK


The Cluster markers are now labelled and displayed on the map in the screenshot below.



Thank you for following the blog.

Creating and Styling web maps using the Mapbox Studio

Mapbox Studio is a development upgrade to TileMill and can be downloaded to the PC or Desktop. Mapbox studio is used to create Style and Source vector tiles that can be uploaded as data for use in Mapbox Editor and other GIS mapping applications. Mapbox Studio gives the user a wider range for customization with the use of CartoCSS.

The post will demonstrate how to use a standard free subscription of Mapbox Studio to create web maps. Mapbox Studio can be downloaded from the Mapbox.com site.

* Internet connection is required to use Mapbox Studio.

Task
Create and style a simple web map using Mapbox Studio. This demonstration will be a very introductory procedure(as we move along in the series the procedures will become more advanced).

Procedure

1. First Add a custom vector tile. Simply implies the user will import and apply a vector layer.

Launch Mapbox Studio from the desktop. Click on Projects (cursor finger on the lower corner left on the screenshot).


Click on New Project on the next page. Click on Sources (cursor finger)


On the next page, click on the + button under blank source (cursor finger).


Click on New Layer (red boxed) and the inner display box will appear. Click on Browse (cursor finger) to navigate for the vector file. In the case of this demo, the vector file is a polygon shapefile named Parcels.shp.


The vector layer is added. The default window to the right will be the Configure window(red boxed) Fill in Description and adjust buffer size to 30-32 preferably.


Click on the Fields button (cursor finger) and a window that will allow the user to inspect and fill in description of the attribute fields (see in red box) of the vector layer will open.


Once done with the editing, click Save as (highlighted in blue on the upper left side where the cursor finger is). Make sure to save the vector layer.

Next Upload the Source to Mapbox. Click on Settings (indicated in red box 1) > In the settings window (red box 2), fill in the details and fix the zoom of the source map created > Click on Upload to Mapbox (red box 3).


Open Mapbox Account online. Click on Data > Uploads and copy the Map ID of the uploaded vector source (green boxed).



2. Create a Style. A source (either raster or vector) is added on a style to produce the web map.

Click on Projects (red boxed 1) > New Projects (red boxed 2) > Styles (red boxed 3). For the demo, High contrast map style is chosen.


Next is to add in the source layer (red box 1) on the style. Click on Layers and Change source (red box 2). The source window will open. Put a comma after the description of the Style layer and input the copied Map ID  . Click Apply


The uploaded vector source layer is now added to the Style.For the demo- see the Parcels layer (red boxed).



3. Let us style the layer.

Click on the + button on the far right (small red box). The Add a new CartoCSS tab to your style  window opens. Give the style a name and click on new tab to add.


The new CartoCSS tab is added in the right window. Now we write a simple code as follows:
  This is a simple CartoCSS code. To learn more about CartoCSS, browse online for resources on this topic. First line indicates the layer to style, the line-color allocates color to the polygon border lines. line-width allocates a polygon border line of 1. polygon-opacity allocates opacity to the polygon and polygon-fill gives the fill color. Once the code is written , click on save button and the changes are made on the layer.


Simple changes can be made in the code to change the appearance of the layer. line-width is increased to 2 and polygon-opacity to 8. Though a slight change but look at the screenshot to observe that the polygon border lines are now thicker.


4. Save the Style and Upload to the web

Click on Settings and a settings window will open. Fill in the Name and description of the style. Click Save to save the style locally.


Click on Settings again and Click on Upload to Mapbox. Note the Map ID allocated to the Style.


Viola!!!User can go their online Mapbox account and Click on Styles to view the uploaded map or edit it further.


This demonstration is a very simple introduction to using Mapbox Studio. This was designed in order to gradually bring in light skilled GI Users who may find the addition of codes intimidating. As we move along, more posts will reveal the awesome capacity of Mapbox Studio and even TileMill.

Thank you for reading and practicing along. Feel free to send in your comments.