How can you make a leaflet map re-sizable? - javascript

I have a leaflet map embedded in my page, but I want to add a control to allow the div with the leaflet map to be resized by the user. I've tried plugins like jquery.ba-resize, twinhelix and one other, but I can't seem to get something working that will allow me to have a button near the div with the leaflet map in it and to resize it on the fly.
Does anyone have any ideas?

Looks like I found an easy answer, I just took the id of my map ('map', creative), and did
$('#map).resizable();
with a jquery-ui plugin on the page.
Good enough for what I wanted!

Related

Ability to scroll the map when hovering marker?

Im struggling to make possible zooming the map when hovering a marker.
https://codesandbox.io/s/my2p15knj8 - example with marker
However, it is possible but only if I use feature instead of a marker.
https://codesandbox.io/s/l42n3np7xm
Unfortunately - feature is almost unstylable, cant pass children to it nor cant style them independently.
Looking for some solution how to make able to zoom map even if hovering marker. As you can see, my markers are kinda big so it will be hard for user to avoid them while scrolling :)
Thank you!
I think that might be a bug in react-map-gl since the vanilla JS Marker example doesn't suffer the same issue.

Custom google maps not working

I want to use a custom google maps on my website but I'm not able to do it.
I'm trying to copy this custom google map:
But on my website I can't see the address nor the +- buttons. I downloaded the files and copies the html, css and js on my code but it's not working.
Link to my website: The map is at the bottom.
Does anyone knows why?
Thanks a lot!
If you set display none to the sidebar-wrapper element you can see them.
Your map width is 100% and the symbols + and - are behind your sidebar.
Just try to adjust he positioning of this elements (or reducing the size of the map, for example) and it will work.

Decarta - how to refresh map

I am using the Decarta JS API. I am displaying a map with layers. I want to refresh the map and redraw new layers, but I see no way to do this in the documentation.
Is there a way to refresh the map using the API?
If you just want to refresh a single overlay and not the entire map, you can do this:
myOverlay.render(myMap.tileGrid);
Assuming of course myMap is a deCarta.Core.Map and myOverlay is a deCarta.Core.MapOverlay.
If the size of map container changed, you need to do the following so that the required tiles are loaded after the resize:
myMap.resize();
Using JQuery, I am able to accomplish my desired results by simply removing all children from the designated container the map is added to:
$('#mapContainer').empty();
I feel this is a crude way to handle this functionality and am hoping someone knows a more elegant way.

Google Maps markers ontop of each other

So I have a probably not so unique scenario. The simplest way to explain it is a google map with all 50 US states, each state will have two markers. The markers are both driven by the same lat/long value. The problem Im having is that the markers are rendering ontop of one another. I somehow need to have them render next to one another or offset so that I can see both. The problem is how do I get it to not overlap into another state.
I saw some really neat "spider" functionality where it renders one marker and then if you click on it the others fan out, but the website was in another language.
I am going to try and use the following library.
https://github.com/jawj/OverlappingMarkerSpiderfier
The problem with the above implementation is that I am using a combination of KML and google maps client-side. I dont see a way to implement that for the kml markers
The Overlapping Marker Spiderfier project on GitHub will probably accomplish what you need.
Otherwise you can play around with the Marker's icon property. The icon can accept a Symbol which has and anchor that can be shifted from the default location (0,0).
Symbol documentation: https://developers.google.com/maps/documentation/javascript/reference#Symbol

Is there a way to make embedded Google Maps a static non clickable image?

Unfortunately, on a site that I'm working on, the StreetView image of the business premises is out of date and not very flattering of the business.
Is there any way to make (via the Maps API) the map image a static image, which doesn't link to the full Google Maps page showing the StreetView image?
I'm trying to avoid manually embedding an image as I want to be able to do this programmatically.
Thank you.
Prembo.
I found a really simple solution to this, in my case I wanted an interactive map on desktop and a static map on mobile.
Using media queries I added the attribute {pointer-events: none !important;} to the parent div wrapping my map when changing to mobile.
Yep, take a look at the static maps api. There is an example of exactly what you need.
https://developers.google.com/maps/documentation/staticmaps/
You could style the map so it can't scroll, zoom, street view... etc.
https://developers.google.com/maps/documentation/javascript/reference#MapOptions

Categories