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());
}
});
Related
Hi I'm using JVector Map and I know my question maybe asked before , and also I found this article jvectormap markers label image too but my problem still not solved
I want to show a picture for each marker in the tool-tip which it shows when mouse hover's it
here is my codes:
$('#world-map').vectorMap({
map: 'world_mill',
backgroundColor: '#fff',
zoomOnScroll: false,
regionStyle:{
initial: {
fill: '#878787',
"fill-opacity": 1,
stroke: '#fff',
"stroke-width": 1,
"stroke-opacity": 1
},
hover: {
"fill-opacity": 1,
cursor: 'pointer',
fill: '#133060'
},
selected: {
fill: 'yellow'
},
},
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47',
"stroke-width": 3,
r: 10
}
},
markers: [
{ latLng: [61.524010, 105.318756], name: 'FT 1', imgsrc: 'team1.jpg' },
{ latLng: [60.128161, 18.643501], name: 'FT 2', imgsrc: 'team2.jpg' },
{ latLng: [35.861660, 104.195397], name: 'FT 3', imgsrc: 'team3.jpg' },
{ latLng: [37.090240, -95.712891], name: 'FT 4', imgsrc: 'team4.jpg' },
{ latLng: [56.130366, -106.346771], name: 'FT 5', imgsrc: 'team5.jpg' },
{ latLng: [-25.274398, 133.775136], name: 'FT 6', imgsrc: 'team6.jpg' },
{ latLng: [51.165691, 10.451526], name: 'FT 7', imgsrc: 'team7.jpg' },
],
onRegionTipShow: function (e, el, code) {
el.html(el.html() + '<p id="popop"></p>').css("fontSize","15px");
},
onMarkerTipShow: function (e, el, code) {
el.html(el.html() + '<br /><img src="../Content/img/' + markers[index].imgsrc + '"/>').css("fontSize", "15px");
//el.html(el.html() + '<br /><img src="../Content/img/' + "team1.jpg" + '"/>').css("fontSize", "15px");
},
});
with this coe it works fine
el.html(el.html() + '<br /><img src="../Content/img/' + "team1.jpg" + '"/>').css("fontSize", "15px");
but by the guide in that article I used this one insted because I need diffrent pictures and it doesn't work .
el.html(el.html() + '<br /><img src="../Content/img/' + markers[index].imgsrc + '"/>').css("fontSize", "15px");
Appricate if some one help me thanks.
When onMarkerTipShow() is invoked, the code is the index, but markers are not in scope. You need to get a handle on the markers in the map:
onMarkerTipShow: function (e, el, code) {
var markers = $('#world-map').vectorMap('get', 'mapObject').markers;
el.html(el.html() + '<br /><img src="../Content/img/'
+ markers[code].config.imgsrc
+ '"/>').css("fontSize", "15px");
}
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'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;
}
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>
I'm trying to style the markers from http://jvectormap.com/examples/markers-world/ but I'm having difficult time applying the background image for the markers
background attribute isn't working here, any directions for this?
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47',
background: 'url("image.jpg") no-repeat 0 0 transparent'
}
},
found the alternative option
jvectormap: How to implement HTML instead of simple string in the markers label/tooltip?
$('#map').vectorMap({
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47'
}
},
backgroundColor: '#383f47',
markers: [
{latLng: [46.90, 8.45], name: "My marker name"}
],
onMarkerLabelShow: function(event, label, code) {
label.html("<img src=\"img/logo.png\"><br>"+ label.html());
}
});