react google maps render custom html on map - javascript

I'm using #react-google-maps/api ^2.12.1 in my react project. I want to create an interactive HTML component as a marker on the map. Still, on every documentation of google maps, I only find how to change a marker icon to set as a static icon image or how to set a label text, but not how to add an HTML component to a specific coordinate on the map. Could anyone help me?

Related

Is there way to fill cross inside polygon in Google maps reactjs application

I am not able to show a cross or any kind of pattern inside a polygon which I want to show Google maps using reactjs. there are not as such properties of polygon available.
I tried to use svg with OverlayView component to show in polygon Google maps in reactjs. I am expecting when i see polygon it's show pattern inside polygon
https://i.stack.imgur.com/n21p5.png

Building a completely custom map in React Native?

I'm currently trying to create an app to help route users while they're inside an enclosed location like a mall or a school. I've built up a framework to generate maps of these locations and exported them as images. I was planning on using these images as the map to display on the frontend to somehow draw routes on the images to guide the user. I just can't think of a simple way to do this.
I've seen react-native-maps but that just seems to use the standard Google maps view and doesn't let me use a custom map to draw routes on. Is there any way to accomplish this?
Depending on what level of detail you want, you might be able to do this with an overlay or custom map tiles.
You can overlay your map over google maps using the overlay layer on react-native-maps. If this amount of detail is not enough, you could try creating a tile server to get images or use vector tiles with MapBox maps(which also has some nice react-native bindings).
As for drawing routes, it should be straightforward by using a poly line layer. You'll have to calculate the paths beforehand and draw them using a poly line.

Change Leaflet Map Zoom control style using Drupal Leaflet module

I am unable to find settings where I can make Zoom Control Style "Large" for Leaflet map.
Current system
My Page is coming from View, where view format is "Map (Leaflet API, via IPGV&M)". I am displaying custom markup on map using Leaflet marker.
I am using following modules for D7
Leaflet
Leaflet views
Leaflet More Maps
ip_geoloc
Edited
I need to change Zoom control style from Small to Large. This is a small Zoom control: prntscr.com/9eeq41 and This is a Large prntscr.com/9eeqqu
You can achieve this by including Zoomslider JS and CSS in your theme's js and css folder respectively.
Bind it with leaflet.map and then add zoomslider control to map.
Your code should look something like this :
jQuery(document).bind('leaflet.map', function(event, map, lMap) {
L.control.zoomslider().addTo(lMap);
});
This will add zoomslider control to your map.
You can find Reference here : Leaflet Zoomslider
Go to admin/structure/types/manage/YOUR_CONTENT_TYPE/display.
At Geofield (field) format choose leaflet and click the settings
icon on the right.
There you can change min/max view settings like in the pic.

how to highlight markers on click in mapbox

I'm doing a mapbox project, where I have a list of projects on the right side of the screen. Each time I click on the list of a project name, the map will zoom to the location of the project.
I imported the markers to mapbox and used mapID to show them on the map.
Now I want to highlight the marker for each project that I click on. The mapbox highlight examples are based on geojson or csv, but I imported the markers from mapbox editor. Can anyone show me how to do the highlight?
The code will be generally the same: see the L.mapbox.featureLayer documentation: instead of using setGeoJSON or loadURL like the examples do, initialize it like L.mapbox.featureLayer('mapid'), replacing 'mapid' with your mapid.

Change marker icon in geoJSON using sheetsee.js and mapbox

So, this guy created a JavaScript function to change marker icon of geoJSON in mapbox map.
I tried to apply his function for my map, which is generating geoJSON from a Google spreadsheet using sheetsee.js and mapbox/leaflet. I want to change default grey icons for my own image but my re-writing attempt of his function to my map didn't work.
I'm not very skilled in JavaScript so I would be very glad for any hints what I did wrong.

Categories