PictureMarkerSymbol and webmap

VirginieVauthrot · ‎01-20-2014

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

JamieSimko · ‎01-20-2014

You may have better results if you add a GraphicsLayer to the map and then add the marker to that graphics layer.

I've tried adding directly to map.graphics with no success in the past but doing the same thing on a new graphic layer worked.

                
require(["esri/layers/GraphicsLayer"], function (GraphicsLayer) {
    var tempLayer = new GraphicsLayer();
    map.addLayer(tempLayer);
});

And then you can do:
tempLayer.add(graphic);

I also noticed that setPath doesn't take any parameters according to the API documents. It looks like it is probably a bug in the docs though.

VirginieVauthrot · ‎01-21-2014

Thank you for your code but it doesn't work for me.

Does I have to add the GraphicLayer before or after the creation of my webmap ? Actually the webmap is loading but the marker not. Have you an example of code that could help me ?

Thanks,

Virginie

JonathanUihlein · ‎01-21-2014

I spent a few minutes on this in jsfiddle and could not get the map's onload function to fire correctly.

Upon further inspection, I notice this error in the console:

dojo.io.script error Error: File not found. Wrong url or out of memory.



The resource from this URL is not text: http://js.arcgis.com/3.8/

This is *after* initializing the webmap and having thousands of points successfully load.

This leads me to believe there is simply too much data included in the webmap itself.

You may want to shrink your data-set or rethink how you want to deliver the data via feature services.

In short: this is not a code issue but a data issue.
Separate some of the data from the webmap and use a feature service if possible.