geospatial GIS HowTo mapping maps

How to Build Web Maps Superfast

Build Web Maps in Record Time with MapHub.
Not long ago a friend introduced me to an awesome free tool called MapHub. A powerful online drag-and-drop mapping suite that enables one to quickly build web-maps without writing a line of code! The simple-to-use, rapid development software makes it a lot easier to create, collaborate and share interactive maps. I have used MapHub to build prototypes to beat deadlines on several occasions and I thought I should share with you this promising piece of software. But before I jump into the how-to-use MapHub, allow me say a few things.

First, it is worth noting that MapHub is (by the time I was writing this post) in beta. What this means is that the current version is available as a trial version. And like all software under development, MapHub’s current version has limited capability and thus can only be used for small mapping projects. It’s upon you to decide how “big” your project is and whether you’d like to have it built on a trial version of software. If you’re thinking of a county resources mapping project and you’re betting on MapHub then my friend you’ll be taking a huge gamble with this software.

Nevertheless, MapHub is powerful enough to build compelling interactive maps to accompany stories. The tool allows users to import (and export) their data in KML, GeoJson, GPX and even JPG file formats. So if you have some points on a CSV file that you collected during your recent field trip, you must be salivating to hear how you can put them on a web-map. And if you have never gone out for field work, don’t worry it’s my work to show you how to do it bottoms-up. So now let’s jump straight into it.

  • Click here to open MapHub. A map will open showing your current location. You need to sign in (it’s free) to start building your map. Alternatively you can start building then you sign in later to ‘export’ your map. A window like this one below will appear:Note: The map will zoom automatically to your current location. As I was doing this from a hotel room in Adama, you can see it zooms to this area in Ethiopia. But you can ‘pan’ to any location of interest on the globe.
  • Click on ‘New Map’ to start a new mapping project. Under ‘TITLE’ give your map a title name. Go ahead to describe it to give an overview to your audience what your map is all about. For the purpose of this demo I will create a map showing 4 tourist attraction sites in Ethiopia.
  • Now, you might want to change the background of your map by changing the ‘Basemap’. MapHub gives you 20 different basemaps built on OpenStreetData and powered by open datasets including openAddresses, Quattroshapes and Geonames.
  • Next, add a Marker from ‘Editor Tools’ on the left side of the screen. Note that the menu has five buttons which allows the user to add multiple points, insert text labels or draw polylines and polygons. In our case we add a point by selecting the Marker which is the 2nd button on the list. Proceed to change the title, style, symbol and description of your point. Note: that you can enter the latitude and longitude of the point to move it to exactly where you want it to be.
  • To link a photo to your point simply type on the DESCRIPTION field this text: ![](LOCATION_OF_YOUR_PHOTO.jpg/png etc.)
  • Remember to ‘save’ your work at every point.
  • Repeat the same to add all your points on the map. If however, you had your points in KML/KMZ, GPX, or GeoJson format you can easily upload your data by using the ‘import’ button.
  • Finally, use the share button to generate a link that you can post on your web or social media page. You can also use the generated html code to embed on your website or blog like i have done here.
  • This is how the final product looks like:

    If you found this post helpful share with friends on twitter or facebook using the share buttons below. Comments are welcomed. You can also seek more information by connecting with us on social media or email.

    Leave a Reply

    Your email address will not be published. Required fields are marked *