I am using Jvector Map. It's working now with the onRegionTipShow function. How to change to it to onRegionClick?
When I change it, it does not work. How to get country code in jvectormap on click?
jQuery.noConflict();
jQuery(function () {
var $ = jQuery;
$('#focus-single').click(function () {
$('#map1').vectorMap('set', 'focus', {
region: 'AU',
animate: true
});
});
$('#focus-multiple').click(function () {
$('#map1').vectorMap('set', 'focus', {
regions: ['AU', 'JP'],
animate: true
});
});
$('#focus-coords').click(function () {
$('#map1').vectorMap('set', 'focus', {
scale: 7,
lat: 35,
lng: 33,
animate: true
});
});
$('#focus-init').click(function () {
$('#map1').vectorMap('set', 'focus', {
scale: 1,
x: 0.5,
y: 0.5,
animate: true
});
});
$('#map1').vectorMap({
map: 'world_mill_en',
panOnDrag: true,
focusOn: {
x: 0.5,
y: 0.5,
scale: 1,
animate: true
},
series: {
regions: [{
scale: ['#688FA0'],
normalizeFunction: 'polynomial',
values: {
//"DZ": 158.97,
// "AZ":1.1,
"AG": 1.1,
// "AE":7.54,
// "AO":5.6,
"AR": 351.02,
//"AM":3.96,
"AU": 1219.72,
"AT": 366.26,
//"AF":3.96,
// "AL":3.96,
//"BS": 7.54,
"BH": 21.73,
// "BI":4.45,
"BB": 3.96,
//"BY": 52.89,
"BE": 461.33,
}
}]
},
onRegionTipShow: function (e, label, code) {
var code = label.html();
switch (code) {
case 'Argentina':
label.html("<div style='height:129px;width:296px;Length:98px'><b>Country</b>:  Argentina<br/><b>Category</b>:  Approved<br/><b>PDP GCO Region</b>:  South America<br/><b>Comments</b>:  Have had delays with regulatory submissions/approvals. As long as advanced planning is taken into consideration this country should be okay.</br><b>CCL</b>:  Mariana Bodmer</div>");
break;
Related
NET MVC Core and I am trying to use Particles.js. I have already tried referencing a few tutorials, but am unable to solve this issue. This is how it normally looks like. https://vincentgarreau.com/particles.js/#default
I got this however, with big and super laggy buttons and also it does not occupy full screen nor does it have the hover action (whereby the circle moves away as the mouse approaches). The onclick circle works though. And the configuration shouldn't be wrong, as I downloaded the default one.
Update: Just before posting I managed to make it full screen. However, the big buttons and lagginess remains.
The following is my codes so far. I tried to search the id or class but due to the lack of documentation it is quite hard to find. Hope someone who knows it can help! Thank you very much :)
#{
ViewData["Title"] = "Home Page";
}
<div id="particles-js" style="background-color: rgb(0, 0, 0); background-image: url(""); background-size: cover; background-repeat: no-repeat; ba">
<canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;"></canvas>
</div>
<script src="~/js/particles.js" data-turbolinks-track="reload" asp-append-version="true"></script>
<script>
particlesJS("particles-js", {
particles: {
number: {
value: 400,
density: {
enable: true,
value_area: 800
}
},
color: {
value: '#fff'
},
shape: {
type: 'circle',
stroke: {
width: 0,
color: '#ff0000'
},
polygon: {
nb_sides: 5
},
image: {
src: '',
width: 100,
height: 100
}
},
opacity: {
value: 1,
random: false,
anim: {
enable: false,
speed: 2,
opacity_min: 0,
sync: false
}
},
size: {
value: 20,
random: false,
anim: {
enable: false,
speed: 20,
size_min: 0,
sync: false
}
},
line_linked: {
enable: true,
distance: 100,
color: '#fff',
opacity: 1,
width: 1
},
move: {
enable: true,
speed: 2,
direction: 'none',
random: false,
straight: false,
out_mode: 'out',
bounce: false,
attract: {
enable: false,
rotateX: 3000,
rotateY: 3000
}
},
array: []
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: {
enable: true,
mode: 'grab'
},
onclick: {
enable: true,
mode: 'push'
},
resize: true
},
modes: {
grab: {
distance: 100,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 200,
size: 80,
duration: 0.4
},
repulse: {
distance: 200,
duration: 0.4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
},
mouse: {}
},
retina_detect: false,
});
//var count_particles, stats, update;
//stats = new Stats;
//stats.setMode(0);
//stats.domElement.style.position = 'absolute';
//stats.domElement.style.left = '0px';
//stats.domElement.style.top = '0px';
//document.body.appendChild(stats.domElement);
//count_particles = document.querySelector('.js-count-particles');
//update = function () {
// stats.begin();
// stats.end();
// if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
// count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
// }
// requestAnimationFrame(update);
//};
//requestAnimationFrame(update);;
</script>
Update: I finally found the answer. To facilitate people who working on this in the future, make sure to use the download from the sidebar and not the one in the center.
Not this (the download in the center):
But this (the one at the bottom right side, "Download current config(json)"):
I have a Vuejs single file component which shows the map fine:
But none of the (default) handlers work, also not after making them explicit at initialisation.
This is the single file component:
<template>
<div id='map'></div>
</template>
<script>
import mapboxgl from 'mapbox-gl'
export default {
data () {
return {}
},
ready () {
this.createMap()
},
methods: {
createMap: function () {
mapboxgl.accessToken = [myapikey]
var simple = {
'version': 8,
'sources': {
'osm': {
'type': 'vector',
'tiles': ['https://vector.mapzen.com/osm/all/{z}/{x}/{y}.mvt?api_key=vector-tiles-[myapikey]']
}
},
'layers': [{
'id': 'background',
'type': 'background',
'paint': {
'background-color': '#bbccd2'
}
},
{
'id': 'majorroad',
'source': 'osm',
'source-layer': 'roads',
'type': 'line'
},
{
'id': 'buildings',
'type': 'fill',
'source': 'osm',
'source-layer': 'buildings'
}]
}
// init the map
this.map = new mapboxgl.Map({
container: 'map',
style: simple,
minzoom: 1.3,
bearingSnap: 15,
hash: true, // shows coordinates and zoom in URL widget
center: [-74.0073, 40.7124], // Manhattan
zoom: 16,
attributionControl: true,
interactive: true,
scrollZoom: true,
dragRotate: true,
dragPan: true,
doubleClickZoom: true,
pitch: 60
})
this.map.addControl(new mapboxgl.Navigation())
this.map.addControl(new mapboxgl.Geolocate({position: 'top-left'}))
this.map.addControl(new mapboxgl.Attribution({position: 'bottom-right'}))
this.map.addControl(new mapboxgl.Scale({
position: 'bottom-left',
maxWidth: 80,
unit: 'imperial'
}))
}
}
}
</script>
<style>
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
Any idea why all handlers don't work? I can zoom in and out with the widget. Same map initialisation outside of the component: all handlers works as should.
Analyzed your repo. You have an extra #map DOM element on your index.html which is absolute positioned on top of the UI. All touch/click events are captured by this DOM element and they don't reach the actual map. Created a PR to remove the extra markup.
The JSFiddle will clearly allow you to understand the problem.
I want the endpoints to be binded to the elements inside each container which are draggable but only the endpoints drawn first are correct. The second time the draw function is called, the positions are incorrect and the dragging is not synced.
I have a guess that the problem lie with the CSS position but I can't find it.
jsPlumb.ready(function() {
$(".scroll-box").draggable({
drag: function() {
jsPlumb.repaintEverything();
//jsPlumb.repaint($(this));
}
});
// jsPlumb.draggable($(".scroll-box"));
drawEndPoints("in-leaf", "Right");
drawEndPoints("out-leaf", "Left");
});
function drawEndPoints(classname, endpointposition) {
var endpointOptions = {
isSource: true,
isTarget: true,
endpoint: ["Dot", {
radius: 10
}],
style: {
fillStyle: 'blue'
},
maxConnections: -1,
connector: "Straight",
connectorStyle: {
lineWidth: 2,
strokeStyle: 'black'
},
scope: "blackline",
dropOptions: {
drop: function(e, ui) {
alert('drop!');
}
}
};
jsPlumb.addEndpoint($("." + classname), {
anchor: endpointposition
}, endpointOptions);
//jsPlumb.repaintEverything();
}
You are missing the jsPlumb.setContainer($("body"));
https://jsfiddle.net/mkaran/mLthybzo/
https://jsplumbtoolkit.com/community/doc/home
EDIT: a fiddle with your example https://jsfiddle.net/mkaran/aof6mq34/
I want to implement a mapping app with draggable elements. I have used the following code but when the draggable is set, the div element is not draggable, only the anchor is draggable. What am I missing?
JSFiddle
<style>
.dd{
width:60px;
height:60px;
border:1px solid red;
position:relative;
}
</style>
<div class="container">
<div id="window3" class="dd" style="margin-left:50px;margin-top:100px"></div>
<div id="window4" class="dd" style="margin-left:400px;margin-top:100px"></div>
</div>
<script>
jsPlumb.ready(function () {
//
jsPlumb.draggable($(".dd"));
var endpointOptions = {
isSource: true,
isTarget: true,
endpoint: ["Dot", {
radius: 10
}],
style: {
fillStyle: 'blue'
},
maxConnections: -1,
connector: "Straight",
connectorStyle: {
lineWidth: 3,
strokeStyle: 'black'
},
scope: "blackline",
dropOptions: {
drop: function (e, ui) {
alert('drop!');
}
}
};
var window3Endpoint = jsPlumb.addEndpoint('window3', {
anchor: "Right"
}, endpointOptions);
var window4Endpoint = jsPlumb.addEndpoint('window4', {
anchor: "Left"
}, endpointOptions);
});
</script>
using jQuery draggable allows the div to be draggable but then the anchors become detached.
So the two options are
Use $(".dr").draggable() and find a way to bind anchors to the div
Make the div draggable in jsPlumb.draggable()
Or is my approach completely wrong?
UPDATE: I set the CSS position as absolute in the divs and now the divs are draggable but still the binding is faulty
You missed to invoke jsPlumb.repaintEverything() once the DOM element is dragged.
Here is the version which uses jQuery.draggable()
jsPlumb.ready(function() {
$('.dd').draggable({
//listen for element dragged event
drag: function(){
jsPlumb.repaintEverything();
}
});
var endpointOptions = {
isSource: true,
isTarget: true,
endpoint: ["Dot", {
radius: 10
}],
style: {
fillStyle: 'blue'
},
maxConnections: -1,
connector: "Straight",
connectorStyle: {
lineWidth: 3,
strokeStyle: 'black'
},
scope: "blackline",
dropOptions: {
drop: function(e, ui) {
alert('drop!');
}
}
};
var window3Endpoint = jsPlumb.addEndpoint('window3', {
anchor: "Right"
}, endpointOptions);
var window4Endpoint = jsPlumb.addEndpoint('window4', {
anchor: "Left"
}, endpointOptions);
});
Updated Fiddle
I have currently Using Jvcetor Map showing error in IE8 browser.document mode and browser Mode different showing errot. but both same its working Here attach MY code :
<!DOCTYPE html>
<html>
<head>
<title>Country Footprint</title>
<script>
jQuery.noConflict();
jQuery(function(){
var $ = jQuery;
$('#focus-single').click(function(){
$('#map1').vectorMap('set', 'focus', {region: 'AU', animate: true});
});
$('#focus-multiple').click(function(){
$('#map1').vectorMap('set', 'focus', {regions: ['AU', 'JP'], animate: true});
});
$('#focus-coords').click(function(){
$('#map1').vectorMap('set', 'focus', {scale: 7, lat: 35, lng: 33, animate: true});
});
$('#focus-init').click(function(){
$('#map1').vectorMap('set', 'focus', {scale: 1, x: 0.5, y: 0.5, animate: true});
});
$('#map1').vectorMap({
map: 'world_mill_en',
panOnDrag: true,
focusOn: {
x: 0.5,
y: 0.5,
scale: 1,
animate: true
},
series: {
regions: [{
scale: ['#688FA0'],
normalizeFunction: 'polynomial',
values: {
</script>
its showing web page error In IE8. how to run when document mode and browser different ? please help me
This is like the fifth time you're asking the exact same question?
I've answered it in the comments, and you keep asking the same thing, with the same code, here
https://stackoverflow.com/questions/30475659/jvector-map-not-working-correctly-ie-8#comment49031731_30475659
and here, different user, but exact same code
Jvector Map not working when browser Mode and document mode different in IE8
Try to listen this time, you have a trailing comma inside the object that defines the options for jVectorMap
$('#map1').vectorMap({
map: 'world_mill_en',
panOnDrag: true,
focusOn: {
x: 0.5,
y: 0.5,
scale: 1,
animate: true
},
series: {
regions: [{
scale: ['#688FA0'],
normalizeFunction: 'polynomial',
values: {
"TL": 0.62,
"TO": 0.3,
"GB": 2258.57,
"US": 14624.18,
"VU": 0.72, // IT'S HERE ----------------
}
}]
},
Note the trailing comma, the last property in an object shouldn't have a trailing comma as there are no more properties following it.
Most browsers don't care, but in old IE you'll get the exact same error you're getting, and you have to remove the last comma.