Using jVectorMap, I would like to have a function that takes the country code as its parameters, then highlights that country on the map. For example:
function colorCountry(var code){
$('#world-map').vectorMap(
code : '#686868',
));
}
That is just a mockup; I'm asking here because I have little experience with Javascript / jQuery and haven't been able to find a suitable solution on Google.
I would like the function to simply color the country it is provided with, rather than clear the map so only one country is colored. For example:
colorCountry("DE");
colorCountry("US");
..would present the user with a map with both US and DE colored, rather than just one.
Try this:
$('#world-map').vectorMap({
series: {
regions: [{ values: {
"US":"#686868",
"DE"："#686868"
}, attribute: 'fill' }]
}
});
Related
I'm using the MapboxGeocoder with the countries option set to a default country, but I would like to update this option if the user changes the country they want to search in.
Current code:
// Add the control to the map.
const geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl,
marker: false,
countries: 'nz'
});
I'm using the chosen plugin from harvest, so I have the on change function working, I need to know if it's possible to change the countries option when they change the country so that results searched for will only return for the current country they have selected
// Country selection changed
$('#country_id').on('change', function(evt, params) {
// Check it's not empty
if (params) {
// code to go in here to change 'countries' option
}
});
Ok, after some digging I found out how you can do this. I know this is an old question, but I'll post it anyway in case someone else ends up here trying to do the same thing! Looking at the API references here:
https://github.com/mapbox/mapbox-gl-geocoder/blob/main/API.md#setcountries
It turns out there is a setCountries option - so just invoke it with:
placesAutocompleteBilling.setCountries(this.value)
with this.value being the country code (ES, IT, FR, GB etc). It seems to do the trick
I'm using Echarts v5.2.2 (in an Angular project, with ngx-echarts) to render a line chart using multiple series. I have a listener for the 'highlight' event. This event is giving me an object with a batch of seriesIndex and dataIndex but it doesn't provide the color of each series.
Is there a way to get the colors that were dynamically assigned by echarts?
This is what I'm trying to implement:
Listen when the mouse pointer snapped into a graph line point.
Doing this via this.chartInstance.on('highlight', this.handleShowTip);.
Use the batch of seriesIndex & dataIndex where the mouse pointer snapped to render a table using color, x & y value as columns (the table is placed outside the graph.
I understand that I could use the tooltip's formatter option with a callback function which will provide the series colors in its arguments... and I could broadcast these arguments outside my graph component to render what I need anywhere I want, but this does not feel correct (a formatter is aimed to return HTML or string) and I wonder if there's a better way to get the generated series colors.
Thank you!
The Echarts uses a built-in palette based on the theme. The easiest way to get a set of colors is this:
myChart.getOption().color
To get the colors that are mapped to the series, you can do the following:
myChart.getModel().getSeries().map(s => {
return {
seriesIndex: s.seriesIndex,
seriesColor: myChart.getVisual({
seriesIndex: s.seriesIndex
}, 'color')
}
})
And the result will be something like this:
[
{
"seriesIndex":0,
"seriesColor":"#5470c6"
},
{
"seriesIndex":1,
"seriesColor":"#91cc75"
},
{
"seriesIndex":2,
"seriesColor":"#fac858"
},
{
"seriesIndex":3,
"seriesColor":"#ee6666"
},
{
"seriesIndex":4,
"seriesColor":"#73c0de"
}
]
my coding knowledge is next to nothing, but I am having heaps of fun trying to learn.
I have been amending the code from Leaflet TimeDimension example 9: http://apps.socib.es/Leaflet.TimeDimension/examples/example9.html to try and show animal movement through time on a map created in Leaflet.
I have a self written GPX file and KML track containing the individual animal's lats and longs through time. I have also added the time dimension so that I can play the time slider and my custom icons move across the map as I would like. However, I have now hit a wall.
I would like to be able to click on a marker (at any stage during the time sliders duration [marker position moves]) and bring up information about that marker in a popup. This would be easy if there were actual markers (marker.bindPopup()) but the markers are created from a track in a GPX file:
example of an animals track in the GPX file:
...
<trk><name>THE DESCRIPTION I WANT TO DISPLAY IN A POPUP</name><number>2</number><trkseg>
<trkpt lat="-40" lon="120"><ele>2</ele><time>2018-01-06T10:09:57Z</time></trkpt>
<trkpt lat="-41" lon="122"><ele>2</ele><time>2018-01-21T16:45:57Z</time></trkpt>
</trkseg></trk>
...
and I do not know how to call the name or the description of one of these tracks and bind the information in a popup (there are multiple sets of tracks [each with a unique name and description] in the single GPX file).
There are two main solutions I have been looking into (that I think might be possible) but can't quite get either to work.
use get_name() from the GPX.js script: https://github.com/mpetazzoni/leaflet-gpx
It says:
If you want to display additional information about the GPX track, you can do so in the 'loaded' event handler, calling one of the following methods on the GPX object e.target:
get_name(): returns the name of the GPX track
Here is the demo code: https://git.nxfifteen.rocks/rocks/core/raw/056ddab410a40496a917cb150be8d92f4cc205cf/map.php but this code is well beyond my understanding and I haven't been able to figure out how to make it work
I have tried:
function onClick(e) {
alert(this.get_name());
}
but it doesn't work (not sure if its heading in the right direction or not).
Somehow in the customLayer make the bindPopup link to the name of the GPX track
Here is the section of code in my .js file that calls and loads the GPX and KML layer:
var customLayer = L.geoJson(null, {
pointToLayer: function (feature, latLng) {
if (feature.properties.hasOwnProperty('last')) {
return new L.Marker(latLng, {
icon: icon
}).bindPopup ("yo");
}
return L.circleMarker(latLng).bindPopup ("hey");
}
});
var gpxLayer = omnivore.gpx('data/data.gpx', null, customLayer).on('ready', function(e) {
map.fitBounds(gpxLayer.getBounds(), {
paddingTopLeft: [160, 160],
paddingBottomRight: [100, 100]
});
});
var gpxTimeLayer = L.timeDimension.layer.geoJson(gpxLayer, {
updateTimeDimension: true,
addlastPoint: true,
waitForReady: true
});
var kmlLayer = omnivore.kml('data/data.kml');
var kmlTimeLayer = L.timeDimension.layer.geoJson(kmlLayer, {
updateTimeDimension: true,
addlastPoint: true,
waitForReady: true
});
gpxTimeLayer.addTo(map);
In the variable: customLayer that is linked to the GPX track using omnivore, I can add a clickable popup that says "yo" to every animals marker. I can pause the time slider at any point and when I click a marker "yo" popus up (almost what I need).
I was wondering if there is some way to, instead of it saying "yo", tell it to return the name of the track that has been clicked, so that each marker will display its respective name (the name will contain the description I want it to show).
Sorry this is such a long winded question, and thank you in advance for any solutions, tip or pointers on whether my attempts just need a bit of tweaking, or if there is a different better solution out there.
Is there a way to make combined map which could use "drill-down" behaviour for some areas and "select" behaviour for other ones areas?
I believe that what you are asking can be achieved also with some of the standard functionalities provided by jVectorMap. In my example below, all US regions other than Texas can be selected, whereby the normal multimap drill-down is performed just only for US-TX.
$(document).ready(function () {
new jvm.MultiMap({
container: $('#map'),
maxLevel: 1,
main: {
map: 'us_lcc',
regionsSelectable: true,
regionStyle: {
selected: {
fill: 'green'
}
},
onRegionClick: function(event, code) {
if(code == "US-TX") {
return false;
} else {
event.stopImmediatePropagation();
}
}
}
});
});
Explanation:
As the documentation says here, the main Map of the MultiMap object can be configured the same way as the "normal" Map.
Inside the multi-map onRegionClick handler, the region selection can be avoided by returning false, and the drilldown can be stopped by invoking stopImmediatePropagation(). I tested this snippet with jVectorMap version 2.0.2 but it should work also with the latest versions.
BTW, thanks to bjornd for the great jVectorMap.
There's no standart behaviour to reach this.
To handle this I had to modify MultiMap file. In addMap function you could add
hardcode check region code or add it to config and pass or deny drilling down.
I must admit that I am new to jQuery and JS but I really like the cool things you can do with jVectorMap. But so far I failed to add one thing: On mouseover/hover normally the name of the state or country is shown. Is it possible to add the related data (e.g. the GDP value)?
And / or is it possible to add a legend with the color values of the countries/states?
Thanks a lot!
Claus
Using the data visualization example you could add in a callback function to show the related figure for the chosen state code. So if your data looked like:
var gdpData = {"ca":34.56 ...}
Then you could do something like...
$('#map').vectorMap({
colors: colors,
hoverOpacity: 0.7,
hoverColor: false,
onLabelShow: function(event, label, code){
label.text(label.text() + " (" + gdpData[code] + ")");
}
});