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());
}
});
Related
I am using Here maps for javascript v3.1.24.0.
My use case is to have a wide transparent polyline over another thin visible polyline so that I can make it easier for users to perform events like hover and tap.
However the transparent polyline with higher zIndex completely hides the polyline underneath it.
Is there a solution or a workaround for this?
const path = [
{ lat: 51, lng: 10 },
{ lat: 51, lng: 20 }
];
const path2 = [
{ lat: 50, lng: 15 },
{ lat: 53, lng: 18 }
];
const linestring = new window.H.geo.LineString();
path.forEach(function (point) {
linestring.pushPoint(point);
});
const linestring2 = new window.H.geo.LineString();
path2.forEach(function (point) {
linestring2.pushPoint(point);
});
const redPolyline = new window.H.map.Polyline(linestring2, {
style: { strokeColor: "red", lineWidth: 5 },
zIndex: 0
});
const transparentPolyline = new window.H.map.Polyline(linestring, {
style: { strokeColor: "rgba(255, 255, 255, 0.1)", lineWidth: 10 },
zIndex: 1
});
JS Fiddle link: https://jsfiddle.net/sharmakushagra/nabsxez9/19/
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;
}
Hi guys this is my JavaScript code to make ip marker for vector map to show online ip..
all ips have 3 different port like: ip1:1020 or ip2:5050 or ip3:6969
the format for my ips that i can read from ip.txt file like is :
{"relays":[{
"or_addresses":["2.176.82.122:1020"],"latitude":35.6961059570313,"longitude":51.423095703125},
{"or_addresses":["2.177.37.250:5050"],"latitude":35.6961059570313,"longitude":51.423095703125},
{"or_addresses":["2.178.57.250:6969"],"latitude":35.6961059570313,"longitude":51.423095703125},
{"or_addresses":["2.18.5.20:5050"],"latitude":35.6961059570313,"longitude":51.423095703125},
{"or_addresses":["2.78.7.25:1020"],"latitude":35.6961059570313,"longitude":51.423095703125}
]}
and this is my main script
<script>
$(document).ready(function(){
$('#worldmap').vectorMap({
map: 'world_mill_en',
scaleColors: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
hoverOpacity: 0.7,
hoverColor: false,
markerStyle: {
initial: {
fill: '#cc6600',
stroke: '#222222',
r: 2
}
},
backgroundColor: '#CCC',
markers: [
]
});
map = $('#worldmap').vectorMap('get', 'mapObject');
$.getJSON('http://127.0.0.1/bantools/ip/ip.txt', function(data){
$.each(data.relays, function(idx, relay)
{
map.addMarker(relay.or_addresses[0], {'latLng' : [relay.latitude, relay.longitude], "name" : relay.or_addresses[0]});
});
});
});
</script>
my question is how i can make different style for different PORTS ????!
my means i want to use this style for port = 1020 :
markerStyle: {
initial: {
fill: '#cc6600',
stroke: '#222222',
r: 2
}
}
and for port = 5050 i want to use this style :
markerStyle: {
initial: {
fill: '#aaa',
stroke: '#bbb',
r: 2
}
}
and for other port...
http://jsbin.com/womoqa/edit?js,output
$(function(){
$('#world-map-markers').vectorMap({
map: 'world_mill_en',
scaleColors: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
hoverOpacity: 0.7,
hoverColor: false,
backgroundColor: '#383f47',
markers: [
{latLng: [41.90, 12.45], name: 'Vatican City',
style: {
fill: '#cc6600',
stroke: '#222222',
r: 5
}},
{latLng: [17.11, -61.85], name: 'Antigua and Barbuda',
style: {
fill: '#ff0000',
stroke: '#222222',
r: 8
}},
{latLng: [0.33, 6.73], name: 'São Tomé and Príncipe',
style:{
fill: '#F8E23B',
stroke: '#383f47'
}}
]
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://jvectormap.com/js/jquery-jvectormap-2.0.2.min.js"></script>
<script src="http://jvectormap.com/js/jquery-jvectormap-world-mill-en.js"></script>
<link rel="stylesheet" href="http://jvectormap.com/css/jquery-jvectormap-2.0.2.css">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="world-map-markers" style="width: 720px; height: 400px"></div>
</body>
</html>
I think to set the initial marker style you would need to go through all the data and build a scale (grouping), which is then used by jvectormap to get the values for the marker.
Your script to get json data looks good, so you are first showing the map and then put the markers over them. I think its a good approach, and your script is just only missing a simple function to prepare the markers style, if i'm not wrong here.
I changed slightly your data because all coordinates are pointing to the same location and the markers overlaps. It would be also useful if you explain if this is what you have to deal with.
This is a simple function to get the styles for the markers, it's just like a boring switch:
function getMarkerStyle(port) {
var styles = {'1020': {fill: '#cc6600', stroke: '#222222',r: 2},
'5050': {fill: '#aaa',stroke: '#bbb',r: 2}};
var unknown = {fill: '#F00',stroke: '#000',r: 2};
return styles[port] || unknown;
}
This shall be inside your getJSON callback function, instead of $.each i'm using here a classic for loop:
for (var i = 0, l = logFile.relays.length; i < l; i++) {
var port = logFile.relays[i].or_addresses[0].split(':')[1];
var id = logFile.relays[i].or_addresses[0].split(':')[0];
var coords = [logFile.relays[i].latitude, logFile.relays[i].longitude];
var name = id;
var style = getMarkerStyle(port);
mapObj.addMarker(id, {latLng: coords, name: name, style: style}, null);
}
You just only need to put the style inside the second parameter of the function addMarker.
Tested with jvectormap-2.0.2
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());
}
});