Using the CartoDb Map layer wizard to generate Intensity and Heat maps

The Map layer wizard in CartoDB is a very useful tool for creating different types of feature maps. In this post, we will try to simplify the process of using point data to create heat and Intensity map using CartoDB.

Procedure
- Our Map view shows dataset comprising Point features that represent schools.


Click on the Map Layer wizard icon (red boxed) and Choose HEATMAP. Select the opacity, resolution and other parameters.


The results of the demo version at zoom level 10 show the highest intensity of the points to be in the Central area of the map.


The results of the Demo at a higher zoom level of 11 also shows a higher concentration of schools in the central area of the map.


Next, the demo will use the intensity tool to compare to the result of the heat map.
Scroll down the Map layer wizard and Click on the INTENSITY.


The results of the intensity map at zoom level 10 show more concentration of points in the central part of the map.


In these short simple steps, CartoDB Map layer wizard has generated heat and intensity maps for a Point map.

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.

Creating a Web map using Mapbox Editor

This post will demonstrate how to produce web maps using an online Mapbox account.
Mapbox is an online web mapping platform that has the ability to use and integrate so many forms of web mapping formats.

This demonstration will show the reader how to use the online platform of Mapbox.

Things to note
- Register an online User account with Mapbox.
- Free accounts have their usage limits.
- User must be connected to the web to use the application.
Sign into your user account in Mapbox. On this page on the screenshot, Click Projects (cursor finger).



On the next page, click New project (cursor finger) to start a new project.


The Editor page with a working menu and a base map will open. Style- will allow the user select map styles to apply for the project. For the demo, Streets is selected (cursor finger).


Next, Click on Data (red boxed) and the lower menu (green boxed) will open. Click on import   (cursor finger). For the demo, a kml file of populated cities in the world’s poorest countries is imported.


In the import features window, give the features a Title from the attribute table. For the demo, the attributes of the Name field is used.


Click Style and give each point (known as marker in Mapbox) a size and colour.


Click Symbol and choose a symbol icon for the Points or markers. Put a Description and Click Finish importing.


The screenshot shows the imported data overlaying the base map.


Click on a marker and Add a description of the feature. For the demo, during import, name has been specified as the Title, so automatically each feature has the name attribute set.
User can further customize the style and symbol of each feature inside the info window.


In addition, user can change the base map to suit the temperament of the map design. Here in the demo, the screenshot below shows what the map will llok like when the Comic style is selected as base map for the layer.


Click Save (cursor finger) to save the map.


Click on Data to inspect the features of the data imported.


Click on Project, select the settings tab and give the project a name and description. Click Save and the map is automatically published.



Click Project again (cursor finger) and Info (lower left side of the screenshot) to get the details of the map that has been created. A Map ID was created in Mapbox.


Data- the map layer can be downloaded as Geojson or KML.  Share- the window provides a link to the location of the map online. Embed- provides a HTML code that user can use to add the map to a webpage.
That is it folks!! The web map is ready and published using the Mapbox online editor. In addition, edits can be made to it real time.

Using the HTML Pop-up feature in ArcMap 10.2 Desktop

There are times when the GI user would want to link features on the map to certain information domiciled on webpages e.g the wikipedia page of a certain city on a map or even personal data hosted on a website. ArcMap 10.2 HTML Pop-up feature can be deployed to do this. We will demonstrate how to do this in this post.

Download Sample data here- https://drive.google.com/file/d/0B8z8JZ83pZMadDVHZjhQT3h3Q0U/view?usp=sharing
(Kindly attribute this data to www.mapsnigeriainitiative.wordpress.com)

For the demo, the dataset is a map of Africa showing the locations of international airports on the continent. These airport locations are shown as Point features in the Point feature layer (see Table of Contents).


Right Click on the Point feature layer >Open Attribute Table. On the table, an attribute field named wikipedia contains all the URLs of webpages on each airport.


We click on the icon in red box > Add field.


In the Add Field window, name the new field (for the demo-HTML) and define the properties. Click Ok.


Use the Field Calculator to move contents of the wikipedia attribute field to the new field-HTML.


Right Click on the Point feature Layer > Properties


In the Layer Properties window, Click on the HTML Pop-up tab to open up the options there. Select As a URL option; Go to the Field dropdown list and select the new field. just created-HTML.


Click on the HTML Popup icon.


Use the HTML Pop-up tool and click on a Point feature on the map. As seen on the screenshot, the wikipedia search results page shows info on the airport.


Thank you for following the blog.