<commit_before>{% extends "base.html" %}
{% load staticfiles %}

{% block header %}
    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
    <style type="text/css">
        .map, #map-1, #map-2{
            position:relative;
            width:100%;
            height:600px;
        }
        .map-legend{
            position:absolute;
            height:200px;
            width:110px;
            right:10px;
            bottom:40px;
            background-color:white;
            border-radius:5px;
        }
    </style>
{% endblock %}

{% block mainbody %}
    <div class="jumbotron">
        <div class="container">
            <h2>Water Use Geoanalyzer</h2>
            
            <p style="text-align: justify">
                This analyzer is an tool based on GIS techniques, which provides a new way to see the traditional data.
                Right now, it helps to visualize the water use data of different fractured wells, as well as create a 
                heatmap based on the well density. People can look into the the well distribution and the attribute of the
                wells directly on map.
            </p>
        </div>
    </div>
    
    <div class="container">
        <h3>Water Use Query</h3>
        <hr>
        <p>**click the circle to show the attributes</p>
        <div class="map">
            <div id="map-1"></div>
            <div class="map-legend">
                <div id="legend-1"></div>
            </div>
        </div>
        
        <h3 style="padding-top:30px">Heatmap Based on Wells Desity</h3>
        <hr>
        <div class="map">
            <div id="map-2"></div>
        </div>
    </div>
{% endblock %}

{% block footer %}
<script src="http://js.arcgis.com/3.13/"></script>
<script type="text/javascript">
    require([
    "esri/arcgis/utils",
    "esri/dijit/Legend",
    "esri/dijit/Scalebar",
    "dojo/domReady!"
    ], function(
        arcgisUtils,
        Legend,
        Scalebar
    ) {
        //var agoId = "4778fee6371d4e83a22786029f30c7e1";
        var agoId = "3474bb4747ac4dfb91307ecd2e27ea8d";
        arcgisUtils.createMap(agoId, "map-1").then(function(response) {
            
            // map
            var map = response.map;
            
            // layers
            var optionalLayers = response.itemInfo.itemData.operationalLayers;
            layer = optionalLayers[0]
            layer.layerObject.setVisibility(true);
            
            //add the scalebar 
            var scalebar = new Scalebar({
              map: map,
              scalebarUnit: "english"
            });
            
            //add the legend. Note that we use the utility method getLegendLayers to get 
            //the layers to display in the legend from the createMap response.
            var legendLayers = arcgisUtils.getLegendLayers(response); 
            var legendDijit = new Legend({
                    map: map,
                    layerInfos: legendLayers
                },"legend-1");
            legendDijit.startup();
        });
    });
</script>
{% endblock %}<commit_msg>Water Use Geoanalyzer Update<commit_after>{% extends "base.html" %}
{% load staticfiles %}

{% block header %}
    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
    <style type="text/css">
        .map, #map-1, #map-2{
            position:relative;
            width:100%;
            height:600px;
        }
        .map-legend{
            position:absolute;
            right:10px;
            bottom:40px;
            background-color:white;
            border-radius:5px;
        }
        #legend-1{
            height:200px;
            width:110px;
        }
        #legend-2{
            height:400px;
            width:150px;
        }
    </style>
{% endblock %}

{% block mainbody %}
    <div class="jumbotron">
        <div class="container">
            <h2>Water Use Geoanalyzer</h2>
            
            <p style="text-align: justify">
                This analyzer is an tool based on GIS techniques, which provides a new way to see the traditional data.
                Right now, it helps to visualize the water use data of different fractured wells, as well as create a 
                heatmap based on the well density. People can look into the the well distribution and the attribute of the
                wells directly on map.
            </p>
        </div>
    </div>
    
    <div class="container">
        <h3>Water Use Query</h3>
        <hr>
        <p>**click the circle to show the attributes</p>
        <div class="map">
            <div id="map-1"></div>
            <div class="map-legend">
                <div id="legend-1"></div>
            </div>
        </div>
        
        <h3 style="padding-top:30px">Heatmap Based on Wells Desity</h3>
        <hr>
        <div class="map">
            <div id="map-2"></div>
            <div class="map-legend">
                <div id="legend-2"></div>
            </div>
        </div>
        
    </div>
{% endblock %}

