I am using anychart for creating a percentage horizontal gauge.
And i want to change the marker information to show what i want.
I found nothing on the documentation about it.
I'm using the javascript anychart playground (link below).
The final implementation is on Angular 5.
The original code :
https://playground.anychart.com/docs/v8/samples/GAUGE_Linear_04
(Optional) The typescript method :
createAnyChartsCustomGauges() {
let array = [];
this.listItem.forEach(item => {
// Gauge type and data
const gauge = anychart.gauges.linear();
gauge.layout('horizontal');
// Set the data
gauge.data([item.percent]); //number
// Create the custom scale bar
const scaleBarre = gauge.scaleBar(0);
// color and style setting
const colorScale = anychart.scales.ordinalColor().ranges([
{
from: 0,
to: 25,
color: ['#D81E05', '#EB7A02'],
},
{
from: 25,
to: 50,
color: ['#EB7A02', '#FFD700'],
},
{
from: 50,
to: 75,
color: ['#FFD700', '#CAD70b'],
},
{
from: 75,
to: 100,
color: ['#CAD70b', '#2AD62A'],
},
]);
scaleBarre.width('5%');
scaleBarre.offset('31.5%');
scaleBarre.colorScale(colorScale);
// Add a marker pointer
const marker = gauge.marker(0);
marker.offset('31.5%');
marker.type('triangle-up');
marker.zIndex(10);
marker.labels().format('{%data[0]}%');
// Add a scale
const scale = gauge.scale();
scale.minimum(0);
scale.maximum(100);
scale.maxTicksCount(10);
// Add an axis
const axis = gauge.axis();
axis.minorTicks(true);
axis.minorTicks().stroke('#cecece');
axis.width('1%');
axis.offset('29.5%');
axis.orientation('top');
// format axis labels
axis.labels().format('{%value}%');
// set paddings
gauge.padding([0, 20]);
array.push(gauge);
});
}
Actual :
{
Pointer 0
Value 63
}
Expected :
{
Value 63%
}
#gugateider was absolutely right! Also, if you don't want to use HTML styling for tooltip and disable tooltip title and separator, you can use the code below:
gauge.tooltip().title(false);
gauge.tooltip().separator(false);
gauge.tooltip().format("Value: {%value}%");
You should be using the format() methods of the Tooltip class.
There's a similar example on Any charts playground
// enable HTML for tooltips
chart.tooltip().useHtml(true);
// tooltip settings
var tooltip = gauge.tooltip();
tooltip.positionMode("point");
tooltip.format("Value: <b>${%value} %</b>");
Try that and see if works?
I have a map and an area select field:
// initialize map
var map = L.map('map').setView([38, 0], 2);
L.tileLayer('http://{s}.tile.cloudmade.com/70146506bc514228adc1756788c730d3/997/256/{z}/{x}/{y}.png', {attribution: 'Map data © OpenStreetMap contributors, Imagery © CloudMade', maxZoom: 18}).addTo(map);
var areaSelect = L.areaSelect({
width:100,
height:150,
keepAspectRatio:true
});
areaSelect.addTo(map);
areaSelect.setDimensions({width: 50, height: 50});
want to get the rectangle width and height.
var neLatCoord = $('#ne-lat-coordinate').val();
var neLonCoord = $('#ne-lon-coordinate').val();
var swLatCoord = $('#sw-lat-coordinate').val();
var swLonCoord = $('#sw-lon-coordinate').val();
var rectangle = L.rectangle([ [neLatCoord, neLonCoord], [swLatCoord, swLonCoord]]).addTo(map);
So now I want to get the rectangle width and height so I can set dimensions of the area select like this :
var rectangleWidth = rectangle.getBounds().getEast() - rectangle.getBounds().getWest();
var rectangleHeight = rectangle.getBounds().getNorth() - rectangle.getBounds().getSouth();
areaSelect.setDimensions({width: rectangleWidth, height: rectangleHeight});
but this gives another width and height? I don't know why?
Can someone help me please, cause I'm stuck on this?
Here's my JS FIDDLE
EDIT:
If I use rectangle instead of area select:
var rectangle = L.rectangle([ [21.616579, 29.487305], [7.798079, 20.522461]]);
map.addLayer(rectangle);
rectangle.editing.enable();
// Every time we move the selected rectangle, refresh data about the selected area.
rectangle.on('edit', function() {
selectedBounds = this.getBounds();
console.log("Area:", selectedBounds);
//some other code
});
$( ".select" ).click(function() {
rectangle.editing.disable();
map.removeLayer(rectangle);
rectangle = new L.rectangle([ [17.853290, 34.980469], [10.876465, 14.853516]]);
map.addLayer(rectangle);
rectangle.editing.enable();
});
When I do this reset on clicking, the event rectangle.on('edit', function() { ... is not working? I don't know why? Can you help me, please
Like the docs in leaflet-areaselect state, the method .setDimensions() needs arguments as Pixel and you give the arguments in geographical coordinates. With the leaflet map method .latLngToLayerPoint() you are able to convert geogr. coords to Pixel of your map extend.
Just change
var rectangleWidth = rectangle.getBounds().getEast() - rectangle.getBounds().getWest();
var rectangleHeight = rectangle.getBounds().getNorth() - rectangle.getBounds().getSouth();
into
var rectangleWidth = map.latLngToLayerPoint(rectangle.getBounds().getNorthEast()).x- map.latLngToLayerPoint(rectangle.getBounds().getSouthWest()).x
var rectangleHeight = map.latLngToLayerPoint(rectangle.getBounds().getNorthEast()).y- map.latLngToLayerPoint(rectangle.getBounds().getSouthWest()).y
Here is the working JS FIDDLE
I know this thread is about a year old, but I figured someone else might benefit from my trouble with the provided answer.
Leaflet actually provides 2 conversion methods:
latLngToLayerPoint()
latLngToContainerPoint()
The difference between the two has to do with how x,y positions are calculated.
LayerPoint finds x,y positions relative the top-left corner of the map when it is initialized!!! (Zooming resets this origin point, but panning does not!)
ContainerPoint finds x,y positions relative to the top-left corner of the map container itself.
Why does that matter?
If you initialize your map, pan it, and then get x,y coords using latLngToLayerPoint(), you can potentially get negative x/y values, which can lead to negative widths/heights if you don't actively compensate for them.
At least in my use-case, it was better to use latLngToContainerPoint() when determining boundary heights/widths in pixels.
Other than that, the above answer worked perfectly for me! :D
I am using Cesiumjs to create a polygon which is moving around an area.
To show its movement I tried to create a sampledPropertyof PolygonHierarchy. Each sample is an array of Cartesian3 positions (three endpoints of my polygon at each time step).
I need to know the type of the property that I am using in sampledProperty as it is mentioned in Cesiumjs website: Cesiumjs.org/SampledProperty.
But I don't know how to define it and I couldn't find any explanation on the website on how to identify property type especially when each sample by itself is an array of properties.
The SampledProperty doesn't work here, since it attempts to interpolate smoothly between the points you've given it, and it doesn't know how to interpolate a polygon hierarchy.
So instead, you can use a TimeIntervalCollectionProperty. The difference here is that this property animates by steps, not interpolation, so the property does not need to know how to construct the intermediate values between control points.
I made a small demo, to show how this works with a polygon hierarchy. Click Run Code Snippet at the bottom, or copy-and-paste just the JavaScript into Sandcastle.
var viewer = new Cesium.Viewer('cesiumContainer', {
navigationInstructionsInitiallyVisible: false
});
// Set up a limited range of time for this demo.
var time = Cesium.JulianDate.fromIso8601('2016-04-08T12:00:00Z');
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
viewer.clock.startTime = time;
viewer.clock.currentTime = time;
viewer.clock.stopTime = Cesium.JulianDate.addSeconds(time, 20, new Cesium.JulianDate());
viewer.clock.multiplier = 1;
viewer.timeline.updateFromClock();
viewer.timeline.zoomTo(time, viewer.clock.stopTime);
// Construct a TimeIntervalCollection showing the changes to the hierarchy over time.
var hierarchy = new Cesium.TimeIntervalCollectionProperty();
for (var i = 0; i < 40; ++i) {
var nextTime = Cesium.JulianDate.addSeconds(time, 0.5, new Cesium.JulianDate());
// Inside the loop, per iteration we add one window of time for this polygon.
hierarchy.intervals.addInterval(new Cesium.TimeInterval({
start: time,
stop: nextTime,
isStartIncluded : true,
isStopIncluded : false,
data : Cesium.Cartesian3.fromDegreesArrayHeights([-108.0+i/4, 35.0, 100000,
-100.0+i/4, 35.0, 100000,
-100.0+i/4, 40.0, 100000,
-108.0+i/4, 40.0, 100000])
}));
time = nextTime;
}
// Create the polygon, using the animated hierarchy.
var orangePolygon = viewer.entities.add({
name : 'Orange polygon with time-varying position',
polygon : {
hierarchy : hierarchy,
extrudedHeight: 0,
perPositionHeight : true,
material : Cesium.Color.ORANGE.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.WHITE
}
});
viewer.zoomTo(viewer.entities);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
font-family: sans-serif;
}
<link href="http://cesiumjs.org/releases/1.19/Build/Cesium/Widgets/widgets.css"
rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.19/Build/Cesium/Cesium.js">
</script>
<div id="cesiumContainer"></div>
I am new to client-side programming. Thus far I've been writing only asp and php based solutions. But now I need to retrieve data from json and plot on a map (I don't know how to do that yet, but this is later).
After days of searching, I think OpenLayers can give me what I need.
I have gone through the Examples on dev.openlayers site, (such as this one http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/vector-features-with-text.html), and also searched (and found some) solutions on stackoverflow, but they don't offer solutions to my problems).
Please view what I've done so far:
http://www.nusantech.com/bangkuujian/openlayer.html
The canvas.js is as follows:
// create some sample features
var Feature = OpenLayers.Feature.Vector;
var Geometry = OpenLayers.Geometry;
var features = [
new Feature(new Geometry.Point(-220, -60),attributes = { name: "Mercury",align: "cm",xOffset:10,yOffset:50 }),
new Feature(new Geometry.Point(-70, 120),attributes = { name: "Venus" }),
new Feature(new Geometry.Point(0, 0),attributes = { name: "Earth" }),
new Feature(new Geometry.Point(160, -100),attributes = { name: "Mars",align: "cm",xOffset:10,yOffset:50 })];
// create rule based styles
var Rule = OpenLayers.Rule;
var Filter = OpenLayers.Filter;
var style = new OpenLayers.Style({
pointRadius: 10,
strokeWidth: 3,
strokeOpacity: 0.7,
strokeColor: "#ffdd77",
fillColor: "#eecc66",
fillOpacity: 1,
label : "${name}",
fontColor: "#f0f0f0",
fontSize: "12px",
fontFamily: "Calibri, monospace",
labelAlign: "${align}",
labelXOffset: "${xOffset}",
labelYOffset: "${yOffset}",
labelOutlineWidth : 1
},
{
rules: [
new Rule({
elseFilter: true,
symbolizer: {graphicName: "circle"}
})
]
});
var layer = new OpenLayers.Layer.Vector(null, {
styleMap: new OpenLayers.StyleMap({'default': style,
select: {
pointRadius: 14,
strokeColor: "#e0e0e0",
strokeWidth: 5
}
}),
isBaseLayer: true,
renderers: ["Canvas"]
});
layer.addFeatures(features);
var map = new OpenLayers.Map({
div: "map",
layers: [layer],
center: new OpenLayers.LonLat(50, 45),
zoom: 0
});
var select = new OpenLayers.Control.SelectFeature(layer);
map.addControl(select);
select.activate();
What I have problems with:
Label offset
In the samples, the labels should offset from the centre by labelXOffset: "(xvalue)", labelYOffset: "(yvalue)", but this is not happening in my page. Is there something I forgot?
Zoom-in
When I click the + button on the map, all the features look like they are zoomed in, however, the sizes of the features stay the same. How do I enlarge the features (circles) too?
Hit Detection
i) When I click on a circle, it is selected as designed. However, is it possible when I select a circle, I also change the right side (now there is a red "text here") and fill it up with html? Can you show me an example how to change the red "text here" to the label-name of the selected circle with a different colour?
ii) Secondly, after I select a circle, how do I add a label under all the other circles denoting the distance between each circle and the selected circle?
Thank you in advance, hopefully these questions are not too much.
I have another question about retrieving an array of coordinates from json to plot the circles, but I will do more research on that. If you can point me in the right direction with regards to this, it would be much appreciated too.
I know how to do them server-side asp or php, but client side is very new to me. However client-side can do all of this much-much faster and can reduce a lot of load.
Cheers,
masCh
I think I have managed to most of it.
Labels not offsetting
Not sure what I did, but I declared a WMS layer and made a few changes to offset and now it is offsetting correctly.
var wms = new OpenLayers.Layer.WMS("NASA Global Mosaic",
"http://hendak.seribudaya.com/starmap.jpg",
{
layers: "modis,global_mosaic",
}, {
opacity: 0.5,
singleTile: true
});
var context = {
getSize: function(feature) {
return feature.attributes["jejari"] / map.getResolution() * .703125;
}
};
var template = {
pointRadius: "${getSize}", // using context.getSize(feature)
label : "\n\n\n\n${name}\n${jarak}",
labelAlign: "left",
labelXOffset: "${xoff}",
labelYOffset: "${yoff}",
labelOutlineWidth : 0
};
var style = new OpenLayers.Style(template, {context: context});
And I declared xoff & yoff under new OpenLayers.Geometry.Point(x,y), { jejari:5, xoff: -10, yoff: -15 }
2) Zoom in on point features.
This was a weird problem. Anyway, I declared a radius called jejari as in the code above next to xoff and yoff. Then modified pointRadius from a static number to "${getSize}" And then added the getSize function to var template which retrieves the current radius. I think that was all I did for that. But the labels were running all over the place, I still haven't solved that.
3) Hit detection and changing another in html
This adds what happens to the once a point feature has been selected
layer.addFeatures(features);
layer.events.on({ "featureselected": function(e) {
kemasMaklumat('maklumat', "<FONT FACE='Calibri' color='#f0f0f0' size=5><center>"+
e.feature.attributes.name+
"<p>This is displayed text when a feature has been selected";
maklumat.style.color="black";
layer.redraw();
}
});
map.addLayers([layer]);
And in the html the and the kemasMaklumat function is declared as
<script type="text/javascript">
function kemasMaklumat(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
</script>
<td valign="top"><div id="maklumat" style="border-radius:25px; background-color:#000000;box-shadow: 8px 8px 4px #686868;">
Write Something Here<P>
</div></td>
The second part of this question was changing the labels of all the UNselected features, i.e. modifying attributes of all features that weren't the selected one. To do this, I added a for loop through all the features and check if it has the same label as the feature that was selected, this was done under the layer.events.on "featureselected" as was done in the above part 1 of this question.
layer.addFeatures(features);
layer.events.on({ "featureselected": function(e) {
kemasMaklumat('maklumat', "<FONT FACE='Calibri' color='#f0f0f0' size=5><center>"+
e.feature.attributes.name+
"<p>This is displayed text when a feature has been selected";
maklumat.style.color="black";
for (var i = 0, l = layer.features.length; i < l; i++) {
var feature = layer.features[i];
if (feature.attributes.name!=e.feature.attributes.name) {
feature.attributes.name="I was not selected"; }}
layer.redraw();
}
});
map.addLayers([layer]);
I am using Google Geochart API for implementing state wise Report for Indian Political Map. I used the following code:
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Value');
data.addColumn({type:'string', role:'tooltip'});
var ivalue = new Array();
data.addRows([[{v:'IN-AP',f:'Andhra Pradesh'}, 5,'5']]);
ivalue['IN-AP'] = 'http://en.wikipedia.org/wiki/Andhra_Pradesh';
data.addRows([[{v:'IN-AR',f:'Arunachal Pradesh'},4,'4']]);
ivalue['IN-AR'] = 'http://en.wikipedia.org/wiki/Arunachal_Pradesh';
data.addRows([[{v:'IN-AS',f:'Assam'},2,'2']]);
ivalue['IN-AS'] = 'http://en.wikipedia.org/wiki/Assam';
data.addRows([[{v:'IN-BR',f:'Bihar'},3,'3']]);
ivalue['IN-BR'] = 'http://en.wikipedia.org/wiki/Bihar';
data.addRows([[{v:'IN-CT',f:'Chhattisgarh'},4,'4']]);
ivalue['IN-CT'] = 'http://en.wikipedia.org/wiki/Chhattisgarh';
data.addRows([[{v:'IN-GA',f:'Goa'},5,'5']]);
ivalue['IN-GA'] = 'http://en.wikipedia.org/wiki/Goa';
data.addRows([[{v:'IN-GJ',f:'Gujarat'},6,'6']]);
ivalue['IN-GJ'] = 'http://en.wikipedia.org/wiki/Gujarat';
data.addRows([[{v:'IN-HR',f:'Haryana'},7,'7']]);
ivalue['IN-HR'] = 'http://en.wikipedia.org/wiki/Haryana';
data.addRows([[{v:'IN-HP',f:'Himachal Pradesh'},7,'3']]);
ivalue['IN-HP'] = 'http://en.wikipedia.org/wiki/Himachal_Pradesh';
data.addRows([[{v:'IN-JK',f:'Jammu and Kashmir'},3,'3']]);
ivalue['IN-JK'] = 'http://en.wikipedia.org/wiki/Jammu_and_Kashmir';
data.addRows([[{v:'IN-JH',f:'Jharkhand'},4,'4']]);
ivalue['IN-JH'] = 'http://en.wikipedia.org/wiki/Jharkhand';
data.addRows([[{v:'IN-KA',f:'Karnataka'},8,'8']]);
ivalue['IN-KA'] = 'http://en.wikipedia.org/wiki/Karnataka';
data.addRows([[{v:'IN-KL',f:'Kerala'},7,'7']]);
ivalue['IN-KL'] = 'http://en.wikipedia.org/wiki/Kerala';
data.addRows([[{v:'IN-MP',f:'Madhya Pradesh'},8,'8']]);
ivalue['IN-MP'] = 'http://en.wikipedia.org/wiki/Madhya_Pradesh';
data.addRows([[{v:'IN-MH',f:'Maharashtra'},9,'9']]);
ivalue['IN-MH'] = 'http://en.wikipedia.org/wiki/Maharashtra';
data.addRows([[{v:'IN-MN',f:'Manipur'},7,'7']]);
ivalue['IN-MN'] = 'http://en.wikipedia.org/wiki/Manipur';
data.addRows([[{v:'IN-ML',f:'Meghalaya'},4,'4']]);
ivalue['IN-ML'] = 'http://en.wikipedia.org/wiki/Meghalaya';
data.addRows([[{v:'IN-MZ',f:'Mizoram'},3,'3']]);
ivalue['IN-MZ'] = 'http://en.wikipedia.org/wiki/Mizoram';
data.addRows([[{v:'IN-NL',f:'Nagaland'},2,'2']]);
ivalue['IN-NL'] = 'http://en.wikipedia.org/wiki/Nagaland';
data.addRows([[{v:'IN-OR',f:'Orissa'},4,'4']]);
ivalue['IN-OR'] = 'http://en.wikipedia.org/wiki/Orissa';
data.addRows([[{v:'IN-PB',f:'Punjab'},5,'5']]);
ivalue['IN-PB'] = 'http://en.wikipedia.org/wiki/Punjab';
data.addRows([[{v:'IN-RJ',f:'Rajasthan'},7,'7']]);
ivalue['IN-RJ'] = 'http://en.wikipedia.org/wiki/Rajasthan';
data.addRows([[{v:'IN-SK',f:'Sikkim'},4,'4']]);
ivalue['IN-SK'] = 'http://en.wikipedia.org/wiki/Sikkim';
data.addRows([[{v:'IN-TN',f:'Tamil Nadu'},8,'8']]);
ivalue['IN-TN'] = 'http://en.wikipedia.org/wiki/Tamil_Nadu';
data.addRows([[{v:'IN-TR',f:'Tripura'},3,'3']]);
ivalue['IN-TR'] = 'http://en.wikipedia.org/wiki/Tripura';
data.addRows([[{v:'IN-UT',f:'Uttarakhand'},4,'4']]);
ivalue['IN-UT'] = 'http://en.wikipedia.org/wiki/Uttarakhand';
data.addRows([[{v:'IN-UP',f:'Uttar Pradesh'},8,'8']]);
ivalue['IN-UP'] = 'http://en.wikipedia.org/wiki/Uttar_Pradesh';
data.addRows([[{v:'IN-WB',f:'West Bengal'},7,'7']]);
ivalue['IN-WB'] = 'http://en.wikipedia.org/wiki/West_Bengal';
data.addRows([[{v:'IN-AN',f:'Andaman and Nicobar Islands'},2,'2']]);
ivalue['IN-AN'] = 'http://en.wikipedia.org/wiki/Andaman_and_Nicobar_Islands';
data.addRows([[{v:'IN-CH',f:'Chandigarh'},6,'6']]);
ivalue['IN-CH'] = 'http://en.wikipedia.org/wiki/Chandigarh';
data.addRows([[{v:'IN-DN',f:'Dadra and Nagar Haveli'},4,'4']]);
ivalue['IN-DN'] = 'http://en.wikipedia.org/wiki/Dadra_and_Nagar_Haveli';
data.addRows([[{v:'IN-DD',f:'Daman and Diu'},2,'2']]);
ivalue['IN-DD'] = 'http://en.wikipedia.org/wiki/Daman_and_Diu';
data.addRows([[{v:'IN-DL',f:'Delhi'},10,'10']]);
ivalue['IN-DL'] = 'http://en.wikipedia.org/wiki/Delhi';
data.addRows([[{v:'IN-LD',f:'Lakshadweep'},1,'1']]);
ivalue['IN-LD'] = 'http://en.wikipedia.org/wiki/Lakshadweep';
data.addRows([[{v:'IN-PY',f:'Puducherry (Pondicherry)'},6,'6']]);
ivalue['IN-PY'] = 'http://en.wikipedia.org/wiki/Puducherry';
var options = {
backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 },
colorAxis: {colors: ['yellow','orange', 'red']},
backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 },
datalessRegionColor: '#FFFFFF',
displayMode: 'regions',
enableRegionInteractivity: 'true',
resolution: 'provinces',
sizeAxis: {minValue: 1, maxValue:1,minSize:10, maxSize: 10},
region:'IN',
keepAspectRatio: true,
width:800,
height:500,
tooltip: {textStyle: {color: '#444444'}, trigger:'focus'}
};
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection();
if (selection.length == 1) {
var selectedRow = selection[0].row;
var selectedRegion = data.getValue(selectedRow, 0);
if(ivalue[selectedRegion] != '') { window.open(ivalue[selectedRegion]); }
}
});
chart.draw(data, options);
}
In this, top most state ie. Jammu and Kashmir is disputed. Is there is any way I can implement any one of the following:
1. Either I can remove the disputed area and show the whole state as it is, with proper colour.
2. Or any how, show the disputed state's having same colour for disputed and undisputed area.
Can we also have more that one "region" in options with "resolution: 'provinces' "?
Please help!!
i was searching for solution, and found that we can pass parameter as "IN" in domain options, which will consider Kashmir as Indian state instead of listing as disputed, check for all options in following link
https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart
Not a complete answer and I confess I don't know too much about this aspect of google.maps but it says here that :
The inner workings of map types within the Maps API is an advanced
topic. Most developers can simply use the basic map types noted
below. However, you can also define your own map tiles using custom
map types or modify the presentation of existing map types using
Styled Maps. When providing custom map types, you will need to
understand how to modify the map's Map Type Registry.
With some effort, this should provide a mechanism by which you can offer your own recolored map tiles for the disputed region.
The underlying SVG for that map shows the territory as disputed, and short of editing the SVG itself you cannot change them. Here are the relevant lines for Jammu and Kashmir in Pakistan:
<path d="M309.80792933629334,18.989110296063618L312.62808795206297,22.726320565659634L318.8362126083018,25.16463114909045L322.88492641920095,24.446213181078875L321.8625826161618,21.835482285325142L316.19903029818965,21.424547207622577L313.5211865868203,19.382803342533922L312.8444646944677,15.12689530003403L305.6009264990715,11.194275343138958L300.6533052818071,6.069081559344707L302.39738895716204,12.655537490074323L300.87113421711376,15.882671002382095L302.96229199605716,16.411426626838498L303.9512353623492,19.871327560781815L309.88634775300363,18.911521155518564Z" stroke="none" stroke-width="0" fill="url(#_ABSTRACT_RENDERER_ID_0)">
<path d="M352.86980546060823,44.62370023065002L352.8785186180206,43.459863122471255L356.59758464015573,43.43831058343074L357.38612538596567,40.084735508753326L360.68986423811594,39.4554013687749L363.73656494660463,28.12020266948963L365.6955731714622,26.554051499224865L364.9070324256523,25.10715771164957L362.56754966045906,24.223503610995472L360.38199934288275,26.901765795742225L359.568771317738,23.74216357242775L355.29061102831594,23.094150565281495L353.37081201181365,18.535070140280627L352.16258751731283,19.37418...61059265807575,30.294135440692685L333.46705609639645,34.82016863916499L334.505374021358,40.82757968767728L345.62626726521205,45.57488562029698L343.98383709300026,49.103754679169384L340.0876035368157,50.47449616213537L342.8090130352466,61.802510681740465L344.1900484850904,62.31258743902904L343.71808579192606,58.345483419669286L346.3828597671772,58.19461564638694L343.6483805326281,51.75471698113179L350.9195103931631,51.74178545770757L353.8834361062351,47.64823987597818L352.81897870903674,44.681173668090736Z" stroke="none" stroke-width="0" fill="url(#_ABSTRACT_RENDERER_ID_0)">
The two paths are for the northwest, and east portion (two separate shapes).
Here are the relevant lines for Jammu and Kashmir in India:
<path d="M349.0708688288608,76.60192082277737L351.06472968336755,77.21401293152348L353.21397517839284,73.89923242711829L349.8768358894954,68.99962188527996L351.03713801822863,65.88599841191811L346.62247159601435,65.58713653722538L342.6797678669645,61.687563806858705L340.9632758567483,58.30668884939667L341.3205153106512,51.78201686391614L340.04839432846063,51.111014481793575L345.84409620051866,46.20709343214726L340.8471004245848,42.639429803001754L334.505374021358,40.82757968767728L333.46705609639645,34.82016863916...24963L294.35369247273957,81.03599652134461L300.39191055943917,75.65648277687451L298.7596457375414,70.17351684501048L300.878395181624,70.74106703973978L309.4463333036843,65.00952849094406L321.2439484398911,71.4250009452865L326.4979823594866,68.71656520588343L330.6817501102758,75.89930805006198L335.88640947120206,73.01557832646392L334.9221533842447,78.0991038681132L341.2798539093941,74.2167731689795L341.8592788773095,77.91375203236635L344.60247126927095,80.35206261579755L349.0563468998405,76.64646273679408Z" stroke="none" stroke-width="0" fill="url(#_ABSTRACT_RENDERER_ID_4)">
Here is the path for Arunachal and Pradesh:
Basically, these shapes are given a "disputed territories" fill. To eliminate that fill entirely, you can edit the SVG to remove the above paths with that fill, or you can remove the definitions for those fills. Removing the shape is probably the more appropriate way to do it, but removing the definitions is much quicker and easier (because they are at the top, and earlier to find and remove if you do want to change something later). Here are the definitions:
ID_0 controls the grey lines in Pakistan
ID_1 controls the grey lines in India (Arunachal and Pradesh)
ID_3 controls the grey lines in India (Jammu and Kashmir)
You can search for the id using jquery or the like, and just delete them. Here is what the map looks like initially:
This is what the map looks like if you remove ID 1 and 3 (keeping the disputed part of Kashmir in Pakistan in grey):
This is what the map looks like if you remove ID 0, 1, and 3 (removing all diagonal lines marking disputed territories):
Point is, you have to edit the SVG.
Disclaimer: The above is given as examples of how to technically achieve the desired results without taking any stance on disputed territories either in the case above or otherwise. This is technical help, not indicative of any political views.