virg.vthrt

PictureMarkerSymbol and webmap

Discussion created by virg.vthrt on Jan 20, 2014
Latest reply on Jan 21, 2014 by JUihlein-esristaff
Hello everyone,

I've created an application with the ArcGIS API for Javascript that displays a web map from ArcGIS.com. I want to add to my code a PictureMarkerSymbol independently of my web map. The objective of my approach is having on the same application my web map and my PictureMarkerSymbol. I have already created a code but it is not working for me.

Does someone knows if is it possible to add a MarkerSymbol to a webmap application through the ArcGIS API Javascript ?

I copy the code that I have created and that is not working for me :

[HTML]<!DOCTYPE html>
  <html>
  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Home ZAE</title>

  <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
  <style>
    #HomeButton {
    position: absolute;
    top: 95px;
    left: 20px;
    z-index: 50;
    }
    html,body,#mapDiv,.map.container{
      padding:0;
      margin:0;
      height:100%;
    }
  </style>

  <script src="http://js.arcgis.com/3.8/"></script>
  <script>var dojoConfig = { parseOnLoad:true };</script>
  <script>
   
    require([
      "esri/map",
      "esri/geometry/Point",
      "esri/symbols/SimpleMarkerSymbol", "esri/graphic", "esri/InfoTemplate",
      "esri/dijit/HomeButton",
      "esri/arcgis/utils",
      "dojo/_base/array", "dojo/dom-style",
      "dojo/domReady!"
      ],
      function ( Map, Point,
      SimpleMarkerSymbol, Graphic, InfoTemplate,
      HomeButton, arcgisUtils, arrayUtils, domStyle, ColorPicker){
          arcgisUtils.createMap("7a3866cfce0448cfbd3b6923e82c8241","mapDiv").then(function(response){
      var map = response.map;
          var home = new HomeButton({map: map}, "HomeButton");
          home.startup();
     
      map.on("load", mapLoaded);
     
      function mapLoaded(){    

      var points = [[5.6553, 46.2577]];
      var iconPath = "M24.0,2.199C11.9595,2.199,2.199,11.9595,2.199,24.0c0.0,12.0405,9.7605,21.801,21.801,21.801c12.0405,0.0,21.801-9.7605,21.801-21.801C45.801,11.9595,36.0405,2.199,24.0,2.199zM31.0935,11.0625c1.401,0.0,2.532,2.2245,2.532,4.968S32.4915,21.0,31.0935,21.0c-1.398,0.0-2.532-2.2245-2.532-4.968S29.697,11.0625,31.0935,11.0625zM16.656,11.0625c1.398,0.0,2.532,2.2245,2.532,4.968S18.0555,21.0,16.656,21.0s-2.532-2.2245-2.532-4.968S15.258,11.0625,16.656,11.0625zM24.0315,39.0c-4.3095,0.0-8.3445-2.6355-11.8185-7.2165c3.5955,2.346,7.5315,3.654,11.661,3.654c4.3845,0.0,8.5515-1.47,12.3225-4.101C32.649,36.198,28.485,39.0,24.0315,39.0z";
      var initColor = "#050505";
       
      arrayUtils.forEach(points, function(point) {

      var graphic = new Graphic(new Point(point), createSymbol(iconPath, initColor));
       
        map.graphics.add(graphic);
        });
         
        };
       
        function createSymbol(path, color){
          var markerSymbol = new esri.symbol.SimpleMarkerSymbol();
          markerSymbol.setPath(path);
          markerSymbol.setColor(new dojo.Color(color));
          markerSymbol.setOutline(null);
          return markerSymbol;
        };
     
          });
      }
     );
    
  </script>
  </head>

  <body class="claro">
  <div id="mapDiv" class="mapDiv">
    <div id="HomeButton"></div>
  <div id="picker1"></div>
  </body>
  </html>[/HTML]

Thank you for your help.
Virginie

Outcomes