{% block footer %}
<script src="http://js.arcgis.com/3.13/"></script>
<script type="text/javascript">
    require([
    "esri/arcgis/utils",
    "esri/Color",
    "esri/dijit/Legend",
    "esri/dijit/Scalebar",
    "esri/dijit/PopupTemplate",
    "esri/layers/FeatureLayer",
    "esri/map",
    "esri/renderers/SimpleRenderer",
    "dojo/domReady!"
    ], function(
        arcgisUtils,
        Color,
        Legend,
        Scalebar,
        PopupTemplate,
        FeatureLayer,
        Map,
        SimpleRenderer
    ){
        var map = new Map("map-1", {
            basemap: "topo",
            center: [-98.88, 28.5],
            zoom: 10
        });
        var template = new PopupTemplate({
            title: "Attributes",
            fieldInfos:[
                {
                    fieldName:"api",
                    label:"API", 
                    visible:true
                }, 
                {
                    fieldName:"well_name", 
                    label:"WellName", 
                    visible:true
                },
                {
                    fieldName:"fracture_d", 
                    label:"Fracture Date", 
                    visible:true,
                    format:{ dateFormat:"shortDate" }
                },
                {
                    fieldName:"state", 
                    label:"State", 
                    visible:true
                },
                {
                    fieldName:"county", 
                    label:"County", 
                    visible:true
                },
                {
                    fieldName:"horizontal", 
                    label:"Horizontal Length", 
                    visible:true
                },
                {
                    fieldName:"water_use", 
                    label:"Water Use", 
                    visible:true
                },
                {
                    fieldName:"wu_per_foo", 
                    label:"Water Use Per Foot", 
                    visible:true
                }
            ]
        });
        var renderer = new SimpleRenderer({
            symbol: {
                type: "esriSMS",
                style: "esriSMSCircle",
                outline:{
                    width: 0.5,
                    color: [160, 160,160, 70],
                }
            },
            sizeInfo: {
                field: "water_use",
                valueUnit: "inches",
                valueRepresentation: "diameter"
            },
            colorInfo: {
                field: "water_use",
                minDataValue: 20000,
                maxDataValue: 260000,
                colors: [
                    new Color([0, 0, 255]), 
                    new Color([0, 255, 0]), 
                    new Color([255, 255, 0]), 
                    new Color([255, 0, 0])
                ]
            }
        });
        serviceUrl = "http://services1.arcgis.com/KNdRU5cN6ENqCTjk/arcgis/rest/services/WaterUsePoint/FeatureServer/0";
        pointLayer = new FeatureLayer(serviceUrl, {
            mode: FeatureLayer.MODE_SNAPSHOT,
            infoTemplate: template,
            outFields: ["*"]
        });
        pointLayer.setRenderer(renderer);
        map.addLayer(pointLayer);
        
        var legend = new Legend({
                map: map
            }, "legend-1");
        legend.startup();
        legend.refresh([{
            layer: pointLayer,
            title: " "
        }])
        
        var scalebar = new Scalebar({
            map: map,
            // "dual" displays both miles and kilmometers
            // "english" is the default, which displays miles
            // use "metric" for kilometers
            scalebarUnit: "dual"
        });
    });
</script>

<script type="text/javascript">
    require([
    "esri/arcgis/utils",
    "esri/dijit/Legend",
    "esri/dijit/Scalebar",
    "esri/layers/FeatureLayer",
    "dojo/domReady!"
    ], function(
        arcgisUtils,
        Legend,
        Scalebar,
        FeatureLayer
    ) {
        var serviceID = "1e4a0319e4ff4284b4e7bad92551006b";
        arcgisUtils.createMap(serviceID, "map-2").then(function(response) {
            
            // map
            var map = response.map;
            
            //add the scalebar
            var scalebar = new Scalebar({
              map: map,
              scalebarUnit: "dual"
            }); 
            
            //add the legend.
            var legendLayers = arcgisUtils.getLegendLayers(response);
            var legend = new Legend({
                    map: map,
                    layerInfos: legendLayers
                },"legend-2");
            legend.startup();
        });
    });
</script>
{% endblock %}
{'fraction_non_alphanumeric': 0.11548663538053458, 'fraction_numerical': 0.021322179147112832, 'mean_word_length': 1.2634495497575617, 'pattern_counts': {'":': 0, '<': 83, '<?xml version=': 0, '>': 83, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4623281', 'n_tokens_mistral': 2957, 'n_tokens_neox': 2678, 'n_words': 601}