I hope to find a quick answer for my problem.
I am using openlayer directive (https://github.com/tombatossals/angular-openlayers-directive) to draw a map in my App.
I would like to add polyline to the map which shows a route on this map.
I could not find any solution for this. Is it possible to draw these lines?
Thank you for your help!
If you want to draw a line between set of points, first transform each co-ordinate
points.push(ol.proj.transform([xx,yy],'EPSG:4326', 'EPSG:3857'));
then create LineString Geometry
var thing = new ol.geom.LineString(points);
and create a feature and add it to a layer
var feature = new ol.Feature({
name: "Thing",
geometry: thing
})
});
vectorSource.addFeature( feature );
Demo
https://plnkr.co/edit/WqWoFzjQdPDRkAjeXOGn?p=preview
Related
I use the following plug-in to move the marker on the map - https://github.com/openplans/Leaflet.AnimatedMarker
Faced with such a problem that the zoom the map, markers are beginning to jump on it. How is that correct?
you do not need a plugin.
this should do it
marker.setLatLng([lat, long]);
I'm using Angular Leaflet Directive. In the example, say here form the docs (http://tombatossals.github.io/angular-leaflet-directive/#!/examples/dragging-markers), we have a marker that is draggable. Changing the location of the draggable Madrid marker is possible by clicking up and down on the lat/lng input.
Is there a way for the reverse to happen? That is, when the marker is dragged, the location is updated in those input values?
Alternately, is there a way to access a specific marker and retrieve its coordinates with the directive?
you should take a look at this link: http://tombatossals.github.io/angular-leaflet-directive/examples/0500-markers-simple-example.html
Specifically at those lines:
$scope.$on("leafletDirectiveMarker.dragend", function(event, args){
$scope.position.lat = args.model.lat;
$scope.position.lng = args.model.lng;
});
There is also a marker ID, if you have more than one marker on the map.
Also, you should know that when you drag marker, lat/lng properties of that marker update themselves, so you can use simple $watch, too.
I have some GeoJSON returned from a call to a PostGIS database. I'd like to be able to add a marker for each feature, and be able to toggle different types of marker/feature. Currently I'm using JavaScript to generate a marker for each feature, adding them to arrays according to type, and then going through the arrays setting show/hide as appropriate to toggle the 'layers'.
This works OK, but I'm wondering if the new GeoJSON functionality offers a better way to do this. As far as I can see though, all the features get added to the same datalayer and toggling sets of them would involve either setting styles or just replacing with new, pre-filtered GeoJSON.
So the question is is it possible to have more than one data layer, and easily add/remove them from the map or am I better off looking at something like OpenLayers?
EDIT: Bit more research shows it's quite straightforward.
For each type of feature in the feature collection that we want to toggle on, create a new Data object. Add all the relevant features to that data object.
var datalayer = new google.maps.Data();
datalayer.addGeoJson(feature);
datalayer.setMap(mainmap);
Then store each data object/feature type as a key-value pair. On toggle, pull out the relevant data object and setMap as appropriate:
var datalayer= featuretypesobj["feature type to toggle"];
datalayer.setMap(mymap); //or
datalayer.setMap(null);
You can also create separate layers
var layer_1 = new google.maps.Data();
var layer_2 = new google.maps.Data();
then populate it, e.g. with json data
layer_1.loadGeoJson('/path/to/data.json');
layer_2.loadGeoJson('/path/to/data2.json');
then add / remove them on the map
layer_1.setMap(map);
layer_2.setMap(map);
layer_1.setMap(null);
To Add:
var layer_1 = new google.maps.Data(); should be done inside map initialization function, as:
var map;
var data_layer_for_ramps;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(-33.897907, 151.179138),//-33.8151,151.0032
mapTypeId: 'roadmap'
});
data_layer_for_ramps = new google.maps.Data();
}
Thanks to #AJoslin I now have a working google map using only AngularUI and AngularJS.
Unfortunately there are two things I can't figure out how to do which may have to do with Google Map API and my lack of understanding of.
When the map initially loads, I already have a location so I wish to load it with a marker already on it. How do I do that?
I also wish to set the ng-click="myMap.panTo(marker.getPosition()) not to a new marker but to the initial location, which is the only marker I would have since I'm removing the add marker functionality out, once I can figure this one out.
Here is the working jsfiddle
http://jsfiddle.net/jorgecas99/xMw6U/
i think it should be achievable by setting the tilesloaded event, but didnt manage that way, so i ended up using a simple "trick", watching for myMap to appear.
$scope.$watch('myMap', function(){
$scope.setHome();
});
$scope.setHome = function() {
$scope.homeMarker = new google.maps.Marker({
map: $scope.myMap,
position: $scope.mapOptions.center
});
}
I'm creating a barchart with d3 where the data is in a backbone collection.
I want the user to be able to interact with the bars in the chart, selecting them, editing data, etc. etc.
I figured the best way to do this was to create a view for the chart, and a separate view for the bars.
in my chart view, I have
create_bar: function(){
var chart = d3.select("div#chart");
timeline.selectAll("div")
.data(Myapp.chart.models)
.enter()
.append(function(d){console.log(d);
var bar = new Myapp.Views.ChartBar({model:d});
return bar.el;
});
}
but unfortunately, it looks like append fails with a function.
I'm looking at putting some moderately complex html within the bar div, as well as a few data-points.
Any suggestions on how to do this?
Backbone views with d3 make kind of an odd mix, but here's one way it might work:
timeline.selectAll("div")
.data(Myapp.chart.models)
.enter()
.append('div')// or 'span' or even Myapp.Views.ChartBar.prototype.el
.each(function(d, i) {
var bar = new Myapp.Views.ChartBar({model:d});
bar.setElement(this);// Here "this" is the dom element
}
EDIT:
The last 2 lines can be combined into a single one, skipping the call to setElement():
var bar = new Myapp.Views.ChartBar({model:d, el:this});