I have openlayers project. There are two object in the map. Polygon and point. I want to make edit operations in this objects. For example When I click the edit button I drag the corner of polygon, after this I want to change new polygon which have new coordinates. I did this operation for polygon but when I select the point inside of polygon I cant select point I can only select again polygon.
When I click the edit button and select point. Point is not select only polygon selected which belongs to polygon
this is my edit code
function ActiveEdit() {
var select = new ol.interaction.Select({
wrapX: false
});
var modify = new ol.interaction.Modify({
features: select.getFeatures()
});
map.addInteraction(select);
map.addInteraction(modify);
}
Related
I have a leaflet map with some Markers and I need to update custom option inside Marker option when I make doble click on each Marker.
extendedMarker = L.Marker.extend({
options: {
idUser: "Not Assigned",
color: 'grey',
localtion: 'Not Assigned'
}
});
I only can create new Marker with this new info but this will take so much space.
Default options in Marker like latitude, longitude or icon have specific setFunction but custom options don't.
Someone knows optimal option to update Marker options?
You can simply access the marker options over marker.options.
To update a option marker.option.idUser = '1234'
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()
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);
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/