I have a Leaflet map with a geoJSON containing contour lines. The elevation corresponding to each line is located in feature.properties.Elevation of the geoJSON. I want to achieve the following:
What I've tried to achieve this in leaflet is to calculate the center of each polyline and then add a marker to that position containing the data from feature.properties.Elevation.
L.geoJson(contourJSON, {
onEachFeature: function(feature, layer) {
var label = L.marker(layer.getBounds().getCenter(), {
icon: L.divIcon({
className: 'label',
html: feature.properties.Elevation,
iconSize: [100, 40]
})
}).addTo(map);
}
});
Which kind of works, but does not have a nice styling and it's not really clear which value belongs to a specific line:
What would be a better method of adding the elevation labels in such a way that it is readable and maybe dynamic to the current zoom level? I'm using Leaflet 1.0.3 so maybe Tooltip could offer a solution? Thanks!
You might be interested in those Leaflet plugins, possibly combined: (not sure how easy it would be to combine them)
Leaflet.LabelTextCollision (demo)
…display[s] labels on vector data while avoiding label collisions.
Leaflet.TextPath (demo)
Shows a text along a Polyline.
You might also want to check out the rest of Leaflet plugins.
BTW, I am not sure placing your label / marker at the polyline "center" is appropriate. You might just pick one of its vertices, or for example the farthest to the right / East to have an effect similar to the example you provide.
Related
Im using Leaflet & Geojson-vt to visualize a large dataset (GeoJSON with 70,000 polylines features)
Is there any way to show smoothly a popup (it contains the polyline data) on click event on one of the multiple polylines ?
I am using geojson-vt and the example from here to add the tiles to the leaflet map.
i tried this
function onEachFeature(feature, layer) {
layer.on('click', function(e) {
layer.bindPopup(feature.properties.NUMERO);
});
}
L.geoJson($scope.dataOfFile.data, {
onEachFeature: onEachFeature
}).addTo(map);
but the map keep freezing.
Not sure I'm understanding... That example draws a canvas layer from vector tiles, this has no interaction method. If it were polygons you could use point in polygon from the original data. Since it's lines you may want to experiment with the almost over plugin using 0 weight (transparent) lines.
I had a similar issue with popups on Markers. If I added the popup before the marker was added to the map then the map would briefly freeze when all the markers were added to the map.
So instead I added the Markers to the map first. I maintained an array of all the markers then added the popups afterwards to each marker and I no longer experienced the map locking up.
I am using google map v3 and its drawingManager feature, I want to get the pixels of these Shapes either through Lat and Long or directly.
Here is the URL of drawingManager Shapes
https://developers.google.com/maps/documentation/javascript/examples/user-editable-shapes
I want to get the pixels as here with respect to the container of map
http://gmaps-samples-v3.googlecode.com/svn/trunk/latlng-to-coord-control/latlng-to-coord-control.html
like here, buts using overlay class and I want to use it for DrawingManager Shapes, need some help on it.
Thanks
To translate a LatLng to a Point use the method fromLatLngToPoint() of the current projection.
The current projection is returned by mapObject.getProjection()
However, a shape isn't always defined by LatLng's/Points.
For rectangles you must translate the points defined by the bounds, for a circle the center(and/or bounds), and for polylines/polygons the path.
So this strikes me as, perhaps, a really obscure bug.
I'm working on a map for the upcoming Quebec election. You can see it here
So I built a fusion table with all the riding polygons, and I've begun adding points for ridings of interest. They all work fine - except one. If you zoom in on the area around Montreal (Laval, specifically) there's one blue dot that is stuck behind a red polygon and it simply isn't clickable.
I've tried screwing around with the zindex for all the markers, but haven't had much luck. Here's what I'm doing:
var layer = new google.maps.FusionTablesLayer({
query:
{
select: 'Geocodable address',
from: '4722124'
},
styles:
[
{
markeroptions: { zindex: 1, }
},
{
polygonOptions: { zindex: 2, }
}
]
});
layer.setMap(map);
Beyond that, I'm not entirely sure what to do. The rest of the markers work fine.
Currently, I'm just plugging the points manually into the fusion table. Should I drop them using CSS and edit the zindex that way? (Assuming this is just a glitch and there's no other solution.)
Thanks!
The only way I know to force markers to be on top is to put them in a separate layer
var layer1 = new google.maps.FusionTablesLayer({
query: {
select: 'Geography',
where: "Marker does not contain '_'",
from: '4749709' // '4722124'
}});
layer1.setMap(map);
var layer2 = new google.maps.FusionTablesLayer({
query: {
select: 'Geography',
where: "Marker contains '_'",
from: '4749709' // '4722124'
}});
layer2.setMap(map);
Working example
That has the disadvantage of potentially displaying two infowindows at the same time. A work around for that is to manage the infowindow yourself.
Working example with single infowindow
I've struggled with this for a long time myself. I tried creating the markers and polygons in a different order (eg polygon first, marker second, and visa versa) but have found no way to control which item is on top of another.
My work-around was to export the fusion table to a KML file, and then manually reorganize the order of items in the file. The higher a placemark appears in the KML file, the closer to the top it will be in the item order on the map. That is -- put your markers first, and polygons second, and then you will be able to click on the markers.
Hope this helps!
Question to FUSION team -- surely you can write this logic into the Fusion Tables code?
Is it possible to hide markers that are not from a particular country? Eg I have a dropdown menu with England, Wales, Scotland etc.
If the user selects Wales - the map zooms to Wales and shows all the marker within a certain radius, but I would want to have any markers that are near the Welsh border to not appear as they are not within Wales.
Any ideas?
Figure out the polygon that encompasses only Wales (you'll have to do that yourself; I don't think Google will magically give you that). Only draw markers that fall within that polygon.
The hard part is figuring out if a latlng coordinate is within a polygon. Here's a solution someone's worked out, but it's using the Google Maps API v2 syntax, not v3 syntax that I guess you'll be using. Fortunately someone else has already rewritten it for API 3 as well.
To create the polygon, just do something like the following. I'm guessing you don't actually want to show this, just your markers, so have made it invisible by setting both stroke and fill opacities to zero.
polygon = new google.maps.Polygon({
paths: [
new google.maps.LatLng(51.478316,-0.002888),
new google.maps.LatLng(51.479245,-0.001051),
/// ... array of all the coordinates making up the path of your polygon
],
strokeOpacity: 0.0,
fillOpacity: 0.0,
map: map
});
I have this map, which I show some red markers over and whenever a location is chosen from a list the current marker is painted blue and the map centers around it.
I achieve this by having 2 layers - one for the red markers which is drawn at the beginning and one which is redrawn whenever a point is chosen from the list.
I would like to define that the red marker layer will always appear above the blue marker layer. Effectively hiding the "current marker" indication. (The reason for this is complicated)
This link is to a page that works the way I don't want. The blue layer is on top of the red layer.
I tried to reverse the order by defining the graphicZIndex property for both the vector and in the layers.addFeature function.
I'm obviously doing something wrong and maybe someone can point me to what it is.
The way I define the z-axis:
currentPointLayer = new OpenLayers.Layer.Vector("Selected Point Layer", {
style : {
externalGraphic : 'marker-blue.png',
graphicHeight : 15,
graphicWidth : 15,
graphicZIndex : 1
},
rendererOptions: { zIndexing: true }
});
Again, I want to hide the blue marker behind the red markers layer.
You can either change the order of your layers as ilia choly stated.
Or, if you want to use zIndexing, you have to put all features into one layer, because zIndexing is only done within a single layer.
Have a look at this simple example about styling, that also uses zIndexing. It randomly creates some points in the map. If you zoom out, chances are good that two circles overlap and if you hoover over one, it will be highlighted and put on top.
So you want highlight a marker with different color whenever a point is selected? Managing it with 2 layers is really an overkill. You should be able to define a vector layer with style like this:
var currentPointLayer = new OpenLayers.Layer.Vector("Selected Point Layer", {
styleMap: new OpenLayers.StyleMap({
externalGraphic : '${markerUrl}',
pointRadius: 20
})});
map.addLayer(currentPointLayer);
Then you have to set attribute 'markerUrl' of every feature(i.e. feature.attributes.markerUrl) to 'marker-red.png' - that would be initial state of all features.
Then whenever feature is selected you change markerUrl attribute of selected feature to 'marker-blue.png' and(important) call
currentPointLayer.redraw();
Obviously you'll also have to set previously selected feature to 'marker-red.png' when new feature is selected.
in your init_map() function you're adding the red marker layer before the blue ones. Try switching them.
preparePointsOnMap(map, points); //red marker
if (!map.getCenter()) {
map_set_center(lon, lat, mZoom); //blue marker
}