Hide Table of Contents
View Flickr data as graphics on a map sample in sandbox
Flickr data as graphics on a map

Description

This sample displays photos from flickr on a map. esri.request is used to query flickr to find geotagged photos that match the input tag. Once the results are returned we can loop through them and add each photo to the map.

A PopupTemplate is defined for each graphic to display the photo image and description.

Code

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Flickr Photos</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
    <style>
      html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }

      .esriPopup  img{
        max-width: 200px;
        max-height: 133px;
        border: solid 2px #000;
      }
      body {
        background-color:#FFF;
        overflow:hidden;
        font-family:"Trebuchet MS";
      }
    </style>
    <script src="https://js.arcgis.com/3.46/"></script>
    <script>
      dojo.require("esri.map");

      var map;

      function init() {
        map = new esri.Map("map",{
          basemap: "dark-gray-vector",
          center: [ 6.15 , 46.20 ], //long, lat
          zoom: 3
        });
        dojo.connect(map,"onLoad", loadPhotos);
      }

      function loadPhotos(){
        var flickrPhotos = esri.request({
          url: "https://api.flickr.com/services/feeds/geo",
          content:{
              format:"json",
              tagmode: "any",
              tags: "mountain"
          },
          callbackParamName: "jsoncallback"
        });
        flickrPhotos.then(addPhotos);
      }

      function addPhotos(data){
       var symbol = new esri.symbol.PictureMarkerSymbol("https://upload.wikimedia.org/wikipedia/commons/4/4c/Flickr-icon.png", 32, 32);
       var template = new esri.dijit.PopupTemplate({
          title: "{title}",
          description:"{description}"
        });

        dojo.forEach(data.items, function(item){
          var loc = new esri.geometry.Point(item.longitude, item.latitude);
          map.graphics.add(new esri.Graphic(loc, symbol, item, template));
        });

      }
      dojo.ready(init);
    </script>
  </head>
  <body class="claro">
    <div id="map"></div>
  </body>
</html>
 
          
Show Modal