Skip to content

Commit

Permalink
completed fire integration
Browse files Browse the repository at this point in the history
  • Loading branch information
@dbouwman
dbouwman committed Mar 22, 2013
1 parent 0ab8efd commit d5526ab
Show file tree
Hide file tree
Showing 9 changed files with 251 additions and 105 deletions.
14 changes: 14 additions & 0 deletions css/viewer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,20 @@ border-color: rgba(0,0,0,0);
background-image: none;
}

#fire-tooltip {
z-index: 1000;
position: absolute;
margin: 5px;
padding: 5px;
background-color: #213F65;
background-color: rgba(33, 63, 101,0.65);
color: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display:none;
}

/*==========================*/
/* Layer List */
/*==========================*/
Expand Down
33 changes: 17 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,11 @@
<span class='entypo-rocket'></span>
</a>
<div id="current-item" class="item cursorpointer">
<span id="current-item-name">Current Fires</span>
<span id="current-item-name"></span>
<span id="menu-widget" class="entypo-plus-circled"></span>
<span id="feedback" style="display:none">
<div id="working" class="entypo-cw spin" ></div>
<span id="actions" class="small">doing work loading...</span>
<span id="actions" ></span>
</span>
</div>
<!-- This will contain the legends later on -->
Expand All @@ -40,6 +40,7 @@
<!-- Container for the Layer List -->
<div id="layer-list-region" style="display:none;" class="view"></div>

<div id="fire-tooltip" ></div>
<!-- The Map -->
<div id="map" ></div>

Expand All @@ -50,7 +51,7 @@
List of years for the Historic Fires view will use this<br>
</div>

