I'm trying to remove the stroke and hovers around regions on the jVector map - http://jvectormap.com/
This is the code I'm calling in the js:
$(function(){
var markers = [
{ latLng: [-34.916564, 175.567275], name: "Northern", weburl : "https://northern.ps.org.nz/", image: 'northern.png', style: {image: 'themes/startertoplight/img/northern.png'} },
{ latLng: [-38.599254, 179.020342], name: "East Coast", weburl : "https://eastcoast.ps.org.nz/", image: 'eastcoast.png', style: {image: 'themes/startertoplight/img/eastcoast.png'} },
{ latLng: [-39.808098, 177.789873], name: 'Central', weburl : "http://www.psc.org.nz/", image: 'central.png', style: {image: 'themes/startertoplight/img/central.png'} },
{ latLng: [-40.979467, 177.196612], name: 'Upper South Island', weburl : "https://uppersouthisland.ps.org.nz/", image: 'uppersouthisland.png', style: {image: 'themes/startertoplight/img/uppersouthisland.png'} },
{ latLng: [-42.996672, 174.719443], name: 'South Canterbury', weburl : "https://southcanterbury.ps.org.nz/", image: 'southcanterbury.png', style: {image: 'themes/startertoplight/img/southcanterbury.png'} },
{ latLng: [-44.370306, 171.764670], name: 'Otago', weburl : "https://otago.ps.org.nz/", image: 'otago.png', style: {image: 'themes/startertoplight/img/otago.png'} },
{ latLng: [-45.573030, 171.696664], name: 'Southland', weburl : "https://southland.ps.org.nz/", image: 'southland.png', style: {image: 'themes/startertoplight/img/southland.png'} },
];
/* map parameters */
var wrld = {
map: 'nz_mill_en',
backgroundColor: '#fff',
regionStyle: {
initial: {
fill: '#326497'
},
hover: {
fill: "#326497"
}},
onMarkerClick: function(events, index) {
$(location).attr('href', markers[index].weburl);
},
onRegionLabelShow: function(e, el, code){
e.preventDefault();
},
colors:{
"Northern": '#316498',
"East Coast": '#316498',
"Central": '#316498',
"Upper South Island": '#316498',
"South Canterbury": '#316498',
"Otago": '#316498',
"Southland": '#316498'
},
series: {
regions:
[{
attribute: 'fill'
}]
},
zoomButtons: false,
zoomOnScroll: false,
focusOn: {
x: 0.3,
y: 0.7,
scale: 3
},
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47'
}
},
markers: markers,
};
$('#nz-map').vectorMap(wrld);
});
Other than that, I'm using every other styling/js from the plugin. Does any one know how to change the stroke and the hover colour/remove hover? I've tried to remove the hover in my js as you can see but it's not working
hover: {
"fill-opacity" : 1
}},
and
.jvectormap-region {
stroke: #316498;
stroke-width: 2;
}
Related
I am using AmChart v5 for creating a map in globe/map view.
My expectation is - When I switch to globe view from actual flat map view then
either it should show the whole globe with the home location focused at the center
or globe should appear with the home location area focused (zoomed in) and if I zoom out manually it should show the whole globe in the center.
But look at the results in this screenshot that I got. After toggle the globe view looks broken and not showing as expected.
https://i.postimg.cc/GmQSVCDb/Map-Globe-Toggle-Not-Working-1.png
Here is the code that I am using
`
var chart = root.container.children.push(am5map.MapChart.new(root, {
panX: "translateX",
panY: "translateY",
wheelSensitivity: 0.7,
projection: am5map.geoMercator(),
homeZoomLevel: 3,
homeGeoPoint: { longitude: -0.1262, latitude: 51.5002 },
minZoomLevel: 1,
maxZoomLevel: 16
}));
var switchButton = cont.children.push(am5.Button.new(root, {
themeTags: ["switch"],
centerY: am5.p50,
icon: am5.Circle.new(root, {
themeTags: ["icon"]
})
}));
switchButton.on("active", function () {
if (!switchButton.get("active")) {
chart.set("projection", am5map.geoMercator());
chart.set("panX", "translateX");
chart.set("panY", "translateY");
}
else {
chart.set("projection", am5map.geoOrthographic());
chart.set("panX", "rotateX");
chart.set("panY", "rotateY");
}
});
`
Look at the "Animated Map" section in this article.
I was trying to achieve similar kind of map-globe functionality
(although not exactly the same)
https://preview.keenthemes.com/html/metronic/docs/charts/amcharts/maps
<html>
<head></head>
<style></style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/map.js"></script>
<script src="https://cdn.amcharts.com/lib/5/geodata/worldLow.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<body>
<div id="chartdiv" style="width: 600px;height: 500px;background:#171717;margin: 0 auto;padding: 30px;"></div>
<script>
am5.ready(function () {
var root = am5.Root.new("chartdiv");
root.setThemes([
am5themes_Animated.new(root)
]);
var chart = root.container.children.push(am5map.MapChart.new(root, {
panX: "translateX",
panY: "translateY",
wheelSensitivity: 0.7,
projection: am5map.geoMercator(),
homeZoomLevel: 3,
homeGeoPoint: { longitude: -0.1262, latitude: 51.5002 },
minZoomLevel: 1,
maxZoomLevel: 16
}));
var cont = chart.children.push(am5.Container.new(root, {
layout: root.horizontalLayout,
x: 20,
y: 40
}));
cont.children.push(am5.Label.new(root, {
centerY: am5.p50,
text: "Map"
}));
var switchButton = cont.children.push(am5.Button.new(root, {
themeTags: ["switch"],
centerY: am5.p50,
icon: am5.Circle.new(root, {
themeTags: ["icon"]
})
}));
switchButton.on("active", function () {
if (!switchButton.get("active")) {
chart.set("projection", am5map.geoMercator());
chart.set("panX", "translateX");
chart.set("panY", "translateY");
}
else {
chart.set("projection", am5map.geoOrthographic());
chart.set("panX", "rotateX");
chart.set("panY", "rotateY");
}
});
cont.children.push(
am5.Label.new(root, {
centerY: am5.p50,
text: "Globe"
})
);
var backgroundSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {}));
backgroundSeries.mapPolygons.template.setAll({
fill: root.interfaceColors.get("alternativeBackground"),
fillOpacity: 0,
strokeOpacity: 0
});
backgroundSeries.data.push({
geometry: am5map.getGeoRectangle(90, 180, -90, -180)
});
var polygonSeries = chart.series.push(
am5map.MapPolygonSeries.new(root, {
geoJSON: am5geodata_worldLow,
exclude : ["AQ"]
})
);
polygonSeries.set('fill', am5.color(0x2f2f2f));
var lineSeries = chart.series.push(am5map.MapLineSeries.new(root, {}));
lineSeries.mapLines.template.setAll({
stroke: root.interfaceColors.get("alternativeBackground"),
strokeOpacity: 0.3
});
var pointSeries = chart.series.push(am5map.MapPointSeries.new(root, {}));
var colorset = am5.ColorSet.new(root, {});
pointSeries.bullets.push(function () {
var container = am5.Container.new(root, {});
var circle = container.children.push(
am5.Circle.new(root, {
radius: 4,
tooltipY: 0,
fill: "#01a982",
strokeOpacity: 0,
tooltipText: "{title}"
})
);
return am5.Bullet.new(root, {
sprite: container
});
});
var cities = [
{
title: "Brussels",
latitude: 50.8371,
longitude: 4.3676
},
{
title: "Copenhagen",
latitude: 55.6763,
longitude: 12.5681
},
{
title: "Paris",
latitude: 48.8567,
longitude: 2.351
},
{
title: "Reykjavik",
latitude: 64.1353,
longitude: -21.8952
},
{
title: "Moscow",
latitude: 55.7558,
longitude: 37.6176
},
{
title: "Madrid",
latitude: 40.4167,
longitude: -3.7033
},
{
title: "London",
latitude: 51.5002,
longitude: -0.1262,
url: "http://www.google.co.uk"
},
{
title: "Peking",
latitude: 39.9056,
longitude: 116.3958
},
{
title: "New Delhi",
latitude: 28.6353,
longitude: 77.225
},
{
title: "Tokyo",
latitude: 35.6785,
longitude: 139.6823,
url: "http://www.google.co.jp"
},
{
title: "Ankara",
latitude: 39.9439,
longitude: 32.856
},
{
title: "Buenos Aires",
latitude: -34.6118,
longitude: -58.4173
},
{
title: "Brasilia",
latitude: -15.7801,
longitude: -47.9292
},
{
title: "Ottawa",
latitude: 45.4235,
longitude: -75.6979
},
{
title: "Washington",
latitude: 38.8921,
longitude: -77.0241
},
{
title: "Kinshasa",
latitude: -4.3369,
longitude: 15.3271
},
{
title: "Cairo",
latitude: 30.0571,
longitude: 31.2272
},
{
title: "Pretoria",
latitude: -25.7463,
longitude: 28.1876
}
];
for (var i = 0; i < cities.length; i++) {
var city = cities[i];
addCity(city.longitude, city.latitude, city.title);
}
function addCity(longitude, latitude, title) {
pointSeries.data.push({
geometry: { type: "Point", coordinates: [longitude, latitude] },
title: title
});
}
// Make stuff animate on load
chart.appear(1000, 100);
}); // end am5.ready()
</script>
</body>
</html>
Is there a way to make the viewport of the map locked (not draggable)? I've got a map on my page but I can still scroll it up and down when I click and drag with the mouse...
<div class="map-container">
<div id="nz-map" style="width: 600px; height: 400px"></div>
</div>
and the js using to create map
/* map parameters */
var wrld = {
map: 'nz_mill_en',
backgroundColor: '#fff',
regionStyle: {
initial: {
fill: '#012051'
},
hover: {
"fill-opacity" : 1
}},
onMarkerClick: function(events, index) {
$(location).attr('href', markers[index].weburl);
},
onRegionLabelShow: function(e, el, code){
e.preventDefault();
},
colors:{
"Northern": '#012051',
"East Coast": '#012051',
"Central": '#012051',
"Upper South Island": '#012051',
"South Canterbury": '#012051',
"Otago": '#012051',
"Southland": '#012051'
},
series: {
regions:
[{
attribute: 'fill'
}]
},
zoomButtons: false,
zoomOnScroll: false,
focusOn: {
x: 0.3,
y: 0.7,
scale: 3
},
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47'
}
},
markers: markers,
};
$('#nz-map').vectorMap(wrld);
You set the panOnDrag parameter on false to disable panning of the map
var wrld = {
map: 'nz_mill_en',
backgroundColor: '#fff',
panOnDrag: false, // disable panning of the map
...
}
I have a chart made with Ext js.The chart has some custom text items. I would like to dynamically change these texts.I want these text components as part of svg because exported images of chart should also contains these custom texts.
JSFiddle
Ext.onReady(function() {
Ext.define("PopulationPoint", {
extend: "Ext.data.Model",
fields: [ "state", "population" ]
});
var a = Ext.create("Ext.draw.Text", {
type: "text",
text: "Initial Text",
font: "24px Arial",
width: 500,
height: 100,
x: 20,
y: 20
});
var b = Ext.create("Ext.data.Store", {
model: "PopulationPoint",
data: [ {
state: "Alabama",
population: 4802740
}, {
state: "Alaska",
population: 722718
}, {
state: "Arizona",
population: 6482505
}, {
state: "Arkansas",
population: 2937979
}, {
state: "California",
population: 37691912
}, {
state: "Colorado",
population: 5116796
}, {
state: "Connecticut",
population: 3580709
}, {
state: "Delaware",
population: 907135
}, {
state: "DC",
population: 617996
} ]
});
Ext.create("Ext.chart.Chart", {
renderTo: Ext.getBody(),
width: 470,
height: 400,
store: b,
items: [ a ],
series: [ {
type: "pie",
field: "population",
label: {
field: "state",
display: "outside",
font: "12px Arial"
}
} ]
});
setInterval(function() {
a.setText("NewText"); // This statement has no use
}, 3e3);
});
Anybody knows how to fix this? Thanks in advance.
Update
It worked when I used Ext.draw.Sprite instead of Ext.draw.Text. But still exported image of chart contains the old text. Updated Jsfiddle
var txtDraw = Ext.create('Ext.draw.Sprite', {
type:'text',
text : 'Initial Text',
font : '24px Arial',
width : 500,
height: 100,
x:20,
y:20
});
txtDraw.setAttributes({ 'text':'Jeff'},true )
use setAttributes method of Ext.draw.Sprite
reference - http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.draw.Sprite-method-setAttributes
I believe it is a bug because although setText method shows a sensible code:
setText: function(text) {
var me = this,
surface,
sprite;
if (me.rendered) {
surface = me.surface;
sprite = surface.items.items[0];
me.text = text || '';
surface.remove(sprite);
me.textConfig.type = 'text';
me.textConfig.text = me.text;
sprite = surface.add(me.textConfig);
sprite.setAttributes({
rotate: {
degrees: me.degrees
}
}, true);
if (me.autoSize || me.viewBox) {
me.updateLayout();
}
} else {
me.on({
render: function() {
me.setText(text);
},
single: true
});
}
}
the problem is the text sprite is never rendered, me.rendered stays false so the code is never executed. A very dirty workaround would be to set rendered flag from outside.
I have been given the following requirement.
Need to plot weather for particular main cities in Canada
I am able to get the current weather details from an API in internet through (web handler and query strings.)
Hence, I have the latitude and longitude details handy along with the the weather condition(Cloudy , sunny,Rainy etc)
I just need to show clouds on city where it is cloudy , Rainy image on city where it's raining etc
This has to be done in Javascript AMmaps .
My complete code is pasted below.I don't find a way to push my own images to the Map
AmCharts.ready(function () {
map = new AmCharts.AmMap();
map.pathToImages = "http://www.amcharts.com/lib/3/images/";
map.panEventsEnabled = true;
map.backgroundColor = "#666666";
map.backgroundAlpha = 1;
colorSteps: 1,
map.zoomControl.panControlEnabled = true;
map.zoomControl.zoomControlEnabled = true;
var dataProvider = {
map: "canadaLow",
getAreasFromMap: true,
areas: [{
id: "CA-AB", value: 3645257
},
{
id: "CA-BC", value: 4400057
},
{
id: "CA-MB", value: 1208268
},
{
id: "CA-NB", value: 751171
},
{
id: "CA-NL", value: 514536
},
{
id: "CA-NS", value: 921727
},
{
id: "CA-NT", value: 41462
},
{
id: "CA-NU", value: 31906
},
{
id: "CA-ON", value: 12851821
},
{
id: "CA-PE", value: 140204
},
{
id: "CA-QC", value: 7903001
},
{
id: "CA-SK", value: 1033381
},
{
id: "CA-YT", value: 33897
}],
images: [{ latitude: 45.532, longitude: -73.79, balloonText: "T3695", type: "circle", scale: 0.3 },
{ latitude: 43.7143, longitude: -79.7235, balloonText: "T3623", type: "circle", scale: 0.3 },
{ latitude: 45.5925, longitude: -73.5418, balloonText: "T3705", type: "circle", scale: 0.3 },
{ latitude: 43.4136, longitude: -79.7052, balloonText: "T3670", type: "circle", scale: 0.3 },
{ latitude: 51.0195, longitude: -114.1716, balloonText: "T3754", type: "circle", scale: 0.3 },
{ latitude: 45.7922, longitude: -74.0177, balloonText: "T3657", type: "circle", scale: 0.3 },
{ latitude: 42.3974, longitude: -82.2122, balloonText: "T3533", type: "circle", scale: 0.3 }],
// zoomLevel: 3.37137, // insert the values...
//zoomLatitude: 52.124368, // from the alert box...
//zoomLongitude: -96.251201,// here
};
map.dataProvider = dataProvider;
map.objectList = {
container: "listdiv"
};
map.areasSettings = {
autoZoom: false,
color: "#CDCDCD",
colorSolid: "#5EB7DE",
//selectedColor: "#5EB7DE",
//outlineColor: "#666666",
//rollOverColor: "#88CAE7",
//rollOverOutlineColor: "#FFFFFF",
selectable: true
};
map.ZoomControl = { buttonFillColor: '#CCCCCC' };
map.areasSettings = {
autoZoom: true,
//This is the parameter to be modified to change the Color of the state when SELECTED
selectedColor: "#cc9900",
//This is the parameter to be modified to change the Color of the MAP
color: '#CCFF00',
//This is the parameter to be modified to change the Color of the state when ROLLING OVER
rollOverColor: '#009900',
rollOverOutlineColor: '#009900'
};
map.mouseWheelZoomEnabled = true;
map.write("mapdiv");
});
The solution for your request in the tip section on the amchart web site.
http://www.amcharts.com/tips/weather-map/
I copy here part of the code. The key is creating an images array and the imageURL element.
var map = AmCharts.makeChart("chartdiv", {
type: "map",
"theme": "none",
pathToImages: "http://www.amcharts.com/lib/3/images/",
dataProvider: {
map: "worldLow",
zoomLevel: 5.5,
zoomLongitude: 10,
zoomLatitude: 52,
images: [{
latitude: 40.416775,
longitude: -3.703790,
imageURL: "http://extra.amcharts.com/images/weather/weather-rain.png",
width: 32,
height: 32,
label: "Madrid: +22C"
}, {
latitude: 48.856614,
longitude: 2.352222,
imageURL: "http://extra.amcharts.com/images/weather/weather-storm.png",
width: 32,
height: 32,
label: "Paris: +18C"
},#### More cities
{
latitude: 59.329323,
longitude: 18.068581,
imageURL: "http://extra.amcharts.com/images/weather/weather-rain.png",
width: 32,
height: 32,
label: "Stockholm: +8C"
}]
},
imagesSettings: {
labelRollOverColor: "#000",
labelPosition: "bottom"
},
areasSettings: {
rollOverOutlineColor: "#FFFFFF",
rollOverColor: "#CC0000",
alpha:0.8
}
});
The corresponding HTML code would be:
<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
does anyone know how to add two different images to two different marker's labels?
$('#map').vectorMap({
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47'
}
},
backgroundColor: '#383f47',
markers: [
{latLng: [46.90, 8.45], name: "Italy"},
{latLng: [26.02, 50.55], name: 'Bahrain'},
],
onMarkerLabelShow: function(event, label, code) {
label.html("<img src=\"img/logo.png\"><br>"+ label.html());
}
});
this displays the same image on both markers
You can add an extra property image for each marker that you can retrieve when hovering a marker.
var markers = [
{ latLng: [46.90, 8.45], name: "Italy", image: 'italy.png' },
{ latLng: [26.02, 50.55], name: 'Bahrain', image: 'bahrain.png' },
];
$('#map').vectorMap({
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47'
}
},
backgroundColor: '#383f47',
markers: markers,
onMarkerLabelShow: function(event, label, index) {
label.html('<img src="img/' + markers[index].image + '"><br />' + label.html());
}
});