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.