Skip to content

images.md

Latest commit

 

History

History
executable file
·
148 lines (138 loc) · 4.63 KB

images.md

File metadata and controls

executable file
·
148 lines (138 loc) · 4.63 KB

##Instructions for finding a photograph for your map

  • Find a photograph of Berlin in Flickr or any other source with EXIF data and a Creative Commons license. For example, Fan Party by Hans-Jörg Aleff.

  • Download a copy of the photograph in Square format and save in the /images folder of your local copy of EUS0991.01.

  • Get the EXIF data from the photograph by clicking on "Show EXIF". Please note that the EXIF data is in degrees, minutes, seconds format.

  • Convert the EXIF data into decimal format using an online converter. Note that you'll need to remove the character codes for the minutes (') and seconds (")

  • Plug your decimal coodinates into Google Maps, remembering to separate them with a comma.

  • Open map.geojson in the \scripts folder of your local copy of EUS0991.01 in the Atom editor.

  • Copy a "feature" from the existing GeoJson. For example,

    {
"type": "Feature",
"properties": {
  "title": "Brandenburg Gate",
  "marker-size": "medium",
  "marker-color": "#3366FF",
  "marker-symbol": "star-stroked",
  "images": [
    ['<img src="images/Brandenburger_Tor_abends.jpg" />',
      "The Brandenburg Gate."
    ],
    ['<img src="images/Brandenburger2.jpg" />',
      "The Brandengurb Gate quadriga at night."
    ]
  ]
},
"geometry": {
  "type": "Point",
  "coordinates": [
    "13.377674",
    "52.516224"
  ]
}
}

  • Edit the GeoJSON to reflect the information about your new point and image. Be sure to include official title and authorial credit in the description of the image. For example,

   {
   "type": "Feature",
   "properties": {
     "title": "Kurfürstendamm",
     "marker-size": "medium",
     "marker-color": "#3366FF",
     "marker-symbol": "star-stroked",
     "images": [
       ['<img src="images/14500796957_8b7486f127_q.jpg" />',
         "Fan Party by Hans-Jörg Aleff."
       ]
     ]
   },
   "geometry": {
     "type": "Point",
     "coordinates": [
       "13.327080",
       "52.503101"
     ]
   }
 }

  • Finally, add your new GeoJSON point to the existing GeoJSON feature collection. For example,

    var geoJson = [{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
  "title": "Brandenburg Gate",
  "marker-size": "medium",
  "marker-color": "#3366FF",
  "marker-symbol": "star-stroked",
  "images": [
    [
      "<img src=\"images/Brandenburger_Tor_abends.jpg\" />",
      "The Brandenburg Gate."
    ],
    [
      "<img src=\"images/Brandenburger2.jpg\" />",
      "The Brandengurb Gate quadriga at night."
    ]
  ]
},
"geometry": {
  "type": "Point",
  "coordinates": [
    "13.377674",
    "52.516224"
  ]
}
}, {
"type": "Feature",
"properties": {
  "title": "Koeningsplatz",
  "marker-size": "medium",
  "marker-color": "#e5c278",
  "marker-symbol": "star-stroked",
  "images": [
    [
      "<iframe width=\"180\"  src=\"http://www.youtube.com/embed/cklBBshc_uQ?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe>",
      "A tour of the Reichstag building."
    ],
    [
      "<img src=\"images/Reichstag_building_Berlin_view_from_west_before_sunset.jpg\" />",
      "The Reichstag building."
    ]
  ]
},
"geometry": {
  "type": "Point",
  "coordinates": [
    "13.376199",
    "52.517539"
  ]
}
}, {
"type": "Feature",
"properties": {
  "title": "Kurfürstendamm",
  "marker-size": "medium",
  "marker-color": "#3366FF",
  "marker-symbol": "star-stroked",
  "images": [
    [
      "<img src=\"images/14500796957_8b7486f127_q.jpg\" />",
      "Fan Party by Hans-Jörg Aleff."
    ]
  ]
},
"geometry": {
  "type": "Point",
  "coordinates": [
    "13.327080",
    "52.503101"
  ]
}
}]

}];

* After saving everything, you should be finished! To check your work, double-click on "index.html" and your new point should now appear on your map.

![Imgur](http://i.imgur.com/gLuv6hd.jpg)