New to OpenLayers, issue with zoom, attributes and advice with hit detection - javascript

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]);

Related

gauge.js -> Need modification on javascript to PercentageColors function

I found this amazing javascript gauge meter: http://bernii.github.io/gauge.js/
There's an option to make it looks like a gauge
new Gauge(target).setOptions(opts)
Or like a Donut (the one I need)
new Donut(target).setOptions(opts)
In the "gauge mode" there's an option percentColors that change the gauge color when it change its value. But this parameter doesn't work on "donut mode".
I tried to change the gauge.js but with no success... any javascript wizard could help me on this one?
The gauge.js file is in the link, and my code to "call it" is here:
var opts = {
angle: 0.46,
lineWidth: 0.1,
radiusScale: 1,
pointer: {
length: 0.6,
strokeWidth: 0.035,
color: '#000000'
},
limitMax: false,
limitMin: false,
percentColors: [[0.0, "#ff0000" ], [0.50, "#f9c802"], [1.0, "#a9d70b"]],
strokeColor: '#EEEEEE',
generateGradient: true,
highDpiSupport: true,
};
var target = document.getElementById('graph');
//var gauge = new Gauge(target).setOptions(opts);
var gauge = new Donut(target).setOptions(opts);
gauge.maxValue = 3000;
gauge.setMinValue(0);
gauge.animationSpeed = 32;
gauge.set(3000);
gauge.setTextField(document.getElementById('gauge-value'));
Thank you!

I found myself a simpler solution, instead of using the parentColor function on the Donut mode, I used some ifs/elses to limit the numbers and set the color in that specific location:
if (value<=20)
{
opts.colorStart='#291B00';
opts.colorStop='#FF0000';
}else if (value>20 && value <=60)
{
opts.colorStart='#290000';
opts.colorStop='#FF7E0D';
}
else if (value>60)
{
opts.colorStart='#002903';
opts.colorStop='#00FF00';
}

JSXGraph - intersections and polygons created from points of intersections

