I use a react-google-maps and I want to dynamically highlight a country or a subntaional when user click on the map anywhere in the whole world, so I need to get coordinates to draw a polygon, but can't find any service with api for it. What the best way to achieve this?
I was also searching for this solution. you can use google charts api for above problem.
Related
I'm working on a web app with Nextjs, Mapbox and react-map-gl. On the client side I would add some controls to show/hide specific POIs, for example restaurants, museums and landmarks.
I tried various ways and found multiple examples that were not specific to my problem. Nevertheless I'll note them down here, so you can see what I tried and why it failed.
Change the categories in Mapbox studio
There is a possibility to show/hide the POI categories in Mapbox studio, however this is static and I want to make this sort of changes on the client side.
Two examples from from Mapbox
"Filter symbols by toggling a list"
"show and hide layers"
Those examples show very well what I want to achieve. Simple UI buttons where I can show/hide certain POI categories, for example Theatre, Museum, Bar, Bicycle.
The downside is that the data is added manually - after that map is loaded. I'm looking for a way to show/hide the POI categories on the existing map data I receive from Mapbox.
Copy POI layer
I found a third option that suggest to copy the POI layers "Hide mapbox POI in runtime". It doesn't seem like a proper solution, but I'll give it a try and share my feedback afterwards.
Do you guys know how I can properly show/hide categories at runtime from the POI-Layer in Mapbox?
I'm thankful for any help.
You can use the same approach shown in the "show and hide layers" example you linked to. Once you have a layer on the map for each POI group you want to control, use map.setLayoutProperty(layername, 'visibility', 'none') to hide, and map.setLayoutProperty(layername, 'visibility', 'visible') to show.
Layers added after the map loads are no different than the layers that are included with the main style. The "show and hide layers" example shows sources and layers added after the map loads, they are just coming from mapbox-hosted vector tiles, not geojson files.
Thanks chriswhong. For anyone working with react-map-gl, there is one more thing to consider.
The setLayoutProperty is at the time of my writing not available on mapRef and on the useMap hook.
According to the create-ref.ts file from react-map-gl the setLayoutProperty is part of the methods that may break the react binding if called directly.
According to the official react-map-gl documentation you can you can still access the hidden members via getMap(), as it can be seen in the following example via console log.
codesandbox.io/s/zealous-poincare-ti5qx9
I'm building a React app and I would like to use Maps. Google Maps and other Maps APIs have a charge and this project will be free for the community (just like an NGO) so no budget at all.
In this app there is a page to create an Event, so you can type many things and where the Event will happen, and that is where I would like to use Maps, to search and show the location.
I thought that if is there any possibility to use a search box connected to an API just to get the Longitude and Latitude based on the search would be great, but I have no idea how to make it and I was expecting that you could help me find a way. (the thing is: get the information for free)
Just as I create this event, I would like to show this information on the Event page, so where the event will happen. And that would be the second part that I would like to use Maps. Do you know if I just show the location in Maps if I would be charged? If so, then I can use redirection to Google Maps using the Latitude and Longitude that I got from the event creation.
Thanks in advance!
See https://www.google.com/nonprofits/offerings/google-earth-and-maps/ for non-profit organizations.
i am trying to find a way to add google maps as a background to draw.io
i need more then just a screenshot of a map.. i need google maps coded into the background as a tool they can tick to enable along with a location search feature..
and instead of a background grid it will be google maps that you can drag shapes and images onto..
i just am not sure what the best approach is... any help will be much appreciated.
below is a image of what i mean
https://ibb.co/r59xYhS
I am not able to automate google map screen which is present on my application web page.
I have web page where google map is present in square in half of screen. I want to click on the road present in map or a restaurant logo which is present on the google map.
When i tried to find the locators for the map then in the DOM it is present as an image and no other html properties or locators are associated with it.
Also i tried an option using moveToElement() function of action class but this solution is not reliable as most of the time it is not working.
Please suggest me any solution for this automation issue if someone faced this issue of Google maps automation before ?
Sounds like HTML5 issue over a google maps issue. This is tricky for Selenium, see these articles:
https://www.linkedin.com/pulse/html-canvas-testing-selenium-opencv-maciej-kusz/
https://chariotsolutions.com/blog/post/automated-testing-of-html5-canvas/
which recommend using action chains to move to and click certain x,y coordinates.
Also, check out the canvas javascript api; you may be able to use javascript_executor to manipulate the canvas.
I am using silver light bing map control api for windows phone 7. I am new to it. I could not get any api I can use for hiding the street labels in the map. Is there some way to achieve the same?
Thanks in advance.
I think, this link may be helpful, which talks about labels in the map to be displayed.
http://msdn.microsoft.com/en-us/windowsphonetrainingcourse_usingbingmapslab_topic2.aspx
http://www.bing.com/blogs/site_blogs/b/maps/archive/2009/12/02/bing-maps-adds-streetside-enhanced-bird-s-eye-photosynth-and-more.aspx