179 строки
6.9 KiB
HTML
179 строки
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
|
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
|
<link href="../content/default.css" rel="stylesheet" />
|
|
<link href="../content/default-responsive.css" rel="stylesheet" />
|
|
<!--[if lt IE 9]>
|
|
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
|
<!--<![endif]-->
|
|
<!--[if gte IE 9]><!-->
|
|
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
|
<!--<![endif]-->
|
|
<script src="../scripts/MapsData/USA.js"></script>
|
|
<script src="../scripts/MapsData/USA_State_PopulationData.js"></script>
|
|
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
|
<script src="../scripts/properties.js" type="text/javascript"></script>
|
|
<script src="../scripts/jsrender.min.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="content-container-fluid">
|
|
<div class="row">
|
|
<div class="cols-sample-area">
|
|
<div style="background-color: #FAFAF9;margin-left:0px;border-color: lightgray;border-width: 2px;opacity: 0.7;height: 45px;width:280px"" >
|
|
<label style="color:Black;font-size:22px;margin:15px;margin-top:7px;margin-left:20px;margin-right:20px;height:25px;font-weight:Normal;">USA Population 2013</label>
|
|
</div>
|
|
<div style="min-height:435px">
|
|
<div id="maps" style="height:inherit;min-height:453px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
jQuery(function ($) {
|
|
$("#maps").ejMap({
|
|
enablePan:false,
|
|
enableAnimation: true,
|
|
layers: [
|
|
{
|
|
layerType: 'geometry',
|
|
enableMouseHover: true,
|
|
enableSelection: true,
|
|
showTooltip: true,
|
|
tooltipTemplate: 'template',
|
|
shapeDataPath: "name",
|
|
labelSettings: {
|
|
showLabels: true,
|
|
labelPath: 'iso_3166_2',
|
|
enableSmartLabel: true
|
|
|
|
},
|
|
legendSettings: {
|
|
showLegend: false,
|
|
positionX: 10,
|
|
positionY: 85,
|
|
height: 20,
|
|
width: 20,
|
|
position: 'none',
|
|
type: 'Layers',
|
|
mode: 'default'
|
|
},
|
|
shapePropertyPath: "name",
|
|
showMapItems: false,
|
|
dataSource: USA_State_PopulationData,
|
|
shapeSettings: {
|
|
autoFill: false,
|
|
highlightBorderWidth:1,
|
|
strokeThickness: 0.5,
|
|
stroke: "white",
|
|
highlightColor: "#DAD1CF",
|
|
highlightStroke: "#1A5D65",
|
|
valuePath: "population",
|
|
selectionColor: "#FFC200",
|
|
selectionStroke: "white",
|
|
selectionStrokeWidth:2.5,
|
|
colorMappings:
|
|
{
|
|
rangeColorMapping: [
|
|
{
|
|
from: 500000,
|
|
to: 1000000,
|
|
color: "#9BC585"
|
|
},
|
|
{
|
|
from: 1000001,
|
|
to: 5000000,
|
|
color: "#D2DB9A"
|
|
|
|
},
|
|
{
|
|
from: 5000001,
|
|
to: 10000000,
|
|
color: "#A4D4BF"
|
|
|
|
},
|
|
{
|
|
from: 10000001,
|
|
to: 40000000,
|
|
color: "#E0C68F"
|
|
|
|
}
|
|
]
|
|
}
|
|
},
|
|
shapeData: usMap
|
|
}
|
|
]
|
|
|
|
});
|
|
});
|
|
|
|
$.views.helpers({
|
|
parseDouble: function (amount) {
|
|
var delimiter = ",";
|
|
var i = parseInt(amount);
|
|
if (isNaN(i)) { return ''; }
|
|
var origi = i; // store original to check sign
|
|
i = Math.abs(i);
|
|
var minus = '';
|
|
if (origi < 0) { minus = '-'; } // sign based on original
|
|
var n = new String(i);
|
|
var a = [];
|
|
while (n.length > 3) {
|
|
var nn = n.substr(n.length - 3);
|
|
a.unshift(nn);
|
|
n = n.substr(0, n.length - 3);
|
|
}
|
|
if (n.length > 0) { a.unshift(n); }
|
|
n = a.join(delimiter);
|
|
amount = minus + n;
|
|
return amount;
|
|
}
|
|
});
|
|
|
|
</script>
|
|
<script id="template" type="application/jsrender">
|
|
<div class="tip" >
|
|
<p class="small">
|
|
<label style="color:white;font-size:11px;font-weight:normal;">State : {{:name}}</label>
|
|
</p>
|
|
<p class="big">
|
|
<label style="color:white;font-size:11px;font-weight:normal;">Count : {{:~parseDouble(population)}}</label>
|
|
</p>
|
|
</div>
|
|
</script>
|
|
|
|
<style type="text/css">
|
|
.e-map{
|
|
background-color:white;
|
|
}
|
|
p.small {line-height:70%;}
|
|
p.big {line-height:110%;}
|
|
|
|
.tip {
|
|
border: 1px solid #4D4D4D;
|
|
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
|
border-radius: 7px;
|
|
margin-right: 25px;
|
|
min-width: 110px;
|
|
padding-top: 9px;
|
|
padding-right: 10px;
|
|
padding-left: 10px;
|
|
width: auto;
|
|
height: auto;
|
|
background: #4D4D4D;
|
|
}
|
|
|
|
</style>
|
|
</body>
|
|
|
|
</html>
|
|
|