I am new to jsxgraph, also not so proficient in js, I hope you could point me in right direction with my problem.
I'm trying to:
1) create intersections of lines that go through a rectangle (there will be a large number of these lines),
2) file the space between them with polygons of different colors.
Here is how the whole piece of code (for some reason the jsfiddle doesn't want to work! :/):
https://jsfiddle.net/czarrna/me55dw4h/4/
My code does not work unfortunatelly :/
var typical_mn = board.create('polygon', [t_1, t_2, t_3, t_4], {
fillColor: '#ff9600',
withLines: false
});
var p1_1 = board.create('intersection', [l_20, typical_mn, 0], {
visible: true
});
var p1_2 = board.create('intersection', [l_20, typical_mn, 1], {
visible: true
});
var p2_1 = board.create('intersection', [l_30, typical_mn, 0], {
visible: true
});
var p2_2 = board.create('intersection', [l_30, typical_mn, 1], {
visible: true
});
var p3_1 = board.create('intersection', [l_40, typical_mn, 0], {
visible: true
});
var p3_2 = board.create('intersection', [l_40, typical_mn, 1], {
visible: true
});
var pol_20_30 = board.create('polygon', [p1_1, p1_2, p2_1, p2_1], {
fillColor: '#555',
withLines: false
});
var pol_30_40 = board.create('polygon', [p2_1, p2_1, p3_1, p3_2], {
fillColor: '#333',
withLines: false
});
<script src="http://czarrna.kei.pl/jsxgraph/src/loadjsxgraph.js"></script>
<script src="http://czarrna.kei.pl/jsxgraph/distrib/jsxgraph.css"></script>
<div id="jxgbox" class="jxgbox" style="width: 500px; height: 500px;"></div>
I hope someone could help me with this please! Would be grateful. Thank you

Nowadays, external libraries in jsfiddle have to be included with https. JSXGraph is available with https for example at https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.3/jsxgraphcore.js .
At the moment, there is no intersection algorithm between polygons and lines. But one can intersect the polygon borders with lines. For this, the withLines property of the polygon has to be set to true. Then the borders can be accessed with the borders array.
In your example it would look like
var typical_mn = board.create('polygon',[t_1,t_2,t_3, t_4], {fillColor:'#ff9600', withLines:true});
in_20 = board.create('intersection', [l_20, typical_mn.borders[0]],{visible:true});
in_30 = board.create('intersection', [l_30, typical_mn.borders[0]],{visible:true});
in_40 = board.create('intersection', [l_40, typical_mn.borders[0]],{visible:true});
Intersection between lines and polygons is an interesting features, I will create a ticket on github.

Heatmap.js Leaflet Heatmap

Im Trying to implement a heatmap to Leaflet via the Leafletplugin//www.patrick-wied.at/static/heatmapjs/plugin-leaflet-layer.html,
but for some reason it seams to ignore my "Value" so all datapoints have the same colour
window.onload = function() {
var baseLayer = L.tileLayer(
'http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png',{
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade',
maxZoom: 20
}
);
var cfg = {
// radius should be small ONLY if scaleRadius is true (or small radius is intended)
"radius": 0.00007,
minOpacity: 0.5,
maxOpacity: 1,
// scales the radius based on map zoom
"scaleRadius": true,
// if set to false the heatmap uses the global maximum for colorization
// if activated: uses the data maximum within the current map boundaries
// (there will always be a red spot with useLocalExtremas true)
"useLocalExtrema": false,
// which field name in your data represents the latitude - default "lat"
latField: 'lat',
// which field name in your data represents the longitude - default "lng"
lngField: 'lng',
// which field name in your data represents the data value - default "value"
value: 'sig',
blur:0,
gradient: {
// enter n keys between 0 and 1 here
// for gradient color customization
'1': 'red',
'.3': 'yellow',
'0.9': 'green'
},
};
var heatmapLayer = new HeatmapOverlay(cfg);
var map = new L.Map('map-canvas', {
center: new L.LatLng(52.400458, 13.052260),
zoom: 14,
layers: [baseLayer, heatmapLayer]
});
heatmapLayer.setData(testData);
// make accessible for debugging
layer = heatmapLayer;
};
my data looks like this:
var testData = {
data:[{lat:52.40486, lng:13.04916, sig:30}, {lat:52.40486, lng:13.04916, sig:70}, {lat:52.40496, lng:13.04894, sig:67}, {lat:52.40496, lng:13.04894, sig:72}, {lat:52.40486, lng:13.04916, sig:74}, {lat:52.40486, lng:13.04916, sig:78}, {lat:52.40493, lng:13.04925, sig:67},]}
you can se it live on http://www.frief.de/heatmap/test2.html
would be great if someone has an idea, mybe Im just to stupid

Just a quick suggestion.
Have you tried using the Leaflet.Heatmap plug-in by Vladimir Agafonkin(the author of Leaflet.js himself). It seems it's not listed on the plug-ins page.
I think it's faster and probably will be a better solution: https://github.com/Leaflet/Leaflet.heat
http://mourner.github.io/simpleheat/demo/

I think this is not working because your code is wrong around here:
<div class="wrapper">
<div class="heatmap" id="map-canvas">
</div>
</div>
</script> <----THIS <script src="src/heatmap.js"></script>
<script src="src/leaflet-heatmap.js"></script>
Open link you said is a demo page and inspect code. Fix this orphaned </script tag and see if it's working now.

I know this is old, but I just ran into this issue, so here's how I solved it.
In the library "pa7_leaflet_hm.min.js" there's a part where it sets the min/max values, and it's hardcoded to 1 and 0
this._data = [];
this._max = 1;
this._min = 0;
Apparently this controls the intensity of the spots based on the value, and this is only overwritten if useLocalExtrema is set to false, which would always set it to the highest visible spot.
If you don't wish to always check the highest value based on the visible area, you can just change the this._max value to something higher, or maybe even set it to a value from the config, to expose it
this._data = [];
this._max = (this.cfg.max ? this.cfg.max : 1);
this._min = (this.cfg.min ? this.cfg.min : 0);
this way you would get a more traditional functioning heatmap

Google Geochart: Improper colour code for the disputed for area

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.

OpenLayers: Can't select feature after clickout

I'm trying a simple test where I have a base image with draggable features on top. These point features have associated external graphics (I'd prefer to use polygons with associated graphics but that's a whole other question).
I have a hover control that works perfectly. I also have a select control that almost works. However I cannot reselect a feature once I have clicked out once. Similarly, I cannot select features if I click anywhere outside of the features before trying to select one.
I hope that's clear - but if not then this example should be (and you can also see the whole code) http://sigfrid.co.uk/oltest/simple.html
I'll put what I think are the key bits of code below....
Create a map
var map = new OpenLayers.Map({
div:'map',
});
Add a base layer
var base = new OpenLayers.Layer.Image(
'Base level',
'img/base.png',
new OpenLayers.Bounds(-1000, -1000, 1000, 1000),
new OpenLayers.Size(864,864),
options
);
map.addLayer(base);
Add styles
var markerStyleMap = new OpenLayers.StyleMap
({
"default": new OpenLayers.Style(template, {context: context}),
"hover": new OpenLayers.Style ({graphicOpacity:0.5}),
"select": new OpenLayers.Style ({graphicOpacity:0.1})});
Add points
pt1 = new OpenLayers.Geometry.Point(0,0);
pt1Feature = new OpenLayers.Feature.Vector(pt1);
...
markerLayer.addFeatures([pt1Feature,pt2Feature,pt3Feature]);
Add unique lookup for the different marker images
var lookup = {
"f1": {externalGraphic:"img/f1.png"},
"f2": {externalGraphic:"img/f2.png"},
"f3": {externalGraphic:"img/f3.png"},
}
markerStyleMap.addUniqueValueRules("default", "type", lookup);
markerLayer.styleMap = markerStyleMap;
markerLayer.features[0].attributes.type = "f1";
...
Add controls
var dragControl = new OpenLayers.Control.DragFeature(markerLayer)
map.addControl(dragControl);
dragControl.activate();
var highlightCtrl = new OpenLayers.Control.SelectFeature(markerLayer, {
hover: true,
highlightOnly: true,
renderIntent: "hover",
});
map.addControl(highlightCtrl);
highlightCtrl.activate();
var selectCtrl = new OpenLayers.Control.SelectFeature(markerLayer, {
clickout: true,
renderIntent: "select",
});
map.addControl(selectCtrl);
selectCtrl.activate();
Thanks for any help,
Nick

Turns out drag and select are not compatible. However, there are some work arounds such as
http://fastr.wordpress.com/2012/04/17/openlayers-selectfeature-where-did-i-clicked-2/
although this does add some event problems...

Categories

Resources