Creating Multilingual Interactive Web Map without a Single Line of Code

June 25, 2016 Mohamed Gamal

As with most technologies, many people remain unaware of the impact of geographic information systems (GIS), despite GIS growth in recent years.

GIS affect the daily lives of millions. Here are some simple examples of the ways GIS is used in your everyday life:

  • Finding directions to a place you have never visited.
  • Sharing your location with friends on social media.
  • Finding the nearest ATM, restaurant, hotel, etc.

For all of the above, your smartphone will search for a location on a map to provide you directions from your current location, post a geo-Tweet, take geo-tagged photos, or check in on Foursquare. All based on GIS.

Create a Multilingual Interactive Map

In this blog we will explain how to create multilingual interactive maps easily without writing a single line of code.

There are many ways to create interactive maps by using different apps and frameworks, in our example we will create interactive maps by using Esri templates.

There are three main steps to create an interactive web map.

1. Prepare your data.

GIS data preparation requires familiarity with GIS data formats, in this example we will use .csv file or shapefiles. If you want to manage, edit, change data format or projection, you can use QGIS software which is a free open source software.

2. Upload your data.

Upload the data to ArcGIS online and publish a web map to be ready to be used in the Esri templates to create interactive maps, the below steps show how to create a web map.

  • Open arcgis.com in your browser
  • Sign in with your ArcGIS online user name and password
  • From the top menu select Map to open ArcGIS map viewer to upload and manage your data
  • Click Add item from the main menu to add layers to the Web Map then select Add Layer from File then browse your data file as shown in the following screens:

GPI-GIS-1

  • After adding your layers you can choose the appropriate base map, change style, configure pop-ups, etc., then click Save from the main menu and enter the map title as shown:

GPI-GIS-2

  • After you save the map you will see your map ID at the URL address as shown:

GPI-GIS-3

  • Copy the map ID and paste it somewhere like a Notepad file

3. Create your map.

Now we ready to create a map by using Esri templates, the below steps show how to create your map:

  • Select download appropriate template from ArcGIS Gallery
  • In this example we will use Public Information template
  • Download template from here https://github.com/Esri/public-information-map-template-js
  • Unzip the template file to somewhere on your hard disc and open config/defaults.js in a text editor
  • Replace "webmap" value with  your map ID, also you can change the rest of default configuration as needed
  • The final step is deploying the map, to deploy the Esri template you need a web server like IIS or Apache, in our example we are using Python's SimpleHTTPServer which is a quick way to serve files via HTTP
    • Before you start, you will need Python installed, then open the command prompt and run the following command "python -m SimpleHTTPServer <port>", finally the URL to the template will be "http://localhost:<port>"  as shown:

GPI-GIS-4

  • If you have experience with Javascript and CSS you can customize the template by changing the layout and theme according to your requirements and business needs,  below is an aerial example that uses the same template in our example:

 

GPI-GIS-5

Map Localization

The Esri template supports many languages, and you can localize your map in different languages. To do this, simply set the appropriate locale as the following:

Open index.html in a text editor and add locale to the dojoConfig as shown:

GPI-GIS-6

 

Additional locales can be set using extra locale.

Summary

GIS affects most of our daily lives, but the vast majority of web map users won't even know what a GIS is. GIS will give you the power to create maps, integrate information, visualize scenarios, solve complicated problems, present powerful ideas, and develop effective solutions like never before. And there are many ways to create interactive maps easily without needing advanced programming skills.

Further Resources from GPI

Globalization Partners International (GPI) has developed a suite of globalization tools which help clients achieve their global application goals. You can explore further under the Tools sections of our Translation Services. GPI also offers internationalization and globalization consulting services and can evaluate your web-based applications for global readiness. Partnering with GPI before you localize or translate your applications will ensure you avoid many potential mistakes with global development and will save you considerable time and money on your next localization projects.

For more information about mobile application translation and localization please feel free to visit:

Please feel free to contact GPI at info@globalizationpartners.com with any questions about our language and technology services.  Also let us know if you have any interesting blog topics you would like us to cover in our future blogs.  You may request a complimentary Translation Quote for your projects as well.

 

About the Author

Mohamed Gamal

Globalization Application Developer. Mohamed is a native Arabic speaker from Giza, Egypt. He has over 5 years’ experience in software and websites development projects. His experience includes working with multiple web frameworks, and approaches to web development using a range of tools and technologies including C#, ASP.Net MVC, LINQ, PHP, Django, HTML5/CSS3, JS, NodeJS, AngularJS, JQuery, MqSql PostgreSQL, SQL Server & VoIP with O.S.: Linux, Windows, OSX. He has experience in GIS and data collection projects working as a GEO-Spatial Application Developer. Mohamed has worked with various companies including CartoLogic, a leading 3D and spatial software consultancy and Tawasol, a mobile apps & portals, Websites & web-based apps, Digital strategy & e-marketing solutions company in Egypt. He worked as an application developer on a range of software development teams of varying sizes delivering solutions for both public and private sector clientele.

More Content by Mohamed Gamal
Previous Article
eBay Partners with MallforAfrica to Access African Markets
eBay Partners with MallforAfrica to Access African Markets

In July 2016, American eBay sellers will have access to African ecommerce consumers thanks to a new partner...

Next Article
Translation is the Fastest-Growing Career in the U.S.
Translation is the Fastest-Growing Career in the U.S.

Rapid globalization and increasing population diversity have caused translation careers in the United State...

Ready to translate your documents, software or website?

Request Quote!