I want to show images for a certain position from Openstreetmap on my page, without rendering the map itself,Any ideas on how to do so ?
Informations: Experience with Openstreetmap : 0 months
The easiest way is probably to just include an embedded map. For that go to http://www.openstreetmap.org, pan to your location, click on the "Share" tool of the sidebar on the right, an than use the "HTML" option to get HTML-code to embed in your website.
Related
I would like to make the Mapbox popup resizable so if the user clicks and drags on the corner/side, they can make the popup bigger or smaller and the content automatically adjusts. Is this possible?
There is no functionality for that provided by Mapbox GL JS. However, you have full control over the HTML element used, so you can implement this feature yourself.
I have a web-app going and I want the Mapbox attribution to be in the bottom-right corner. This is obviously easy to do, but the problem is the logo is behind my menu, as seen below :
Is it possible to access the logo in CSS so that I can properly make the logo on top of all the other content? I want to follow Mapbox guidelines as much as possible. In the image I attached it looks grey because it is behind a semi-transparent menu.
Doing "inspect element" on the logo reveals that its styling is controlled through the a.mapboxgl-ctrl-logo selector. You can add your own override styles to that.
In a map application based on Leaflet, I would like to have a large application menu, kind of a settings menu. I managed to put a nice button into the top right corner as a L.Control and it gets fired on a click.
The menu should position either to the left of the menu button or simply in the middle of the screen.
I am wondering whether it is best practice to use
a Popup,
a Layer,
another Control or
just position a at the right place on the page.
Trying the latter, I found that I have to set z-index to a very high value to see it, and it feels a bit odd not to use the Leafleat features.
What would be the "right" solution to use with Leaflet?
If you want a full screen map, you can use https://github.com/Turbo87/leaflet-sidebar
I use it here: http://franceimage.github.io/map
You can create a nice customized icons based toolbar using Leaflet easybutton plugin.
You will have all the leaflet based controls (Click, hover, position etc.) to set that up as per your requirements.
Here are the implementation examples:
http://danielmontague.com/projects/easyButton.js/v1/examples/
and github repo: https://github.com/CliffCloud/Leaflet.EasyButton
Using Mapbox instead of Google, I'm building up a menu in the map that shows tabbed infowindow on every marker. The problem is that no matter which marker I'm on, the infowindow is always the same (from only one of the markers), as if it doesn't read the variable content var p = marker.feature.properties;
Anyone please have a look at this demo Thank you
[the system wont allow me to reply to the reply I got, so here's my reply:]
Thanks for the link. It's a different approach. The menu is missing and I can't really integrate the two scripts:
This was an error in that particular example: see the fixed version that correctly binds the right tooltip to the right marker.
I used Tilemill to style my data, added teaser for points, then save then uploaded the project at data on mapbox.com then referred to those data on my website using "Layers" on mapbox.js examples why are my tooltips not showing up?
You still need to add your gridLayer and gridControl to your addLayer function. Example.