I am importing KML files to overlay on a map.
OL3 does a great job with the geometry, but seems to ignore the text labels that should show up with them.
This snippet will put up a pin, but will not show the text in the <name> element as it did in Google Earth and Maps
<Placemark>
<name>Text I want to show</name>
<Point>
<coordinates>-81.11918192120308,32.27372446636573,0</coordinates>
</Point>
</Placemark>
There is nothing in the specification of KML that states that the <name> tag of a <Placemark> should be rendered along with a pushpin or icon -- Google just chose to implement it that way.
If you look at the OpenLayers Swiss hotels KML example, you will probably agree that automatically showing the text labels would make the screen too busy. However, it is fairly straightforward to add labels on mouseover, using the map.forEachFeatureAtPixel function, as is done in this kml earthquake exmaple, which pushes the name attribute of the KML tag into an info div, as you can see in this code snippet:
var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
return feature;
});
if (feature) {
info.tooltip('hide')
.attr('data-original-title', feature.get('name'))
.tooltip('fixTitle')
.tooltip('show');
} else {
info.tooltip('hide');
}
So, the <name> tag of <Placemark> is parsed, but the display is left up to you in OpenLayers, by design, not by defect.
Related
This question already has an answer here:
maps markers with input sliders
(1 answer)
Closed 4 years ago.
i have a huge list of stores with addresses (longitude and latitude and codeclient ....). For each stores, a marker appears on the Google Map on the page.
my problem is, users must be able to filter these markers depending on one thing: CodeClient. So to be more specific. If the user sets the CodeClient in the input slider it is supposed to only show the client (the owner of the CodeClient who we put in the slider) Like this ; CodeClient = 12345 , so when we put the number 12345 in the the input slider , and click on the button it should display only the marker of this client , i mean the markers who refer to the place of this client.
the problem is solved by xomena , this is the path for the solution
Filter Google maps markers with input sliders based on one variable
Seems like you are partially asking about setting marker visibility? As touched on in this Stack post (among others)
Google Maps API Marker Visibility
Most likely, marker.setVisible(true/false) is the way to go.
And then basically you would be doing that in the change event handler for the slider input.
One idea is loop over the markers array and toggle it invisible while setting the marker matching selected coce-client visible.
Another idea is to make it a "marker dictionary" where the keys are the code client value, i.e.:
markers = {
12345: SomeMarkerInstance,
67890: SomeOtherMarkerInstance,
// ... etc
}
selectedMarker = '12345'
and in that way you could quickly just toggle off visibility on the current selected marker while toggling on the newly selected marker. The rest of the markers would be by default not visible.
I.e. (pseudo codey)
function someEventHandler (event) {
markers[selectedMarker].setVisible(false)
markers[selectedCodeClientValue].setVisible(true)
// and perhaps other stuff, e.g. recenter the map, etc
}
You are setting a title to your markers with this CodeClient and you are pushing your markers in an array. So what's the big issue here? Simply loop through your array and set the marker visibility based on the title (CodeClient).
for (var i=0; i<markerArray.length; i++) {
if (markerArray[i].title == '12345') {
markerArray[i].setMap(map);
} else {
markerArray[i].setMap(null);
}
}
I have sometimes very long subtitles in my charts. Ideally I want to expand/collapse part of the subtitle.
If I use ang-accordion outside of the highcharts subtitle, it works correctly
https://github.com/sherwaniusman/angular-accordion
If I try to use it in the subtitle however (in highcharts.net) it doesn't show me text1, nor is anything clickable.
var subtitle = string.Format("<ang-accordion><collapsible-item item-title='{0}'><div>{1}</div></collapsible-item></ang-accordion>",text1, text2);
subtitle = new Subtitle { UseHTML = true,Text = subtitle, Align = HorizontalAligns.Left },
Is it feasible to use expand/collapse functionality in the subtitle?
Per the documentation it does not look like angular tags are supported. Taken from here:
Texts and labels in Highcharts are given in HTML, but as the HTML is
parsed and rendered in SVG, only a subset is supported. The following
tags are supported: b, strong, i, em, br/, span. Spans can
be styled with a style attribute, but only text-related CSS that is
shared with SVG is handled.
I can add a custom SVG element to a chart like the wind arrows in the meteogram example. Note how the look of each individual wind arrow is customized with the parameters (a) wind speed and (b) direction.
I can also place custom SVG markers on to a series like the cross in the custom markers demo.
The latter approach has the advantage that if I have a zoom-able chart (Highstock) the markers will stay where they are supposed to be when zooming/panning. However, the latter example does not allow parameter dependent customization of the SVG marker!
Is there a way to combine these two? As in, I want custom SVG markers, that are bound to the series but whose shape is determined by other external parameters.
Is there a way to get Mapbox.js tooltips to show when you're hovering over a marker without following the mouse around? I just want it to stay put when I hover.
I am using the following code on my map:
var map = L.map("impact-map")
.setView([20, 80], 3)
.addLayer(L.mapbox.tileLayer("hotchkissmade.in_impact", {
detectRetina: true
}));
var myGridLayer = L.mapbox.gridLayer('hotchkissmade.in_impact').addTo( map );
var myGridControl = L.mapbox.gridControl(myGridLayer, {
follow: true
}).addTo( map );
I am using the follow:true from the example here.
Disclaimer: I know there may be more flexibility outside of gridControl but I like having my tooltips from Tilemill as I don't want to load the data in the browser twice, since I'm basing the tooltip data off the layer making the markers on my map in Tilemill
This isn't possible with a gridControl - you can have tooltips either follow the mouse or stay in a specific location, but unlike L.mapbox.featureLayer, there is no actual marker, polygon, or feature you're hovering over - the geometry is not pushed to the client - so, there would be no 'anchor' for the tooltip to stay on.
I am using Jquery mobile along with OpenLayers mobile.
I want to give users the ability to draw features like lines and polygons. I would also like to give them the ability to "write" an annotation and place the text at a point on the map.
Does anyone have a small example of how to add text to the map?
Thanks!
Use some JavaScript and HTML text input to achieve the text input.
To save your annotations you can try exporting and importing geojson
You can set text on a map marker: marker.icon.imageDiv.title = 'yourTitleHere';