Repository navigation
Expand file tree
/
Copy pathcolor-mapping-stack.json
More file actions
1 lines (1 loc) · 19 KB
/
Copy pathcolor-mapping-stack.json
File metadata and controls
1 lines (1 loc) · 19 KB
1
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/maps/color-mapping/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div id=\"template\" style=\"display:none\">\n <div class=\"toolback\">\n <div class=\"listing2\">\n <center>\n ${State} \n </center>\n </div>\n <hr style=\"margin-top: 2px;margin-bottom:5px;border:0.5px solid #DDDDDD\">\n <div>\n <center> <span class=\"listing1\">Inches : </span><span class=\"listing2\">${inches}</span></center>\n </div> \n <div>\n <center> <span class=\"listing1\">Category : </span><span class=\"listing2\">${value}</span> </center>\n </div>\n </div>\n \n</div>\n<div class=\"col-lg-9 control-section\">\n <div class=\"content-wrapper\">\n <div id=\"default-container\"></div>\n <div style=\"float: right; margin-right: 10px;\">Source:\n <a href=\"https://www.currentresults.com/Weather/US/average-state-precipitation-in-spring.php\" target=\"_blank\">www.currentresults.com</a>\n </div>\n </div>\n</div>\n<!-- Property Panel -->\n<div class=\"col-lg-3 property-section\">\n <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n <tbody>\n <tr style=\"height: 50px\">\n <td style=\"width: 10%\">\n <div class=\"property-text\">Color Mapping Type</div>\n </td>\n <td style=\"width: 30%;\">\n <select autocomplete=\"off\" id=\"colorMapping\">\n <option value=\"RangeColorMapping\" selected>Range</option>\n <option value=\"EqualColorMapping\">Equal</option>\n <option value=\"DesaturationColorMapping\">Desaturation</option>\n </select>\n </td>\n </tr>\n <tr>\n <td style=\"width: 40%\">\n <div class=\"property-text\" id=\"text1\" style=\"display: none;\"> Change Opacity</div>\n </td>\n <td style=\"width: 40%;\">\n <div id=\"input1\" style=\"display: none\">\n <input type=\"checkbox\" id=\"opacity\">\n </div>\n </td>\n </tr>\n <tr>\n <td style=\"width: 50%\">\n <div class=\"property-text\" id=\"text2\" style=\"margin-top:12%; display: none\">Min Opacity</div>\n </td>\n <td style=\"width: 50%;\">\n <div id=\"input2\" style=\"display: none\">\n <input type=\"range\" id=\"minopacity\" step=\"0.1\" value=\"0.5\" min=\"0\" max=\"1\" style=\"width:100%;margin-top: 20%\">\n </div>\n </td>\n </tr>\n <tr>\n <td style=\"width: 50%\">\n <div class=\"property-text\" id=\"text3\" style=\"margin-top:12%; display: none\">Max Opacity</div>\n </td>\n <td style=\"width: 50%;\">\n <div id=\"input3\" style=\"display: none\">\n <input type=\"range\" id=\"maxopacity\" step=\"0.1\" value=\"1\" min=\"0\" max=\"1\" style=\"width:100%;margin-top: 20%\">\n </div>\n </td>\n </tr> \n </tbody>\n </table>\n</div>\n\n\n","index.js":"{{ripple}}\n var maps = new ej.maps.Maps({\n\n titleSettings: {\n text: 'Spring Precipitation Averages of US States',\n textStyle: {\n size: '16px'\n }\n },\n zoomSettings: {\n enable: false\n },\n legendSettings: {\n visible: true,\n position: 'Bottom',\n height: '10',\n width: '80%',\n mode: 'Interactive',\n titleStyle: {\n size: '18px'\n },\n title: {\n text: 'Inches'\n },\n },\n layers: [\n {\n dataSource: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/color-mapping.json'),\n shapeDataPath: 'State',\n shapeData: new ej.maps.MapAjax('//ej2.syncfusion.com/javascript/demos/src/maps/map-data/usa.json'),\n shapePropertyPath: 'name',\n shapeSettings: {\n colorValuePath: 'inches',\n fill: '#E5E5E5',\n border: {\n color: 'black',\n width: 0.2\n },\n colorMapping: [\n {\n from: 0.1, to: 1, color: '#DEEBAE', label: '0 - 1'\n },\n {\n from: 1, to: 2, color: '#A4D6AD', label: '1 - 2'\n },\n {\n from: 2, to: 3, color: '#37AFAB', label: '2 - 3'\n },\n {\n from: 3, to: 4, color: '#547C84', label: '3 - 4'\n },\n {\n from: 4, to: 5, color: '#CEBF93', label: '4 - 5'\n },\n {\n from: 5, to: 6, color: '#a69d70', label: '5 - 6'\n },\n ],\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'State',\n template: '#template'\n },\n }\n ]\n });\n maps.appendTo('#default-container');\n // Code for Property Panel\n var opacity;\n var highlightCheckBox = new ej.buttons.CheckBox({\n change: opacity, checked: false\n }, '#opacity');\n document.getElementById('minopacity').onpointermove = document.getElementById('minopacity').ontouchmove =\n document.getElementById('minopacity').onchange = function () {\n if (highlightCheckBox.checked && !highlightCheckBox.disabled) {\n var slider = document.getElementById('minopacity');\n var minOpacity = parseFloat(slider.value);\n maps.layers[0].shapeSettings.colorMapping[0].minOpacity = minOpacity;\n maps.layers[0].shapeSettings.colorMapping[1].minOpacity = minOpacity;\n maps.refresh();\n }\n };\n document.getElementById('maxopacity').onpointermove = document.getElementById('maxopacity').ontouchmove =\n document.getElementById('maxopacity').onchange = function () {\n if (highlightCheckBox.checked && !highlightCheckBox.disabled) {\n var slider = document.getElementById('maxopacity');\n var maxOpacity = parseFloat(slider.value);\n maps.layers[0].shapeSettings.colorMapping[0].maxOpacity = maxOpacity;\n maps.layers[0].shapeSettings.colorMapping[1].maxOpacity = maxOpacity;\n maps.refresh();\n }\n };\n highlightCheckBox.change = opacity = function (e) {\n var minOpacity = document.getElementById('minopacity');\n var maxOpacity = document.getElementById('maxopacity');\n if (e.checked) {\n document.getElementById('text3').style.display = 'block';\n document.getElementById('input3').style.display = 'block';\n document.getElementById('text2').style.display = 'block';\n document.getElementById('input2').style.display = 'block';\n maps.layers[0].shapeSettings.colorMapping[0].minOpacity = parseFloat(minOpacity.value);\n maps.layers[0].shapeSettings.colorMapping[0].maxOpacity = parseFloat(maxOpacity.value);\n maps.layers[0].shapeSettings.colorMapping[1].minOpacity = parseFloat(minOpacity.value);\n maps.layers[0].shapeSettings.colorMapping[1].maxOpacity = parseFloat(maxOpacity.value);\n minOpacity.disabled = false;\n maxOpacity.disabled = false;\n }\n else {\n document.getElementById('text2').style.display = 'none';\n document.getElementById('input2').style.display = 'none';\n document.getElementById('text3').style.display = 'none';\n document.getElementById('input3').style.display = 'none';\n maps.layers[0].shapeSettings.colorMapping[0].minOpacity = null;\n maps.layers[0].shapeSettings.colorMapping[0].maxOpacity = null;\n maps.layers[0].shapeSettings.colorMapping[1].minOpacity = null;\n maps.layers[0].shapeSettings.colorMapping[1].maxOpacity = null;\n minOpacity.disabled = true;\n maxOpacity.disabled = true;\n }\n maps.refresh();\n };\n var sampleValue = new ej.dropdowns.DropDownList({\n index: 0,\n placeholder: 'Range ColorMaping',\n width: '110%',\n change: function () {\n var element = sampleValue.value.toString();\n if (element === 'RangeColorMapping') {\n document.getElementById('text3').style.display = 'none';\n document.getElementById('input3').style.display = 'none';\n document.getElementById('text1').style.display = 'none';\n document.getElementById('input1').style.display = 'none';\n document.getElementById('text2').style.display = 'none';\n document.getElementById('input2').style.display = 'none';\n maps.layers[0].shapeSettings.colorValuePath = 'inches';\n maps.layers[0].shapeSettings.colorMapping[0].from = 0.1;\n maps.layers[0].shapeSettings.colorMapping[0].to = 1;\n maps.layers[0].shapeSettings.colorMapping[0].color = '#DEEBAE';\n maps.layers[0].shapeSettings.colorMapping[0].label = '0 - 1';\n maps.layers[0].shapeSettings.colorMapping[0].value = null;\n maps.layers[0].shapeSettings.colorMapping[1].from = 1;\n maps.layers[0].shapeSettings.colorMapping[1].to = 2;\n maps.layers[0].shapeSettings.colorMapping[1].color = '#A4D6AD';\n maps.layers[0].shapeSettings.colorMapping[1].label = '1 - 2';\n maps.layers[0].shapeSettings.colorMapping[1].value = null;\n maps.layers[0].shapeSettings.colorMapping[2].from = 2;\n maps.layers[0].shapeSettings.colorMapping[2].to = 3;\n maps.layers[0].shapeSettings.colorMapping[2].color = '#37AFAB';\n maps.layers[0].shapeSettings.colorMapping[2].label = '2 - 3';\n maps.layers[0].shapeSettings.colorMapping[2].value = null;\n maps.layers[0].shapeSettings.colorMapping[3].from = 3;\n maps.layers[0].shapeSettings.colorMapping[3].to = 4;\n maps.layers[0].shapeSettings.colorMapping[3].color = '#547C84';\n maps.layers[0].shapeSettings.colorMapping[3].label = '3 - 4';\n maps.layers[0].shapeSettings.colorMapping[3].value = null;\n maps.layers[0].shapeSettings.colorMapping[4].from = 4;\n maps.layers[0].shapeSettings.colorMapping[4].to = 5;\n maps.layers[0].shapeSettings.colorMapping[4].color = '#CEBF93';\n maps.layers[0].shapeSettings.colorMapping[4].label = '4 - 5';\n maps.layers[0].shapeSettings.colorMapping[4].value = null;\n maps.layers[0].shapeSettings.colorMapping[5].from = 5;\n maps.layers[0].shapeSettings.colorMapping[5].to = 6;\n maps.layers[0].shapeSettings.colorMapping[5].color = '#a69d70';\n maps.layers[0].shapeSettings.colorMapping[5].label = '5 - 6';\n maps.layers[0].shapeSettings.colorMapping[5].value = null;\n maps.legendSettings.title.text = 'Inches';\n maps.refresh();\n }\n else if (element === 'EqualColorMapping') {\n document.getElementById('text1').style.display = 'none';\n document.getElementById('input1').style.display = 'none';\n document.getElementById('text2').style.display = 'none';\n document.getElementById('input2').style.display = 'none';\n document.getElementById('text3').style.display = 'none';\n document.getElementById('input3').style.display = 'none';\n maps.layers[0].shapeSettings.colorValuePath = 'value';\n maps.layers[0].shapeSettings.colorMapping[0].from = null;\n maps.layers[0].shapeSettings.colorMapping[0].to = null;\n maps.layers[0].shapeSettings.colorMapping[0].color = '#DEEBAE';\n maps.layers[0].shapeSettings.colorMapping[0].label = null;\n maps.layers[0].shapeSettings.colorMapping[0].value = 'Low';\n maps.layers[0].shapeSettings.colorMapping[1].from = null;\n maps.layers[0].shapeSettings.colorMapping[1].to = null;\n maps.layers[0].shapeSettings.colorMapping[1].value = 'Moderate';\n maps.layers[0].shapeSettings.colorMapping[1].color = '#A4D6AD';\n maps.layers[0].shapeSettings.colorMapping[1].label = null;\n maps.layers[0].shapeSettings.colorMapping[5].label = null;\n maps.layers[0].shapeSettings.colorMapping[2].to = null;\n maps.layers[0].shapeSettings.colorMapping[2].from = null;\n maps.layers[0].shapeSettings.colorMapping[2].color = '#37AFAB';\n maps.layers[0].shapeSettings.colorMapping[2].value = 'High';\n maps.layers[0].shapeSettings.colorMapping[2].label = null;\n maps.layers[0].shapeSettings.colorMapping[3].to = null;\n maps.layers[0].shapeSettings.colorMapping[5].color = null;\n maps.layers[0].shapeSettings.colorMapping[3].color = null;\n maps.layers[0].shapeSettings.colorMapping[3].from = null;\n maps.layers[0].shapeSettings.colorMapping[4].value = null;\n maps.layers[0].shapeSettings.colorMapping[5].from = null;\n maps.layers[0].shapeSettings.colorMapping[3].label = null;\n maps.layers[0].shapeSettings.colorMapping[4].from = null;\n maps.layers[0].shapeSettings.colorMapping[4].to = null;\n maps.layers[0].shapeSettings.colorMapping[3].value = null;\n maps.layers[0].shapeSettings.colorMapping[4].color = null;\n maps.layers[0].shapeSettings.colorMapping[4].label = null;\n maps.layers[0].shapeSettings.colorMapping[5].to = null;\n maps.layers[0].shapeSettings.colorMapping[5].value = null;\n maps.legendSettings.title.text = 'Category';\n maps.refresh();\n }\n if (element === 'DesaturationColorMapping') {\n document.getElementById('text1').style.display = 'block';\n document.getElementById('input1').style.display = 'block';\n var minOpacity = document.getElementById('minopacity');\n var maxOpacity = document.getElementById('maxopacity');\n if (highlightCheckBox.checked) {\n document.getElementById('text2').style.display = 'block';\n document.getElementById('input2').style.display = 'block';\n document.getElementById('text3').style.display = 'block';\n document.getElementById('input3').style.display = 'block';\n maps.layers[0].shapeSettings.colorMapping[0].minOpacity = parseFloat(minOpacity.value);\n maps.layers[0].shapeSettings.colorMapping[0].maxOpacity = parseFloat(maxOpacity.value);\n }\n else {\n maps.layers[0].shapeSettings.colorMapping[0].minOpacity = null;\n maps.layers[0].shapeSettings.colorMapping[0].maxOpacity = null;\n }\n maps.layers[0].shapeSettings.colorValuePath = 'inches';\n maps.layers[0].shapeSettings.colorMapping[0].from = 0.1;\n maps.layers[0].shapeSettings.colorMapping[0].to = 6;\n maps.layers[0].shapeSettings.colorMapping[0].color = ['#F0D6AD', '#19547B'];\n maps.layers[0].shapeSettings.colorMapping[0].value = null;\n maps.layers[0].shapeSettings.colorMapping[0].label = '0 - 6';\n maps.layers[0].shapeSettings.colorMapping[1].from = null;\n maps.layers[0].shapeSettings.colorMapping[1].to = null;\n maps.layers[0].shapeSettings.colorMapping[1].color = null;\n maps.layers[0].shapeSettings.colorMapping[1].value = null;\n maps.layers[0].shapeSettings.colorMapping[1].label = null;\n maps.layers[0].shapeSettings.colorMapping[2].from = null;\n maps.layers[0].shapeSettings.colorMapping[2].to = null;\n maps.layers[0].shapeSettings.colorMapping[2].color = null;\n maps.layers[0].shapeSettings.colorMapping[2].value = null;\n maps.layers[0].shapeSettings.colorMapping[2].label = null;\n maps.layers[0].shapeSettings.colorMapping[3].from = null;\n maps.layers[0].shapeSettings.colorMapping[3].to = null;\n maps.layers[0].shapeSettings.colorMapping[3].color = null;\n maps.layers[0].shapeSettings.colorMapping[3].label = null;\n maps.layers[0].shapeSettings.colorMapping[3].value = null;\n maps.layers[0].shapeSettings.colorMapping[4].from = null;\n maps.layers[0].shapeSettings.colorMapping[4].to = null;\n maps.layers[0].shapeSettings.colorMapping[4].color = null;\n maps.layers[0].shapeSettings.colorMapping[4].label = null;\n maps.layers[0].shapeSettings.colorMapping[4].value = null;\n maps.layers[0].shapeSettings.colorMapping[5].from = null;\n maps.layers[0].shapeSettings.colorMapping[5].to = null;\n maps.layers[0].shapeSettings.colorMapping[5].color = null;\n maps.layers[0].shapeSettings.colorMapping[5].label = null;\n maps.layers[0].shapeSettings.colorMapping[5].value = null;\n maps.legendSettings.title.text = 'Inches';\n maps.refresh();\n }\n }\n });\n sampleValue.appendTo('#colorMapping');\n"}