Creating Multilingual Interactive Web Map without a Single Line of Code

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:

• 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:

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

• 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 “https://localhost:<port>”  as shown:

• 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:

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:

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.