I am trying to append the value of map and values inside this test variable using a jQuery function ( which is at the end). How do I do this?
I want to change the value of map: 'ecoMap' to map: developmentRegionMap and values: Chherti to values: testvalue
function Eco_regions() {
test = $('#world-map').vectorMap({
map: 'ecoMap',
backgroundColor: '#FFFFFF',
regionsSelectable: false,
series: {
regions: [{
values: Chhetri,
scale: ['#fffad6', '#d05300'],
normalizeFunction: 'polynomial'
}]
}
});
};
This is the jquery function which is supposed to append the variable.
$('#change_ecoregions').click(function (e) {
e.preventDefault();
test.map.setValue('developmentRegionMap');
test.series.regions[0].setValues(testvalue);
Eco_regions();
});
What you require is plugin-specific; supposing you're using the jQuery Vector Maps plugin, according to the documentation, you'd have to do this in order to change values after the creation (untested):
jQuery('#vmap').vectorMap('set', 'map', 'developmentRegionMap');
I want to change the value of map: 'ecoMap' to map: developmentRegionMap and values: Chherti to values: testvalue
Then just make them parameters of that function:
function Eco_regions(map, value) {
test = $('#world-map').vectorMap({
map: map || 'ecoMap',
backgroundColor: '#FFFFFF',
regionsSelectable: false,
series: {
regions: [{
values: value || Chhetri,
scale: ['#fffad6', '#d05300'],
normalizeFunction: 'polynomial'
}]
}
});
};
$('#change_ecoregions').click(function (e) {
e.preventDefault();
Eco_regions('developmentRegionMap', testvalue);
});
I couldn't find a great way to just change the variable and have it redraw the map. I think you might need to just blow the old map away and append a new one in.
Define an element for the map
var mapElement = '<div id="world_map" style="width:600px; height: 400px;">';
Create a container div
<div id="container"></div>
When the change event is fired, remove the old map, append a new element to the container, and call the vectorMap function with the new settings.
$('#world_map').remove();
$('#container').append(mapElement);
$('#world_map').vectorMap(options);
Here is a fiddle as an example.
You're calling a function setValues where, unless you've omitted some code, you haven't defined it. If you change it to test.series.regions[0].values = testvalue; you should have better luck. Also, without quotes, testvalue is undefined (unless it's global somewhere) so you'll either need to assign that variable some value or else surround it with quotes to make it a string.
I think it's best to rearrange your function slightly so you can easily adjust the properties:
var test= {
map: 'ecoMap',
backgroundColor: '#FFFFFF',
regionsSelectable: false,
series: {
regions: [{
values: Chhetri,
scale: ['#fffad6', '#d05300'],
normalizeFunction: 'polynomial'
}]
}
};
function Eco_regions(settings) {
$('#world-map').vectorMap(settings);
};
$('#change_ecoregions').click(function (e) {
e.preventDefault();
test.map = 'developmentRegionMap';
test.series.regions[0] = testvalue;
Eco_regions(test);
});
Related
I have implemented a client-side join from a GitHub based CSV to a Mapbox tileset using a Papa-parse promise function, similar to how it is implemented in: Data Joins : Mapbox JS.
The promise is fulfilled and the data is stored correctly, the outlines of the regions I am trying to visualise show, but there is an issue with data-driven styling with the "interpolate", ['linear'] parameters I am trying to use, from my past experience. The 'accessibilityOutline' ID layer shows its data correctly, so it is confusing to why this is happening.
An error keeps coming up declaring
"Input/output pairs for "interpolate" expressions must be defined using literal numeric values (not computed expressions) for the input values."
I am wondering if anyone else has had this problem, and the way it was overcome. Any help would be grateful.
The code implemented is below, this is all based off the link above. The data is read in correctly and through debug testing I can see that all the data is in the correct format as the
dynamicTyping: true,
is present in the Papa.parse function. However, mapbox looks like it is unable to read this data.
function papaPromise(url) {
return new Promise(function(resolve,reject) {
Papa.parse(url, {
download: true,
header: true,
skipEmptyLines: true,
complete: resolve,
dynamicTyping: true,
});
});
}
const accessibilityCSV = papaPromise("some random url of data");
const mapContainer = useRef();
useEffect(() => {
const map = new mapboxgl.Map({
container: mapContainer.current,
style: "mapbox://styles/mapbox/outdoors-v11",
center: [-2.597, 53.39],
zoom: 9.5,
});
map.on("load", () => {
accessibilityCSV.then(function (results) {
console.log(results.data);
results.data.forEach((row) => {
map.setFeatureState({
source: 'lsoa_ultra_generalised-3gznbd',
sourceLayer: 'lsoa_ultra_generalised-3gznbd',
id: row.lsoa_code
}, {
lsoa_name: row.lsoa_name,
Total_LSOA_population: row.Total_LSOA_population,
LSOA_population_low_income: row.LSOA_population_low_income,
airport_jt60: row.airport_jt60,
airport_jt90: row.airport_jt90,
seaport_jt60: row.seaport_jt60,
seaport_jt90: row.seaport_jt90,
city_jt60: row.city_jt60,
city_jt90: row.city_jt90,
visitor_attraction_jt60: row.visitor_attraction_jt60,
visitor_attraction_jt90: row.visitor_attraction_jt90,
beach_jt60: row.beach_jt60,
beach_jt90: row.beach_jt90,
national_park_jt60: row.national_park_jt60,
national_park_jt90: row.national_park_jt90,
biz_60: row.biz_60,
biz_90: row.biz_90,
NPIER_60: row.nPIER_60,
NPIER_90: row.nPIER_90,
uni_places_60: row.uni_places_60,
uni_places_90: row.uni_places_90
},
);
});
});
map.addSource('northOutline', {
type: "vector",
url: "vectorURL"
})
map.addSource("accessibilitySource", {
type: "vector",
url: "vectorURL",
promoteId: 'LSOA11CD'
});
map.addLayer({
id: 'accessibility',
type: 'fill',
source: 'accessibilitySource',
'source-layer': 'lsoa_ultra_generalised-3gznbd',
paint: {
"fill-color":[
"interpolate",
['linear'],
['number', ["feature-state","Total_LSOA_population"]],
0,
"#fee5d9",
2075,
"#fcae91",
4150,
"#fb6a4a",
6225,
"#de2d26",
8300,
"#a50f15",
/* other */, "#ccc",
],
},
});
map.addLayer({
id:'accessibilityOutline',
type:'line',
source: 'accessibilitySource',
'source-layer': 'lsoa_ultra_generalised-3gznbd',
paint: {
"line-color": '#000000'
},
});
I have a problem with custom onClick function on doughnut chart.
The only thing I need is to override default legend onClick function calling the original one + my custom code.
Following their official documentation and this suggestion on github page I wrote this js
var defaultLegendClickHandler = Chart.defaults.doughnut.legend.onClick;
var newLegendClickHandler = function (e, legendItem) {
console.log(legendItem);
defaultLegendClickHandler.call(this, e, legendItem);
};
Then I associate it to the onClick option (JSfiddle here) but it is not working. It seems that the legendItem variable is always an empty array so the default click function does nothing.
Your JSfiddle looks fine except that the newLegendClickHandler is defined at the wrong place inside options. You should define it inside legend as follows.
legend: {
position: 'top',
onClick: newLegendClickHandler
},
Please also check Custom On Click Actions from Chart.js
documentation
The click handler was set to the chart itself and not the legend. Move the new onClick handler inside of the legend options.
var options = {
cutoutPercentage: 20,
responsive: true,
legend: {
position: 'top',
onClick: newLegendClickHandler,
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
}
};
I am already using one tooltip() function.
L.tooltip({
permanent: true,
direction: 'center',
className: 'text'
})
.setContent(feature.properties.text)
.setLatLng(layer.getLatLng()).addTo(map);
And now I need to create a new tooltip. For example with the name tooltip2().
How can I do this?
You can actually go ahead and use this function multiple times!
L.tooltip({
permanent: true,
direction: 'center',
className: 'text'
})
.setContent("Hello")
.setLatLng([38.8, -77.1])
.addTo(map);
L.tooltip({
permanent: true,
direction: 'center',
className: 'text'
})
.setContent("World")
.setLatLng([38.7, -77.1])
.addTo(map);
However, it looks like you might be looping through geojson data since you are using feature and layers within your tooltip. In that case you can just write it once:
L.geoJSON(geojson, {
onEachFeature: (feature, layer) => {
L.tooltip({
permanent: true,
direction: 'center',
className: 'text'
})
.setContent(feature.properties.name)
.setLatLng(layer.getLatLng())
.addTo(map);
}
}).addTo(map);
If you are asking about naming the tooltips or feature layer in order to use them again later in your code, you can just set it: const featureLayer = L.geoJSON... and const text = L.tooltip...
Here is a working example of adding popups, tooltips, feature layers to the map and adjusting popup & tooltip css, including the directional triangle:
https://repl.it/repls/NeighboringConventionalPhp
I'm working with the google maps API-v3. I'm adding a polygone to my map and a bunch of Polylines. These lines are usually located within the area of the polygones. This looks like so:
I disabled the click-event on the polygone:
let mapPolygone = {
id: currentPolygone.Id, //currentPolygone is just a wrapper
path: path,
stroke: {
color: currentPolygone.LineColor,
weight: currentPolygone.LineWeight
},
fill: {
color: currentPolygone.FillColor,
opacity: currentPolygone.Opacity
},
editable: false,
draggable: false,
geodesic: false,
// I disabled the click
clickable: false,
visible: true,
}
I registered a click-handler on the polyine:
let mapPolyline = {
// currentPolyline is also a wrapper
id: currentPolyline.Id,
path: path,
stroke: {
color: currentPolyline.LineColor,
weight: currentPolyline.LineWeight
},
strokeOpacity: 1,
editable: false,
draggable: false,
geodesic: false,
clickable: true,
visible: true,
icons: this.getIcons(currentPolyline), // generates a standard GMap-Arrow
events: {
//Here goes the click event. Doing stuff on
click: (polyline: any) => {
this.$scope.polyLineClicked(currentPolyline.Id);
}
}
}
What I expect from google, and from another thread, is that the polygone ignores the click and whathever element is below the polyline gets the click.
However, this is not the case. I still get the click-cursor when being above the polygone
and it still gets the click.
The order of drawing polylines/polygones happens in random order. Sometimes the line is clickable (when painted above the polygone), but usually it's not.
Is there any way to get this working without coming up with custom overlays and things like that?
Am I missing something here?
Thank you folks in advance!
Alright, preparing the MWE, recommended by #duncan did the trick.
I'm using the angular-google-map package, which provides an angular wrapper for the Google Maps API.
Polylines and Polygones are being passed to a directive:
<ui-gmap-google-map center='map.center'
zoom='map.zoom'
options="map.options"
aria-label="Google map"
control="map.control"
events="map.events"
refresh="refresh">
<!-- Polylines-->
<ui-gmap-polyline ng-repeat="p in mapPolylines"
path="p.path"
stroke="p.stroke"
visible="p.visible"
geodesic="p.geodesic"
fit="true"
editable="p.editable"
icons="p.icons"
draggable="p.draggable"
events="p.events">
</ui-gmap-polyline>
<!-- Polygones -->
<ui-gmap-polygon ng-repeat="p in mapPolygones"
path="p.path"
stroke="p.stroke"
fill="p.fill"
visible="p.visible"
geodesic="p.geodesic"
fit="true"
editable="p.editable"
draggable="p.draggable"
events="p.events">
</ui-gmap-polygon>
</ui-gmap-google-map>
I missed adding the "clickable" attribute to the ui-gmap-polygon tag. When adding this snipped to the tag, everything worked like a charm:
clickable="p.clickable"
Thank you guys anyways.
For poly* stack ordering, you could also use the zIndex property, which specifies "The zIndex compared to other polys". The angular-google-maps package also provides the option to set the zIndex attribute.
I am trying to reuse the region selection feature of JVectorMap. I am using a custom map (js) file. I have tested it in and it works fine for region selection.
Now I need to pass the regions which are selected by the user to the back end vb code. In this case maps.getSelectedRegions() gives an array of the user selected regions. I am not clear on how to pass a javascript array to back end vb code. The window.localstorage as how it is given in the example don't seem to work out here. Can somebody help me out on how this an be done?
This is the link of JVectorMap Region Selection - http://jvectormap.com/examples/regions-selection/
Following is the code I have used so far.
<script>
$(function(){ var maps; maps = new jvm.WorldMap({
container: $('#map'),
map: 'xyz_map',
regionsSelectable: true,
regionStyle: {
initial: {
fill: '#B8E186'
},
selected: {
fill: '#F4A582'
}
},
series: {
},
onRegionSelected: function(){
if (window.localStorage) {
window.localStorage.setItem(
'jvectormap-selected-regions',
JSON.stringify(maps.getSelectedRegions())
);
}
}
}); maps.setSelectedRegions( JSON.parse( window.localStorage.getItem('jvectormap-selected-regions') || '[]' )
); });
</script>
Thanks in advance
Sina
Managed to get a solution for this myself. You can add a hidden control in your asp code and assign the variable to this control.
$(function(){ var maps,temp; var hiddenControl = '<%=
inpHide.ClientID %>'; maps = new jvm.WorldMap({
container: $('#map'),
map: 'xyz_map',
regionsSelectable: true,
regionStyle: {
initial: {
fill: '#B8E186'
},
selected: {
fill: '#F4A582'
}
},
series: {
},
onRegionSelected: function(){
document.getElementById(hiddenControl).value=maps.getSelectedRegions();
} });
});