How to geocode address in Exhibit Map View

From SIMILE Widgets
Jump to: navigation, search

Registering for Google Maps Key

Google Maps requires that you register for a key in order to embed Google Maps on your web site. Go to Google Maps API - Sign Up and enter the URL of your exhibit page. What you'll get is a long cryptic looking nonsense string which is your Google Maps key, e.g.,

 ABQIAAAA5JLLfCE9c7HAtg25QM2KCRSInwI2_sNfg0jsO21_IrKvxRltZxRh2I8AzcAlossU2kGrVtsZsdfDDA

Tutorial: Looking Up Latitude/Longitude

This tutorial shows how you can get Exhibit to look up latitude/longitude from Google Maps automatically (so that you don't have to do it yourself one address at a time).

Start by saving this data into a file named schools.js somewhere that is served by your web server. <js>

   {
       items: [
           {   label:      "MIT",
               type:       "School",
               address:    "77 Massachusetts Avenue, Cambridge, MA 02139",
               subject:    "Computer Science"
           },
           {   label:      "Harvard Medical School",
               type:       "School",
               address:    "25 Shattuck St., Boston, MA 02115",
               subject:    "Medical"
           },
           {   label:      "Stanford",
               type:       "School",
               address:    "Stanford, CA 94305",
               subject:    "Computer Science"
           },
           {   label:      "CMU",
               type:       "School",
               address:    "5000 Forbes Avenue, Pittsburgh, PA 15213",
               subject:    "Computer Science"
           }
       ]
   }

</js> And then copy this HTML into a file called schools.html in the same directory:

   <html>
   <head>
       <title>Schools</title>
       <link href="schools.js" type="application/json" rel="exhibit/data" />
       <script src="http://static.simile.mit.edu/exhibit/api-2.0/exhibit-api.js"
           type="text/javascript"></script>
       <script src="http://static.simile.mit.edu/exhibit/extensions-2.0/map/map-extension.js?gmapkey="
           type="text/javascript"></script>
   </head> 
   <body>
   
   <button onclick="getLatLng();">Get Lat/Lng</button><br/>
   <textarea id="results" rows="20" style="width: 100%;"></textarea>
   <script type="text/javascript">
       function getLatLng() {
           var database = exhibit.getDatabase();
           Exhibit.MapView.lookupLatLng(
               database.getSubjects("School", "type"),
               ".address",
               "addressLatLng",
               document.getElementById("results"),
               database,
               4
           );
       }
   </script>
   
   </body>
   </html>

You need to change one thing: where the HTML includes map-extension.js, put in your own Google Maps key right after gmapkey=.

Then point your browse at schools.html through an http:// URL (don't just drag the file into your browser—that won't work). Notice the big text box at the bottom of the page and the button just above it. Click on the button, and if all goes well, the text box will be filled up with something like this: <js> { id: 'MIT', addressLatLng: '42.359,-71.093553' }, { id: 'Harvard Medical School', addressLatLng: '42.335743,-71.105138' }, { id: 'Stanford', addressLatLng: '37.423573,-122.161867' }, { id: 'CMU', addressLatLng: '40.444583,-79.942868' } </js> Exhibit has retrieved the "address" property values of all items of type "School", looked up the corresponding latitude/longitude pairs through Google Maps, and then generated JSON data into the given text box that will add "addressLatLng" property values to those items. Now all you need to do is copy that JSON data and insert it into the original schools.js file: <js>

   {
       items: [
           {   label:      "MIT",
               type:       "School",
               address:    "77 Massachusetts Avenue, Cambridge, MA 02139",
               subject:    "Computer Science"
           },
           {   label:      "Harvard Medical School",
               type:       "School",
               address:    "25 Shattuck St., Boston, MA 02115",
               subject:    "Medical"
           },
           {   label:      "Stanford",
               type:       "School",
               address:    "Stanford, CA 94305",
               subject:    "Computer Science"
           },
           {   label:      "CMU",
               type:       "School",
               address:    "5000 Forbes Avenue, Pittsburgh, PA 15213",
               subject:    "Computer Science"
           },
                   
           { id: 'MIT', addressLatLng: '42.359,-71.093553' },
           { id: 'Harvard Medical School', addressLatLng: '42.335743,-71.105138' },
           { id: 'Stanford', addressLatLng: '37.423573,-122.161867' },
           { id: 'CMU', addressLatLng: '40.444583,-79.942868' }            
       ]
   }

</js> BE CAREFUL: Make sure you insert a comma before pasting that generated JSON data.

The mysterious number 4 in the Javascript code specifies the accuracy of geocoding lookup as specified by Google Maps. For example, if we changed Stanford's address to only "California", then an accuracy level of 4 will not give any lat/lng for Stanford; we will have to reduce the level to 2.

There is no restriction on what property name to use for the address (so, it doesn't have to be "address") and what property name to use for the lat/lng result (it doesn't have to be "addressLatLng"). You decide what properties to use.

Now that we have the lat/lng pairs, we can just delete the code from <button to </script> in the HTML.

Tutorial: Adding Map View

After you have edited and saved schools.js (not .html), point your browser to schools.js and hit Refresh just to make sure that its previous version isn't still cached.

Then, modify schools.html as follows:

   <html>
   <head>
       <title>Schools</title>
       <link href="schools.js" type="application/json" rel="exhibit/data" />
       <script src="http://static.simile.mit.edu/exhibit/api-2.0/exhibit-api.js"
           type="text/javascript"></script>
       <script src="http://static.simile.mit.edu/exhibit/extensions-2.0/map/map-extension.js?gmapkey="
           type="text/javascript"></script>
   </head> 
   <body>
       <div ex:role="view"
           ex:viewClass="Map"
           ex:latlng=".addressLatLng"
           ex:colorKey=".subject">
       </div>
   </body>
   </html>

Remember to put in your own Google Maps key.

Load schools.html in your browser and you should now see a map of the schools with markers color-coded by their "subject" property values. Note that you might see only 3 markers, but there are actually 4. If you zoom in close enough to the marker in Boston, you'll see both markers for Harvard and MIT.

Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox