I'm using a dhtml map that I'm deploying to google appengine. Now I'd like to make the borders darker and thicker. How can it be done? I have this map deployed
And my mockup looks like the following
Can we try and make my map look more like the mockup? The code I have so far is this.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<style xmlns="">
path { fill: #ffc801; }
:hover { fill: #fcafff; }
</style>
<script type='text/javascript' src=''></script>
<script type='text/javascript'>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();
var options = {
backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:25 },
colorAxis: {minValue: 0, maxValue: 0, colors: []},
legend: 'none',
backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:25 },
datalessRegionColor: '#ffc801',
displayMode: 'regions',
enableRegionInteractivity: 'true',
resolution: 'provinces',
sizeAxis: {minValue: 1, maxValue:1,minSize:10, maxSize: 10},
region:'IN',
keepAspectRatio: true,
width:600,
height:400,
tooltip: {textStyle: {color: '#444444'}, trigger:'focus', isHtml: false}
};
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] != '') { document.location = ivalue[selectedRegion]; }
}
});
chart.draw(data, options);
}
</script>
<div id='visualization'></div>>
</body>
</html>
Update
I changed to code according to the answer. Now I don't get the result I expected. Here is the now code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<style xmlns="">
path { fill: #ffc801; }
:hover { fill: #fcafff; }
</style>
<script type='text/javascript' src=''></script>
<script type='text/javascript'>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();
var options = {
backgroundColor: { fill: '#FFF', stroke: '#000', strokeWidth: 75 },
colorAxis: {minValue: 0, maxValue: 0, colors: []},
legend: 'none',
datalessRegionColor: '#ffc801',
displayMode: 'regions',
enableRegionInteractivity: 'true',
resolution: 'provinces',
sizeAxis: {minValue: 1, maxValue:1,minSize:10, maxSize: 10},
region:'IN',
keepAspectRatio: true,
width:600,
height:400,
tooltip: {textStyle: {color: '#444444'}, trigger:'focus', isHtml: false}
};
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] != '') { document.location = ivalue[selectedRegion]; }
}
});
chart.draw(data, options);
}
</script>
<div id='visualization'></div>
</body>
</html>
When I run the above code then I get a dark area around the map instead of thicker borders. What can be done?
Update
If I use an iframe then the zoom does not crop the map area and the hovering is not working as expected.
path {
stroke: #555;
}
#wrapper2 { width: 450px; height: 450px; padding: 0; overflow: hidden; }
#scaled-frame { width: 400px; height: 400px; border: 0px; }
#scaled-frame {
zoom: 0.61;
overflow: hidden;
-moz-transform: scale(0.61);
-moz-transform-origin: 0 0;
-o-transform: scale(0.61);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.61);
-webkit-transform-origin: 0 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#scaled-frame { zoom: 1; }
}
<div id="wrapper2">
<iframe id="scaled-frame" src="/_/mapframe.html" height="300" width="500" ></iframe>
</div>
I'm using a dhtml map that I'm deploying to google appengine. Now I'd like to make the borders darker and thicker. How can it be done? I have this map deployed
And my mockup looks like the following
Can we try and make my map look more like the mockup? The code I have so far is this.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<style xmlns="http://www.w3/2000/svg">
path { fill: #ffc801; }
:hover { fill: #fcafff; }
</style>
<script type='text/javascript' src='http://www.google./jsapi'></script>
<script type='text/javascript'>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();
var options = {
backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:25 },
colorAxis: {minValue: 0, maxValue: 0, colors: []},
legend: 'none',
backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:25 },
datalessRegionColor: '#ffc801',
displayMode: 'regions',
enableRegionInteractivity: 'true',
resolution: 'provinces',
sizeAxis: {minValue: 1, maxValue:1,minSize:10, maxSize: 10},
region:'IN',
keepAspectRatio: true,
width:600,
height:400,
tooltip: {textStyle: {color: '#444444'}, trigger:'focus', isHtml: false}
};
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] != '') { document.location = ivalue[selectedRegion]; }
}
});
chart.draw(data, options);
}
</script>
<div id='visualization'></div>>
</body>
</html>
Update
I changed to code according to the answer. Now I don't get the result I expected. Here is the now code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<style xmlns="http://www.w3/2000/svg">
path { fill: #ffc801; }
:hover { fill: #fcafff; }
</style>
<script type='text/javascript' src='http://www.google./jsapi'></script>
<script type='text/javascript'>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();
var options = {
backgroundColor: { fill: '#FFF', stroke: '#000', strokeWidth: 75 },
colorAxis: {minValue: 0, maxValue: 0, colors: []},
legend: 'none',
datalessRegionColor: '#ffc801',
displayMode: 'regions',
enableRegionInteractivity: 'true',
resolution: 'provinces',
sizeAxis: {minValue: 1, maxValue:1,minSize:10, maxSize: 10},
region:'IN',
keepAspectRatio: true,
width:600,
height:400,
tooltip: {textStyle: {color: '#444444'}, trigger:'focus', isHtml: false}
};
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] != '') { document.location = ivalue[selectedRegion]; }
}
});
chart.draw(data, options);
}
</script>
<div id='visualization'></div>
</body>
</html>
When I run the above code then I get a dark area around the map instead of thicker borders. What can be done?
Update
If I use an iframe then the zoom does not crop the map area and the hovering is not working as expected.
path {
stroke: #555;
}
#wrapper2 { width: 450px; height: 450px; padding: 0; overflow: hidden; }
#scaled-frame { width: 400px; height: 400px; border: 0px; }
#scaled-frame {
zoom: 0.61;
overflow: hidden;
-moz-transform: scale(0.61);
-moz-transform-origin: 0 0;
-o-transform: scale(0.61);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.61);
-webkit-transform-origin: 0 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#scaled-frame { zoom: 1; }
}
<div id="wrapper2">
<iframe id="scaled-frame" src="/_/mapframe.html" height="300" width="500" ></iframe>
</div>
- 1 Does your DOM create SVG tag? – Brian Nezhad Commented Feb 19, 2015 at 4:41
- @BrianS I don't know. I can look if it does if I know where to look. I also read the manual several times and the manual didn't say nything about what I'm trying to achieve (display only India and with thicker borders). I think it should be feasible but I cn not yet seem to acplish it. – Niklas Rosencrantz Commented Feb 19, 2015 at 5:15
- 1 I can help you if i see the actual page? i used d3.js before, this sound similar – Brian Nezhad Commented Feb 19, 2015 at 5:18
- Alright, you may have a look at the page with code plnkr.co/edit/DvUzclRXB4l1OcuZ6yxJ?p=preview The 2 features I want to add are a) Thicker borders and b) Display India only and not also the neighbours. – Niklas Rosencrantz Commented Feb 19, 2015 at 5:32
3 Answers
Reset to default 6 +50Use stroke CSS property on element <path> to get a thicker border,
this is a SVG HTML5 feature.
In your .css file add this:
path {
stroke: #555;
}
To display india only, you need to set the scale property to what best fit your HTML5 canavas. Checkout the framework API you use and figure out how to manage scale.
Have you tried change the value in
<style xmlns="http://www.w3/2000/svg">
path { fill: #ffc801; }
:hover { fill: #fcafff; }
</style>
Try to add rule for stroke in both path and :hover like this
path { fill: #ffac; stroke:#fff; }
:hover { fill: #fcafff; stroke:#000;}
This solution will make the selected region be able to show a black stroke and a white stroke when its not hovered. Well, however, for some regions on the map it doesn't work appropriately, you have to hover one the edge to get the black stroke. But I believe this gives us a hint to the right solution right?
According to the documentation (https://developers.google./chart/interactive/docs/gallery/geochart#coloring), you should be able to set
backgroundColor: { fill: '#FFF', stroke: '#000', strokeWidth: 30 }
This will set the areas of the map to have a white fill with a black border with a border-width of 30px. You should play around with the strokeWidth value to get it to the size you want. Also, it looks like you have this defined twice. Remove one of the backgroundColor definitions.