Using different Webmapsp within one map

2577
17
11-24-2013 06:30 AM
JelleStuurman
New Contributor
I am looking for a way where I have a map in which I can add different web map ID's. Each web map covers the same extent of a different area showing different data.

My question is if it is possible to load different maps within this storytelling playlist template instead of points which brings me to you to a new link (web map / application). Is the story telling playlist the closest solution to realize this or is there another standard template where it is possible to load more web map ID's int one webpage? Please note I do not have much programming experience and therefore I am looking for the simplest solution.
17 Replies
JulieK
by
Occasional Contributor

thanks!

I included the webmap id and filterField: "Project Type" in config.yml file . Now when I preview it, I get my map but the filter tool doesn't appear. Is there anything else I need to configure to get the filter tool?

0 Kudos
StephenSylvia
Esri Regular Contributor

try using "projectType" instead of "Project Type." It's possible that the space is messing things up. Also, make sure to change it in both the app config and the point layer in the map.

0 Kudos
JulieK
by
Occasional Contributor

Thanks, changing the field name to 'projectType' fixed it. I get the filter tool now:)

Next, I created two buttons and added click events for the buttons in the addEvents()

how do I ' select all the "playlist-items" and add the class "hidden-layer" '? Does 'hidden-filter' signify  hidden-layer here in addEvents()?

function addEvents()

  {

  $('.button').click(function() {

  $(".playlist-item").addClass("hidden-filter")

  })

  $('.button2').click(function() {

  })

  $(".playlist-item").click(function(){

  if ($(this).hasClass("selected")){

  onSelect(item,true);

  }

  else{

  $(".playlist-item").removeClass("selected");

  $(this).addClass("selected");

  var item = {

  layerId: $(this).attr("layer-id"),

  objectId: $(this).attr("object-id")

  };

  onSelect(item,false);

  }

  });

  if(!has("touch")){

  $(".playlist-item").mouseover(function(){

  $(".playlist-item").removeClass("highlight");

  $(this).addClass("highlight");

  var item = {

  layerId: $(this).attr("layer-id"),

  objectId: $(this).attr("object-id")

  };

  onHighlight(item);

  });

  $(selector).mouseout(function(){

  $(".playlist-item").removeClass("highlight");

  onRemoveHightlight();

  });

  }

  $(".select-all").click(function(){

  if ($(this).find("input").prop("checked")){

  $(".filter-select input").prop("checked", true);

  $(".playlist-item").removeClass("hidden-filter");

  }

  else{

  $(".filter-select input").prop("checked", false);

  $(".playlist-item").addClass("hidden-filter");

  }

  setItemResults();

  });

  }

0 Kudos
StephenSylvia
Esri Regular Contributor

This should work:

$('.button').click(function() {

  $(".playlist-item").addClass("hidden-layer");

  $(".playlist-item[layer-id='" + you_first_layer_id + "']").removeClass("hidden-layer");

});

$('.button2').click(function() {

  $(".playlist-item").addClass("hidden-layer");

  $(".playlist-item[layer-id='" + you_second_layer_id + "']").removeClass("hidden-layer");

});

0 Kudos
JulieK
by
Occasional Contributor

Absolutely!! that worked !! thanks for your help:)

0 Kudos
JulieK
by
Occasional Contributor

I am not able to keep the layer id static in arcgis. Every time I load a csv file, it gives a different layer id.

What do I do so I can edit the 'layer id' in index file like we do for web map ids. Added variables in config.yml and then what?

please help!!

0 Kudos
StephenSylvia
Esri Regular Contributor

In the layout.erb file, find the configOptions and add a new variable to read the variable you defined in the config.yml file:

var configOptions = {

layerId: "<%= data.config.youVariableNameInConfigYML %>",

// The web map id

webmap: "<%= data.config.webmap %>",

// Enter a title, if no title is specified, the webmap's title is used.

Then you should be able to replace the actual layer id string with "configOptions.layerId."

0 Kudos
JulieK
by
Occasional Contributor

Thanks!! that worked:)

0 Kudos