How to make map border thicker in Google Geomap?
I am using a dhtml map to deploy to google appengine . Now, I want to make the border darker and thicker. How to do it? I have deployed this map
My model is as follows
Can we try to make my map look more like a mockup? My code 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.org/2000/svg">
path { fill: #ffc801; }
:hover { fill: #fcafff; }
</style>
<script type='text/javascript' src='http://www.google.com/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>
Updates
I changed to code based on the answer. Now I am not getting the expected result. This is the current code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<style xmlns="http://www.w3.org/2000/svg">
path { fill: #ffc801; }
:hover { fill: #fcafff; }
</style>
<script type='text/javascript' src='http://www.google.com/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 code above, I get a dark area around the map instead of a thicker border. what to do?
Updates
If used, iframe
zooming does not crop the map area and hovering does not work properly.
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>
Use CSS properties on stroke
element <path>
to get thicker borders, which is an SVG HTML5 feature.
Add the following to your file:.css
path {
stroke: #555;
}
To display only India, you need to set the scale
attribute to what works best for your HTML5 canavas. Check the framework API you use and figure out how to manage scale.