Creating Multilingual Interactive Web Map without a Single Line of Code

June 25, 2016 Waleed Eseily

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

Waleed Eseily

Waleed is a native Arabic speaker born in Menofeya (the northern part of the Nile Delta), Egypt. He has over 10 years’ experience in multilingual design, desktop publishing and localization engineering. Over the years he has worked for localization and design companies in the documentation desktop publishing and design departments. He also has comprehensive training and experience in many localization and CAT tools. He holds an array of professional certifications including CIW’s Certified Internet Webmaster and Programmer, IBM Web Programmer and Macromedia Designer and extensive application experience with the Adobe Creative Suite and Microsoft products.

More Content by Waleed Eseily
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 a Quote!