It seems like getting onDrag for Markers on OpenLayers isn't possible (this and this, as examples)
So I would like to use a vector layer, and then add points to it instead of markers.
My problem is that the vector points doesn't look like the markers.
Can I assign an icon to a point feature?
I want the functionality of a vector point, with the look of a marker.
Add style object with externalGraphic property to your vector layer config:
var layer= new OpenLayers.Layer.Vector("example", {
maxExtent: new OpenLayers.Bounds(-200,-200,200,200),
style: {
externalGraphic: 'http://www.openlayers.org/dev/img/marker.png',
graphicWidth: 21,
graphicHeight: 25,
graphicYOffset: -24
}
});
The graphicYOffset shifts the marker appropriately so that the perceived tip of it corresponds to the location on the map.
Related
Is there any way to keep the map labels with street names and POIs under GMSOverlays like GMSPolygons and GMSPolylines?
I have tried with different Zindex but to no vail.
This is what I get:
But as the polygon is the important thing here, I don't want the map labels on top of it, because they are, in my case, irrelevant. Besides I use a semitransparent fill color and you can still see the street names through it.
Answering my own question:
The only way I found was to add a Tile layer on top of the mapView like this:
mapView.mapType = .none // Set the map type to .none, as it will not be visible
let urls: GMSTileURLConstructor = { (x, y, zoom) in
let url = "https://mt1.google.com/vt/lyrs=r&x=\(x)&y=\(y)&z=\(zoom)&scale=2"
return URL(string: url)
}
let layer = GMSURLTileLayer(urlConstructor: urls)
layer.tileSize = 1024 // To get bigger fonts in mobile device with high resollution
layer.map = mapView
The only drawback is that when the map is rotated the labels are rotated too as you can see in this screenshot:
I'm attempting to use the following code to change the color of a polygon on my MapBox map, after it's already been added to the map.
parishPolygon990 = L.polygon([ vertices ], { color: "#0000FF" }).addTo(map);
console.log(parishPolygon990); // returns #0000FF
console.log(parishPolygon990.options['color']); // returns #0000FF
parishPolygon990.options.color = '#d31603';
console.log(parishPolygon990); // returns #d31603
console.log(parishPolygon990.options['color']); // returns #d31603
You can see that the color value for the polygon updates, but the polygon on the map does not change color.
How can programmatically change the color of the polygon on the map after it's been added?
Use the setStyle method of L.Path which L.Polygon is extended from:
var polygon = L.polygon([[45,45],[-45,45],[-45,-45],[45,-45]]).addTo(map);
polygon.setStyle({'color': 'yellow'});
Working example on Plunker: http://plnkr.co/edit/vL0rAoKQGhV8zri8mDz7?p=preview
Reference: http://leafletjs.com/reference.html#path-setstyle
If you would really want to do it by changing the options object, you'll need to call the _updateStyle method of L.Path afterwards:
polygon.options.color = 'yellow';
polygon._updateStyle();
But as the _ suggests it's an internal method of L.Path and is not part of the API so you should avoid using it because it can change in future versions of Leaflet. Just thought i should mention it.
I am using a 2d line graph of vis.js (http://visjs.org/graph2d_examples.html ). Is there any way to add a tooltip to the data points so that when you mouse over or click you see the value in a pop up or somewhere else?
This is a feature they plan on adding.. the closest thing I see is this comment on trying to tackle the issue themselves:
https://github.com/almende/vis/issues/282#issuecomment-65728474
This solution is rather simpe:
Add label to points, eg.
var point = {
x: ...,
y: ...,
label: {
content: POINT_LABEL
}
};
points.push(point);
var dataset = new vis.DataSet(points);
Reference:
https://github.com/almende/vis/issues/282#issuecomment-217528166
I'm working with dc.js and I'm about to create a world map.
How can I add the countries' names upon the geochoropleth map ?
I create a crude example of this approach here: http://jsfiddle.net/djmartin_umich/9VJHe/
1) First I attained the json file containing the centroids of all of the states: https://bitbucket.org/john2x/d3test/src/2ce4dd511244/d3/examples/data/us-state-centroids.json. For the purposes of this example, I copied the json to the jsfiddle.
var labels = {"type":"FeatureCollection","features":[
{"type":"Feature","id":"01","geometry":{"type":"Point","coordinates":[-86.766233,33.001471]},"properties":{"name":"Alabama","population":4447100}},
{"type":"Feature","id":"02","geometry":{"type":"Point","coordinates":[-148.716968,61.288254]},"properties":{"name":"Alaska","population":626932}},
2) Then I added a svg element to the chart that would contain all of the labels:
var labelG = d3.select("svg")
.append("svg:g")
.attr("id", "labelG")
.attr("class", "Title");
3) Next I added a svg text element for every state in the labels json:
labelG.selectAll("text")
.data(labels.features)
.enter().append("svg:text")
4) Then I positioned the text elements using the coordinates of the centroid. To accomplish this you should use the projection from the chart to translate the coordinates to relative x and y values.
.attr("x", function(d){return project(d.geometry.coordinates)[0];})
.attr("y", function(d){return project(d.geometry.coordinates)[1];})
.attr("dx", "-1em");
Here is the final result:
You'll notice two problems:
There isn't enough room to display all of the names in the northeast states
The labels aren't centered very well
Both of these problems could be resolved by changing the labels json by manually moving the coordinates.
Note, I used this question as a basis for my answer: https://groups.google.com/forum/#!topic/d3-js/uAWkwnuNQ3Q
In a given instance of google maps...
Is there a way to turn off the other instances of the maps which tile to the right and left of the initial central map?
I've seen ways to restrict the pan ability of the map ... but it uses lat + lng to determine when to re-center the map ... and thus the usage falls apart at different zoom levels.
For example: https://google-developers.appspot.com/maps/documentation/javascript/examples/map-simple
If on zooms all the way out, you can see how the map of the globe is tiled along the x-axis.
I would like a single instance of the map.
You could add an observer to the zoom_changed event, and set the minZoom if more than 90 degrees of map is shown. The second statement recursively reduces the zoom to an acceptable limit before the limit is known.
var zoomObserver = function () {
width = Math.abs(map.getBounds().getNorthEast().lat() -
map.getBounds().getSouthWest().lat());
if (width > 90){
var opt = { minZoom: map.getZoom()};
map.setOptions(opt);
}
if (width > 179){
map.setZoom(map.getZoom() + 1);
}
};
google.maps.event.addListener(map,'zoom_changed', zoomObserver );
This simple solution works for most use cases, doesn't take into account doubling the width of the map through resizing the browser window, so you may need to add the observer to another event in that case.