How do I select the list of push pins inside the polygon in bong maps.
In the example below I see the push pins inside the selected polygon get highlighted but is there a code sample that i can see/use where they maybe get a list of push pins details on selection ?
http://bingmapsv8samples.azurewebsites.net/#Select%20Data%20in%20Drawn%20Polygon%20Area
From the source code, it seems to be generated randomly. To get the list
use the variable pinLayer.
var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(30, map.getBounds(), { color: 'purple' });
pinLayer.add(pushpins);
Related
Adding hyperlinks to maps was already addressed here :
amcharts drill-down map countries clickable
But I am wondering what I would need to change if I were to instead add clickable hyperlinks to the states or provinces within the countries in the 'drill down to countries' example?
https://www.amcharts.com/demos/drill-down-to-countries/
For instance, if I were to click on China and view the provinces, how would I assign a URL to its most southern province, Guangxi Zhuang, by using both the methods that you mentioned above?
The ID for that territory is "CN-GX", and can be found in this file :
https://github.com/amcharts/amcharts4-geodata/blob/master/dist/es2015/chinaHigh.js
Thanks for your help!
As indicated in the linked answer, you can set a url propertyField for the PolygonSeries so that it can apply the URL from the data provided to the series. You can combine this with the done event handler in the countrySeries (the drilled down map) to populate the series' data with the desired information based on the loaded geodata url. For example:
countrySeries.mapPolygons.template.propertyFields.url = "url";
countrySeries.geodataSource.events.on("done", function(ev) {
worldSeries.hide();
countrySeries.show();
if (ev.target.url.indexOf('china') != -1) {
countrySeries.data = [{
id: "CN-GX",
url: "https://en.wikipedia.org/wiki/Guangxi"
}];
}
});
Obviously you'll want to make this more robust in your application, but you get the idea.
Demo of your Guangxi scenario
I have got a Map where I display Markers whenever a user clicks on the map in order to draw a Polygon. Now I want to allow the user to edit an already set Marker. That means he should be able to klick on the marker and drag it to the desired position.
In order to edit the position of only one Marker I need to identify the one Marker that is being dragged in order to pass the changed position to the according Marker.
I am trying to do this inside the my eventHandler because here I can get some more information for the Marker. Here is one of my handler and the handler where all the updating of the position should happen.
[EventUtils.DRAG_END]: (event, details) => {
const target = event.target;
if (target instanceof H.map.Marker) {
this.disableMapBehaviour = false;
const id = target.getId();
this.props.onDrag(details.calculateGeoCoords(), id);
this.forceUpdate();
}
My problem is that the getId() function always gives me random ID's. When I set 10 markers for example, this is how the sequence of the Marker ID looks like:
1 Marker has ID of 2
2 Marker has ID of 3
3 Marker has ID of 5
4 Marker has ID of 6... and the rest is always different.
Why does the Map set the ID's randomly and not like 1,2,3,4,5... ?
Or what am I doing wrong? Should I use something else than the event.target.getId()
Summary: The map doesn't set the Ids randomly. It was me who did not splice the array of Markers when the dragging was finished. Works fine now with getId()
I displayed multiple markers on the AGM map using latitudes and longitudes. I want to display full address on each marker. Can anybody help me to display full address on click or hover to each marker?
I have used below example to display map using Angular.
https://stackblitz.com/edit/angular-google-maps-demo?file=app%2Fapp.component.html
Here is my solution for the normal InfoWindow, but it should work with SnazzyWindow as well:
**.html**
<agm-map>
<agm-marker *ngFor="let marker of markers"
(markerClick)="openWindow(marker.id)"
[latitude]="marker.lat"
[longitude]="marker.lng">
<agm-info-window
[isOpen]="isInfoWindowOpen(marker.id)"
[latitude]="marker.lat"
[longitude]="marker.lng">InfoWindow #{{marker.id}}</agm-info-window>
</agm-marker>
</agm-map>
<button type="button" (click)="openWindow(5)">Open InfoWindow 5</button>
**.ts**
openedWindow : number = 0; // alternative: array of numbers
openWindow(id) {
this.openedWindow = id; // alternative: push to array of numbers
}
isInfoWindowOpen(id) {
return this.openedWindow == id; // alternative: check if id is in array
}
Make sure you added the latitude and longitude attributes to <agm-marker> and <agm-info-window>. Otherwise the <agm-info-window> position would differ from the marker, when you open it by the button.
If you want to have multiple info windows open at the same time, have a look at the comments above, starting with alternative:.
You may need to add more attributes to make it work. The code is limited to explain the basic functionality.
I am struggling with Javascript and Leaflet tryind to realize a dashboard.
I am trying to realize a choropleth map following this tutorial.
I need to change dynamically data display on map according to two select menu.
Selects:
<select class="c-select" id="methodSelected" name="methodSelected" required>
</select>
<select class="c-select" id="yearSelected" name="yearSelected" required>
</select>
I am holding changing on selects with
$("#methodSelected").change()
$("#yearSelected").change()
both are declared inside a
$(document).ready(function() {}
In this block I also declare the required variables and functions
var choroplethMap;
var q = d3_queue.queue();
q.defer(d3.json, "final2.geojson");
function ready(GeoJSON) {
...
makePlaceHolderChoroplethMap();
}
makePlaceHolderChoroplethMap is like that
function makePlaceHolderChoroplethMap() {
choroplethMap = L.map('choroplethContainer').setView([51.505, -0.09], 2);
L.tileLayer("url",
{
id: id,
attribution: attribution,
accessToken: accessToken
}
).addTo(choroplethMap);
Now when I will change values with the two select menu I want update map, so I put into $("#yearSelected").change() a call to makeChoroplethMap().
function makeChoroplethMap() {}
Inside this function I put code following tutorial previously linked.
The problem is that when I changed the values with that code I will re-add new layers over others previously added (Geojson, legend and control, as you can see)
So I tryed to leave only binding with data into makeChoroplethMap(),
geojson = L.geoJson(data,
{
style: style,
onEachFeature: onEachFeature
}
).addTo(choroplethMap);
but I recieve an error in info.addTo(choroplethMap); as t is undefined. I think because choroplethMap is not initialized. Map and select work, but controls are not displayed 'cause of error.
For now (I think I breaked something because yesteday worked) also geojson layer overstay over country also if I change values with select (the previously one putted does not go off also I change values).
So my question is: how can re-bind data without re-adding also legend and other control?
Add the legend and the GeoJSON layer once, when you're initializing the map. If you add them in makeChoroplethMap, you'll be re- adding them.
Then, use L.GeoJSON.clearLayers() and the
currently undocumented L.GeoJSON.addData() method to clear/add polygons.
I would like to visualise a number of variables per country on a world map. With Google Fusion Tables I set up the map. Now I would like to flip between the variables/layers (Var_A and Var_B) I would like to visualise with a dropdown menu. I followed the code the Guardian used in this article.
In this example the formatting of the info window in the FusionTable itself seems to simply show up but that doesn't work for me.
This is the fusion table: https://www.google.com/fusiontables/embedviz?viz=GVIZ&t=TABLE&q=select+col0%2C+col1%2C+col2%2C+col3%2C+col4%2C+col5%2C+col6%2C+col7+from+19I14XgRDOk7697iWA8XSukbYBBelNRymFOqjw_ru&containerId=googft-gviz-canvas
Clicking on the respective country I would like to display an info window, which shows a chart (bar chart for example) showing the values Var_A and Var_A1 when Layer 'Var_A' is selected and Var_B and Var_B1 when Layer 'Var_B' is selected.
I tried with the code example in Add a google chart to a infowindow using google maps api ....
function drawChart(marker) {
var node = document.createElement('div'),
infoWindow = new google.maps.InfoWindow(),
chart = new google.visualization.PieChart(node);
chart.draw(data, options);
infoWindow.setContent(node);
infoWindow.open(marker.getMap(),marker);
}
... but not even the static google chart worked for me.
So I really have three problems here:
1) show ANY chart in the info window
2) show a chart using data from the respective data row (country)
3) show a chart using data from the respective data row (country) and depending on the selected layer
I tried for a couple of days now with many unsuccessful ways and I am stuck - ready to leave google maps if I can not get it to work. This is the fiddle of the last thing that did at least show a map - I had to remove all event listeners again...
fiddle: http://jsfiddle.net/sytpp/ovfauhwb/
Any help greatly apprechiated!!
observe the click-event of the FusionTablesLayer, you will get there the values for the particular row:
google.maps.event.addListener(layer,'click',function(e){
//which values need to be drawn in the chart, A or B ?
var prefix=document.getElementById('selector').value,
//collect the data
row={title:e.row.Country.value,rows:[]};
//Var_A or Var_B
row.rows.push([prefix,Number(e.row[prefix].value)]);
//Var_A or Var_B1
row.rows.push([prefix+'1',Number(e.row[prefix+'1'].value)]);
//call drawChart by passing the collected data and clicked position as arguments
drawChart(row,e.latLng);
});
Now use the data(Note: you may initially set the content of the infoWindow to an empty div-element, there is no need to create a new node each time)
function drawChart(row,position) {
// Create the data table.
var data = new google.visualization.DataTable();
//set the scheme
data.addColumn('string', 'label');
data.addColumn('number', 'amount');
//add the data
data.addRows(row.rows);
// Set chart options
var options = {'title':row.title,
'width':300,
'height':200,
legend:'none'};
//assuming the infoWindow already has the content set to a DOMNode, e.g. a div
var chart = new google.visualization.BarChart(infoWindow.getContent());
chart.draw(data, options);
infoWindow.setOptions({map:map,position:position});
}
Note: you must set the suppressInfoWindows-option of the FusionTablesLayer to true, otherwise 2 InfoWindows will open, the built-in and the custom where the chart will be drawn.
Demo: http://jsfiddle.net/doktormolle/o1fyarnf/