{"id":4369,"date":"2016-06-26T00:00:00","date_gmt":"2016-06-26T00:00:00","guid":{"rendered":"https:\/\/www.globalizationpartners.com\/2016\/06\/26\/creating-multilingual-interactive-web-map-without-a-single-line-of-code\/"},"modified":"2018-09-28T17:34:31","modified_gmt":"2018-09-28T17:34:31","slug":"creating-multilingual-interactive-web-map-without-a-single-line-of-code","status":"publish","type":"post","link":"https:\/\/www.globalizationpartners.com\/2016\/06\/26\/creating-multilingual-interactive-web-map-without-a-single-line-of-code\/","title":{"rendered":"Creating Multilingual Interactive Web Map without a Single Line of Code"},"content":{"rendered":"<p>As with most technologies, many people remain unaware of the impact of geographic information systems (GIS), despite GIS growth in recent years.<\/p>\n<p>GIS affect the daily lives of millions. Here are some simple examples of the ways GIS is used in your everyday life:<\/p>\n<ul>\n<li>Finding directions to a place you have never visited.<\/li>\n<li>Sharing your location with friends on social media.<\/li>\n<li>Finding the nearest ATM, restaurant, hotel, etc.<\/li>\n<\/ul>\n<p>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.<\/p>\n<h4><strong>Create a Multilingual Interactive Map<\/strong><\/h4>\n<p>In this blog we will explain how to create multilingual interactive maps easily without writing a single line of code.<\/p>\n<p>There are many ways to create interactive maps by using different apps and frameworks, in our example we will create interactive maps by using <a href=\"https:\/\/www.esri.com\/software\/configurable-apps\">Esri templates<\/a>.<\/p>\n<p>There are three main steps to create an interactive web map.<\/p>\n<p>1. Prepare your data.<\/p>\n<p>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.<\/p>\n<p>2. Upload your data.<\/p>\n<p>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.<\/p>\n<ul>\n<li>Open <a href=\"https:\/\/www.arcgis.com\/\" target=\"_blank\">arcgis.com<\/a> in your browser<\/li>\n<li>Sign in with your ArcGIS online user name and password<\/li>\n<li>From the top menu select <strong>Map<\/strong> to open ArcGIS map viewer to upload and manage your data<\/li>\n<li>Click <strong>Add<\/strong> item from the main menu to add layers to the Web Map then select <strong>Add Layer from File<\/strong> then browse your data file as shown in the following screens:<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.globalizationpartners.com\/wp-content\/uploads\/2018\/07\/gpi-gis-1_550x218.jpg\" width=\"550\" height=\"218\" alt=\"GPI-GIS-1\"><\/p>\n<ul>\n<li>After adding your layers you can choose the appropriate base map, change style, configure pop-ups, etc., then click <strong>Save<\/strong> from the main menu and enter the map <strong>title<\/strong> as shown:<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.globalizationpartners.com\/wp-content\/uploads\/2018\/07\/gpi-gis-2_499x222.jpg\" width=\"499\" height=\"222\" alt=\"GPI-GIS-2\"><\/p>\n<ul>\n<li>After you save the map you will see your map ID at the URL address as shown:<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.globalizationpartners.com\/wp-content\/uploads\/2018\/07\/gpi-gis-3_500x122.jpg\" width=\"500\" height=\"122\" alt=\"GPI-GIS-3\"><\/p>\n<ul>\n<li>Copy the map ID and paste it somewhere like a Notepad file<\/li>\n<\/ul>\n<p>3. Create your map.<\/p>\n<p>Now we ready to create a map by using Esri templates, the below steps show how to create your map:<\/p>\n<ul>\n<li>Select download appropriate template from <a href=\"https:\/\/www.arcgis.com\/home\/gallery.html#c=esri&amp;t=apps&amp;o=modified&amp;f=configurable\"> ArcGIS Gallery<\/a>\n<\/li>\n<li>In this example we will use <a href=\"https:\/\/www.arcgis.com\/home\/item.html?id=f01baaccb4b84bcbb9ac0810e717cae3\"> Public Information<\/a> template<\/li>\n<li>Download template from here <a href=\"https:\/\/github.com\/Esri\/public-information-map-template-js\">https:\/\/github.com\/Esri\/public-information-map-template-js<\/a>\n<\/li>\n<li>Unzip the template file to somewhere on your hard disc and open config\/defaults.js in a text editor<\/li>\n<li>Replace &#8220;webmap&#8221; value with\u00a0 your map ID, also you can change the rest of default configuration as needed<\/li>\n<li>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&#8217;s SimpleHTTPServer which is a quick way to serve files via HTTP\n<ul>\n<li>Before you start, you will need Python installed, then open the command prompt and run the following command &#8220;<code>python -m SimpleHTTPServer &lt;port&gt;<\/code><em>&#8220;,<\/em> finally the URL to the template will be &#8220;<code>https:\/\/localhost:&lt;port&gt;<\/code>&#8221;\u00a0 as shown:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.globalizationpartners.com\/wp-content\/uploads\/2018\/07\/gpi-gis-4_699x337.jpg\" width=\"699\" height=\"337\" alt=\"GPI-GIS-4\"><\/p>\n<ul>\n<li>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,\u00a0 below is an aerial example that uses the same template in our example:<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.globalizationpartners.com\/wp-content\/uploads\/2018\/07\/gpi-gis-5_700x338.jpg\" width=\"700\" height=\"338\" alt=\"GPI-GIS-5\"><\/p>\n<h4>Map Localization<\/h4>\n<p>The Esri template supports many languages, and you can localize your map\u00a0in different languages. To do this, simply set the appropriate locale as the following:<\/p>\n<p>Open index.html in a text editor and add locale to the <strong>dojoConfig<\/strong> as shown:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.globalizationpartners.com\/wp-content\/uploads\/2018\/07\/gpi-gis-6_500x94.jpg\" width=\"500\" height=\"94\" alt=\"GPI-GIS-6\"><\/p>\n<p style=\"text-align: center;\">\u00a0<\/p>\n<p>Additional locales can be set using extra locale<code>.<\/code><\/p>\n<h4>Summary<\/h4>\n<p>GIS affects most of our daily lives, but the vast majority of web map users won&#8217;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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":4370,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[708,709,26,711,710,712],"_links":{"self":[{"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/posts\/4369"}],"collection":[{"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/comments?post=4369"}],"version-history":[{"count":3,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/posts\/4369\/revisions"}],"predecessor-version":[{"id":11454,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/posts\/4369\/revisions\/11454"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/media\/4370"}],"wp:attachment":[{"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/media?parent=4369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/categories?post=4369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/tags?post=4369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}