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.

Creating and Publishing a Simple web map using ArcGIS online

Steps
- We will download our data from a GPS receiver as Tracks
- Import the Tracks as GPX file into ArcGIS Online.
- Design the Web map.
- Share the web Map.
-Embed the web map in a web page.

Procedure

1. Connect the GPS receiver via USB port. Launch DNR GPS and make sure it connects to the GPS. Go to GPS > Download All. We will be working with the Tracks downloaded from the GPS receiver( red box). Go to File>Save To>File and save the Tracks as field work.gpx.


2. Launch ArcGIS Online and sign in. In the home page, click on MAP (red boxed).


3. When the map page opens, Go to Add > Add Layer from File.


4. This dialog box will come. Click browse to navigate to where the gpx file is. Then when the file is uploaded, click IMPORT LAYER.


5. The file field work.gpx is imported in as three polygons almost on top of each other. Notice the Change Style window is opened immediately so the Symbol Style can be edited.


6. Here we choose the single symbol using the ident as the attribute to show. Our tracks are T1, T15 and T3 as in the GPS where the data was downloaded from.


7. The pop up window that displays information on the feature can be re-configured. Click on the button to the right of the feature > Configure Pop –up


8. The fields that contain info we don’t require the audience to see can be unchecked. Once unchecked in this Configure Attributes window, it won’t appear on the pop window display.


9.In this window, we will also add an image to the pop-up window display. Since we grouped all our polygons into a single symbol, all the pop windows will share the same pix. Click on Add>Image.


10. A configure image dialog box allows us to fill the details. Note that the image must be hosted online and the url of the image should be supplied as below.


11. Click on the feature and the pop up window should reflect the saved changes.


12. The next thing is to save the map. Click on Save on the main menu. The Save Map window will pop out. Fill in the details and click SAVE MAP.


13. Next we publish the web map we just created. Click on Share on the main menu. The Share dialog window opens up. Check everyone (public) in red box and a link to the map will appear in the window (green box). Click on the EMBED IN WEBSITE


14. The Embed in Website window will come up. The HTML code will appear in the open window (red box). Right click on it and Copy.


15. Insert the HTML code into the source code of the web page. See the HTML code in blue highlight.


16.Launch the web page and the web map will come up. See the url of the web page in the browser (red boxed). The web map is dynamic and interactive.