Skip to content

Commit

Permalink
#115 new color/legend function
Browse files Browse the repository at this point in the history
  • Loading branch information
webgisdeveloper committed Nov 9, 2021
1 parent 079c3c4 commit 85c06e2
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 13 deletions.
67 changes: 54 additions & 13 deletions simccs_maptool/static/js/build.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ var source_shapeMakerOptions = {
radius: sourceRadius,
shape: "arrowhead",
fillColor: "blue",
fillOpacity: 0.6,
fillOpacity: 0.8,
color: "grey",
weight:1,
pane: "toppointsPane"
Expand All @@ -55,7 +55,7 @@ var sink_shapeMakerOptions = {
radius: sinkRadius,
shape: "square",
fillColor: "blue",
fillOpacity: 0.6,
fillOpacity: 0.8,
color: "grey",
weight:1,
pane: "pointsPane"
Expand All @@ -74,19 +74,31 @@ var sinkMarkerOptions = {


// function getcolor
function getColor(d) {
function getColor1(d) {
return d > 10.0 ? '#f50000' :
d > 5.0 ? '#fdff00' :
d > 0.0 ? '#00f905' :
'#FFEDA0';
}

function getcolor(featureValue,limits,colorlist){
if (!isNaN(featureValue)) {
// Find the bucket/step/limit that this value is less than and give it that color
for (var i = 0; i < limits.length; i++) {
if (featureValue <= limits[i]) {
return colorlist[i]
break
}
}
}
}

// create a legend for coloring field
function createLegend(fieldname,symbol)
//function createLegend(fieldname,symbol)
function createLegend(fieldname,symbol,limits,colorlist)
{
//var div = L.DomUtil.create('div', 'info legend'),
var div = L.DomUtil.create('div'),
grades = [0, 5, 10],
labels = [],
from, to;
var symbolsvg;
Expand Down Expand Up @@ -115,12 +127,13 @@ function createLegend(fieldname,symbol)
symbolsvg = '<svg width="20" height="20"><circle cx="10" cy="10" r="9" style="fill:#3388ff;stroke:black;stroke-width:2;fill-opacity:0.6;stroke-opacity:1" /></svg>';
};
var fillc;
for (var i = 0; i < grades.length; i++) {
from = grades[i];
to = grades[i + 1];
fillc = getColor(from + 1);
console.log(limits,colorlist);
for (var i = 0; i < limits.length; i++) {
from = limits[i];
to = limits[i+1];
fillc = colorlist[i];
labels.push(
symbolsvg.replace('#3388ff',fillc) + ' ' + from + (to ? '&nbsp;&ndash;&nbsp;' + to : '+'));
symbolsvg.replace('#3388ff',fillc) + ' ' + from.toFixed(2) + (to ? '&nbsp;&ndash;&nbsp;' + to.toFixed(2) : '+'));
}

div.innerHTML = fieldname + "<br>";
Expand Down Expand Up @@ -193,6 +206,21 @@ function handleclick(id){
return data;
}

// function to caculate color map
function colormap(geojson,opts){
var values = geojson.features.map(
e=>e.properties[opts.valueProperty]
);
//console.log(values);
var limits = chroma.limits(values, opts.mode, opts.steps - 1)
//console.log(limits)
var colorlist = (opts.colors && opts.colors.length === limits.length ?
opts.colors :
chroma.scale(opts.scale).colors(limits.length))
//console.log(colors);
return [limits,colorlist];
}

// load data by url
async function addcasedata(datadesc,dataurl,datastyle,popup_fields,datasymbol) {
var data = await getdata(dataurl);
Expand All @@ -203,6 +231,7 @@ async function addcasedata(datadesc,dataurl,datastyle,popup_fields,datasymbol) {
}

var newLayer;
var legend,limits,colorlist;
if (!popup_fields || popup_fields.length === 0) {
popup_fields = ["Name"];
}
Expand All @@ -229,6 +258,17 @@ async function addcasedata(datadesc,dataurl,datastyle,popup_fields,datasymbol) {
// load sink data
// change sink symbol
sink_shapeMakerOptions['shape'] = datasymbol;
// the default one is the data style
// caculate the limits and color first
var opts={};
opts["valueProperty"] = datastyle;
//q for quantile, e for equidistant, k for k-means
mode = {"q":'quantile','e':'equidistant'};
opts['mode']='q';
opts['steps']= 5;
opts['scale']= ['green','yellow','red'];
opts['colors']=[];
[limits, colorlist] = colormap(data,opts);
newLayer = new L.geoJSON(data,{
pointToLayer: function (feature, latlng) {
var content_str="<strong>Sink: <br>"
Expand All @@ -237,10 +277,11 @@ async function addcasedata(datadesc,dataurl,datastyle,popup_fields,datasymbol) {
}
content_str += "</strong>";
var color_value = feature.properties[datastyle];
var fillcolor = getColor(color_value);
//var fillcolor = getColor(color_value);
var fillcolor = getcolor(feature.properties[opts.valueProperty],limits,colorlist);
//var mymarker = L.circleMarker(latlng, sinkMarkerOptions);
var mymarker = L.shapeMarker(latlng, sink_shapeMakerOptions);
mymarker.setStyle({'fillColor':fillcolor});
mymarker.setStyle({'fillColor':fillcolor,fillOpacity:'0.8'});
mymarker.bindTooltip(content_str);
return mymarker;
},
Expand All @@ -254,6 +295,7 @@ async function addcasedata(datadesc,dataurl,datastyle,popup_fields,datasymbol) {
// },
// onEachFeature: onEachFeatureClosure(popup_fields),
// });
legend = createLegend(datastyle,datasymbol,limits,colorlist);
}
else {
newLayer = new L.geoJSON(data);
Expand Down Expand Up @@ -284,7 +326,6 @@ async function addcasedata(datadesc,dataurl,datastyle,popup_fields,datasymbol) {
maplayers[datadesc['dataid']] = newLayer;
// ignore the source style for now
if (datastyle && datadesc['type'] != 'source') { // generate legend
var legend = createLegend(datastyle,datasymbol);
document.getElementById("layercontrol").appendChild(legend);
}

Expand Down
3 changes: 3 additions & 0 deletions simccs_maptool/templates/simccs_maptool/build.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
{% load static %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


{% block css %}
<link rel="stylesheet" type="text/css" href="{% static 'css/leaflet.css' %}" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
Expand Down Expand Up @@ -102,6 +103,8 @@
<script src="{% static 'js/util.js' %}" ></script>
<script src="{% static 'django_airavata_api/dist/airavata-api.js' %}"></script>
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
<!-- for coloring -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.2/chroma.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
Expand Down

0 comments on commit 85c06e2

Please sign in to comment.