<div id="right-container" style="display:none;" class="view" >
<div id="right-region" style="display:none;" class="view" >
This is the right container<br/>
We will have charts or Fire Details here <br/>
This text is just to take space
Expand Down Expand Up @@ -159,6 +160,7 @@ <h3>Select a Year to View</h3>
<script type="text/javascript" src="./javascript/RouterModule.js"></script>
<script type="text/javascript" src="./javascript/FireManagerModule.js"></script>
<script type="text/javascript" src="./javascript/FeedbackModule.js"></script>
<script type="text/javascript" src="./javascript/FireInfoModule.js"></script>
<!-- Configuration and Launch -->
<script>
//TODO: Change to use dojo.addOnLoad(function{}) when we wire in Esri Map
Expand All @@ -171,9 +173,8 @@ <h3>Select a Year to View</h3>
//the app
var options = {
menuItems: [
{ name: 'Current Fires', eventToRaise: 'View:CurrentFires' },
{ name: 'Historic Fires', eventToRaise: 'View:HistoricFires' },
{ name: 'Fire Danger Map', eventToRaise: 'View:FireDanger' }
{ name: 'Active Fires', eventToRaise: 'View:CurrentFires' },
{ name: 'Historic Fires', eventToRaise: 'View:HistoricFires' }
],
toolItems: [
{name: 'Search', eventToRaise: 'View:Search', iconclass: 'entypo-search'},
Expand Down Expand Up @@ -230,7 +231,7 @@ <h3>Select a Year to View</h3>
url:'http://wildfire.cr.usgs.gov/ArcGIS/rest/services/geomac_dyn/MapServer',
model:
{
name:'Current Fires',
name:'Active Fires',
layerId:0,
perimeterLayerId:1,
defn:''
Expand All @@ -239,15 +240,15 @@ <h3>Select a Year to View</h3>
historicFiresConfig:{
url:'http://wildfire.cr.usgs.gov/ArcGIS/rest/services/geomac_dyn/MapServer',
years: [
{name:'2013 Fires', layerId:4, perimeterLayerId:5, defn:'year_=2013'},
{name:'2012 Fires', layerId:7, perimeterLayerId:5, defn:'year_=2012'},
{name:'2011 Fires', layerId:8, perimeterLayerId:5, defn:'year_=2011'},
{name:'2010 Fires', layerId:9, perimeterLayerId:5, defn:'year_=2010'},
{name:'2009 Fires', layerId:10, perimeterLayerId:5, defn:'year_=2009'},
{name:'2008 Fires', layerId:11, perimeterLayerId:5, defn:'year_=2008'},
{name:'2007 Fires', layerId:12, perimeterLayerId:5, defn:'year_=2007'},
{name:'2006 Fires', layerId:13, perimeterLayerId:5, defn:'year_=2005'},
{name:'2005 Fires', layerId:14, perimeterLayerId:5, defn:'year_=2005'}
{name:'2013 Fires', year:2013,layerId:4, perimeterLayerId:5, defn:"year_='2013'"},
{name:'2012 Fires', year:2012,layerId:7, perimeterLayerId:18, defn:"year_='2012'"},
{name:'2011 Fires', year:2011,layerId:8, perimeterLayerId:18, defn:"year_='2011'"},
{name:'2010 Fires', year:2010,layerId:9, perimeterLayerId:18, defn:"year_='2010'"},
{name:'2009 Fires', year:2009,layerId:10, perimeterLayerId:18, defn:"year_='2009'"},
{name:'2008 Fires', year:2008,layerId:11, perimeterLayerId:18, defn:"year_='2008'"},
{name:'2007 Fires', year:2007,layerId:12, perimeterLayerId:18, defn:"year_='2007'"},
{name:'2006 Fires', year:2006,layerId:13, perimeterLayerId:18, defn:"year_='2006'"},
{name:'2005 Fires', year:2005,layerId:14, perimeterLayerId:18, defn:"year_='2005'"}
]
},
appRoot:'marionette-map'
Expand Down
2 changes: 2 additions & 0 deletions javascript/CurrentFiresModule.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,15 @@ if (!this.gmm || typeof this.gmm !== 'object') {

//hook up App events
Viewer.vent.on('View:CurrentFires', this.setCurrentFires, this);

},
setCurrentFires:function(){
var data = {
model: this.options.model,
url:this.options.url
};
Viewer.vent.trigger('FireLayer:ConfigChanged', data);
Viewer.vent.trigger('Map:ShowPerimeters',data);
Viewer.vent.trigger('Navbar:ChangeItemName',this.options.model.name);

}
Expand Down
129 changes: 52 additions & 77 deletions javascript/EsriMapModule.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,32 @@ if (!this.gmm || typeof this.gmm !== 'object') {
Viewer.vent.on('Map:HideControls',this.hideControls,this);
Viewer.vent.on('Map:ShowControls',this.showControls,this);
Viewer.vent.on('Map:ShowFires',this.showFires,this);
Viewer.vent.on('Map:ShowPerimeters',this.showPerimeters,this);
this.initMap(this.config.mapConfig);
},
showPerimeters:function(data){
console.log('Caught Map:ShowPerimeters');
//data will have a model and url
//remove the perimeters if it's in the map
var lyr = this.map.getLayer("perimeters");
if(lyr){
this.map.removeLayer(lyr);
}

var perimLayer = new esri.layers.ArcGISDynamicMapServiceLayer(data.url,{id:'perimeters'});
var defn = [];
defn[data.model.perimeterLayerId]=data.model.defn;
perimLayer.setLayerDefinitions(defn);
var vis = [data.model.perimeterLayerId];
perimLayer.setVisibleLayers(vis);

this.map.addLayer(perimLayer);
//we need to create a dynamic map service layer
//set the definition query
//add it to the map

},
showFires:function(featureArray){

//remove the firelayer if it's in the map
var lyr = this.map.getLayer("fireLayer");
if(lyr){
Expand All @@ -72,55 +94,52 @@ if (!this.gmm || typeof this.gmm !== 'object') {
});
//hover handler
dojo.connect(fireLayer, "onMouseOver",function(evt){
//raise an event with the attributes so another view can
//handle displaying the details
console.log('Hovering on ' + evt.graphic.attributes['fire_name']);
$('#fire-tooltip').html(evt.graphic.attributes['fire_name'])
.css('top', evt.pageY)
.css('left', evt.pageX)
.show();
});

dojo.connect(fireLayer,"onMouseOut", function(evt){
$('#fire-tooltip').hide();
});
this.map.addLayer(fireLayer);
console.log("Added fireLayer to the map with "+ featureArray.length + " features");
Viewer.vent.trigger("Feedback:Hide");


},
hideControls:function(){
$('#map_zoom_slider').fadeOut('fast');
},
showControls:function(){
$('#map_zoom_slider').fadeIn('fast');
$('#map_zoom_slider').fadeIn('fast');
},

updateFireLayer:function(data){
console.log('Map:FireLayer:DataChanged Caught');
//do the work!

},
centerAt:function(data){
console.log('Map:CenterAt Caught');
var lvl = this.map.getLevel();
var lvl = this.map.getLevel();
if(lvl < 9){
data.l = 9;
}else{
}else{
data.l = lvl;
}
this.centerAtAndZoom(data);

}
this.centerAtAndZoom(data);
},
centerAtAndZoom:function(data){ // assume webmercator
console.log('Map:CenterAtAndZoom Caught');
console.dir(data);
var pt = new esri.geometry.Point({x: data.x, y: data.y,spatialReference: {wkid:102100 } });
this.map.centerAndZoom(pt,data.l);
},

centerAtLatLongAndZoom:function(data){ //assume geographic
//we could pass along the SR, or a wkid, but that seems like "leakage" to me...
console.log('Map:centerAtLatLongAndZoom Caught');
console.dir(data);
var pt = new esri.geometry.Point({x: data.x, y: data.y,spatialReference: {wkid:4326 } });
this.map.centerAndZoom(pt,data.l);
},


setLayerVisibility: function (data) {
setLayerVisibility: function (data) {
var lyr = this.map.getLayer(data.label);
if (lyr) {
lyr.setVisibility(data.visible);
Expand All @@ -145,7 +164,8 @@ if (!this.gmm || typeof this.gmm !== 'object') {

initMap: function (mapConfig) {
console.log('Map:Controller:initMap');

//raise an event so other modules can take action when the map has been loaded

var initialExtent = new esri.geometry.Extent(mapConfig.initialExtent);

this.map = new esri.Map("map", {
Expand All @@ -164,12 +184,10 @@ if (!this.gmm || typeof this.gmm !== 'object') {
var center = this.map.geographicExtent.getCenter();
var level = this.map.getLevel();
var data = {x:center.x, y:center.y, l: level};
console.log('EsriMapModule: Extent updated - calling Router:SetUrl with ' + data.x + ' ' +data.y);
//raise an event which keeps the map decoupled from the router
Viewer.vent.trigger('Router:SetUrl',data);
},
initBaseLayers: function (basemaps) {
console.log('Map:Controller:initBaseLayers');
_.each(basemaps, function(layer){
switch(layer.type){
case 'ArcGISTiledMapServiceLayer':
Expand All @@ -189,7 +207,6 @@ if (!this.gmm || typeof this.gmm !== 'object') {
},

initOperationalLayers: function (operationalLayers) {
console.log('MapModule:Controller:initOperationalLayers');
_.each(operationalLayers, function (layer) {
switch (layer.type) {
case 'ArcGISDynamicMapServiceLayer':
Expand All @@ -200,7 +217,7 @@ if (!this.gmm || typeof this.gmm !== 'object') {
opacity: layer.opacity
});
lyr.setVisibleLayers(layer.visibleLayers);
console.log(' Added ' + layer.name + ' to the map...');
//console.log(' Added ' + layer.name + ' to the map...');
this.map.addLayer(lyr);
break;
case 'FeatureLayer':
Expand All @@ -214,11 +231,11 @@ if (!this.gmm || typeof this.gmm !== 'object') {
break;
}
}, this);
console.log('Done adding operational layers to the map');
},

onMapLoad: function (map) {
$(window).resize(this.resizeMap);
Viewer.vent.trigger('Map:Loaded');
},
resizeMap: function () {
//resize the map when the browser resizes
Expand Down Expand Up @@ -248,61 +265,19 @@ if (!this.gmm || typeof this.gmm !== 'object') {
}
},
"fields":[
{
"name":"objectid",
"type":"esriFieldTypeOID",
"alias":"objectid"
},
{
"name":"fire_name",
"type":"esriFieldTypeString",
"alias":"fire_name",
"length":30
},
{
"name":"start_date",
"type":"esriFieldTypeString",
"alias":"start_date",
"length":18
},
{
"name":"start_hour",
"type":"esriFieldTypeString",
"alias":"start_hour",
"length":4
},
{
"name":"location",
"type":"esriFieldTypeString",
"alias":"location",
"length":80
},
{
"name":"inc_type",
"type":"esriFieldTypeString",
"alias":"inc_type",
"length":3
},
{
"name":"cause",
"type":"esriFieldTypeString",
"alias":"cause",
"length":1
},
{
"name":"area_",
"type":"esriFieldTypeDouble",
"alias":"area_"
},
{
"name":"area_meas",
"type":"esriFieldTypeString",
"alias":"area_meas",
"length":10
{"name":"objectid","type":"esriFieldTypeOID","alias":"objectid"},
{"name":"fire_name","type":"esriFieldTypeString","alias":"fire_name","length":30},
{"name":"active","type":"esriFieldTypeString","alias":"active","length":50},
{"name":"start_date","type":"esriFieldTypeString","alias":"start_date","length":18},
{"name":"start_hour","type":"esriFieldTypeString","alias":"start_hour","length":4},
{"name":"location","type":"esriFieldTypeString","alias":"location","length":80},
{"name":"inc_type","type":"esriFieldTypeString","alias":"inc_type","length":3},
{"name":"cause","type":"esriFieldTypeString","alias":"cause","length":1},
{"name":"area_","type":"esriFieldTypeDouble","alias":"area_"},
{"name":"area_meas","type":"esriFieldTypeString","alias":"area_meas","length":10
}]
};
return defn;

}
});

Expand Down
Loading

0 comments on commit d5526ab

Please sign in to comment.