https://caltrans.maps.arcgis.com/apps/MapSeries/index.html?appid=9c9b080c67af4d2db74b663efba971bd.
brandon p
2

Hey Tim,

I have the javascript part below. I couldn’t get the font-awesome to switch from picture to car onclick for some reason too.

<script type=”text/javascript” src=”app/main-config.js”>
 require([
 ‘dojo/topic’,
 “esri/virtualearth/VETiledLayer”,
 “esri/layers/ArcGISTiledMapServiceLayer”,
 “esri/layers/ArcGISDynamicMapServiceLayer”,
 “esri/layers/OpenStreetMapLayer”
 ], function(
 topic,
 VETiledLayer,
 ArcGISTiledMapServiceLayer,
 ArcGISDynamicMapServiceLayer,
 OpenStreetMapLayer
 ) {
 // Show tooltips
 $(“[data-toggle=’tooltip’]”).tooltip({
 trigger : ‘hover’,
 container: ‘body’
 }); 
 
 var mybase = ‘no street’;
 init();
 topic.subscribe(“story-loaded-map”, function(evt){
 whatmap();
 setTimeout(mapready(), 1000); 
 });
 function mapready(){
 topic.subscribe(‘story-load-section’, whatmap);
 }
 // Switches Basemap between aerial and topo
 function init(){
 $(“#basemapchange”).click(function () {
 var basemap = app.map.getLayer(app.map.layerIds[0]);
 app.map.removeLayer(basemap);
 if (mybase == ‘image’){
 //// Your topo Layer, uncomment whichever layer you are using.
 //var newbase = new ArcGISTiledMapServiceLayer(“https://server.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer"); //Street
 var newbase = new ArcGISTiledMapServiceLayer(“https://server.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer"); // Topo
 //var newbase = new ArcGISTiledMapServiceLayer(“https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer"); // National Geographic
 //var newbase = new OpenStreetMapLayer(); // Open Street
 mybase = ‘no street’;
 $(‘#streetbut’).removeClass().addClass(‘fa fa-picture-o’);
 $(“#basemapchange”).attr(‘title’, ‘Show Aerial’).tooltip(‘fixTitle’).tooltip(‘show’);
 $(“#basemapchange”).blur();
 } else {
 //// Your aerial Layer
 /*var newbase = new VETiledLayer({
 bingMapsKey: “-Your Bing Key-”,
 mapStyle: VETiledLayer.MAP_STYLE_AERIAL_WITH_LABELS
 }); //BING AERIAL */
 var newbase = new ArcGISTiledMapServiceLayer(“https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer");
 mybase = ‘image’;
 $(‘#streetbut’).removeClass().addClass(‘fa fa-car’);
 $(“#basemapchange”).attr(‘title’, ‘Show Street’).tooltip(‘fixTitle’).tooltip(‘show’);
 $(“#basemapchange”).blur();
 }
 
 app.map.addLayer(newbase,0);
 });
 }
 
 // If the Mainstage media is changed show/hide the street view button
 topic.subscribe(“story-perform-action-media”, function(media){
 if (media.type == “webpage”){
 $(“#basemapchange”).hide();
 } else {
 $(“#basemapchange”).fadeIn();
 }
 });
 
 $(“.mediaBackContainer”).click(function(){
 $(“#basemapchange”).fadeIn();
 });
 
 function whatmap(){
 whatisit = app.data.getCurrentSection();
 infoIneed = whatisit.media.type;
 if (infoIneed == “webmap”){
 // In case the map is an aerial already
 var basemaptype = app.map.getLayer(app.map.layerIds[0]);
 if (basemaptype.url == “https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer" || basemaptype.url == “http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" || basemaptype.bingMapsKey == “-Your Bing Key-” ) {
 mybase = ‘image’;
 $(‘#streetbut’).removeClass().addClass(‘fa fa-car’);
 $(“#basemapchange”).attr(‘title’, ‘Show Street’).tooltip(‘fixTitle’);
 } else {
 $(‘#streetbut’).removeClass().addClass(‘fa fa-picture-o’);
 $(“#basemapchange”).attr(‘title’, ‘Show Aerial’).tooltip(‘fixTitle’);
 mybase = ‘no street’;
 }
 $(“#basemapchange”).fadeIn();
 } else {
 $(“#basemapchange”).hide();
 }
 }
 //////////////////////////////////////////////////////////////
 
 });
 </script>

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.