I'm trying to export an AmMap with custom markers on it. This example show some custom markers, try exporting the map and you'll find that it has no markers at all in the image: https://codepen.io/anon/pen/gwNevz
The main method of adding the custom markers is to add it as a separate DOM child:
image.chart.chartDiv.appendChild( holder );
This is essentially the AmCharts example (https://www.amcharts.com/demos/custom-html-elements-map-markers/) but with exporting enabled
The standard export plugin omit the custom markers. I tried adding the custom markers to other divs, but it did not matter. I also tried AmMaps-independent approaches (eg html2canvas) but those were unsuccessful so far.
Any ideas how to do this?
Unfortunately it isn't possible, which is why the demo has export disabled. The export converts the underlying SVG in the chart div to an image. Non-SVG elements like the div markers won't get exported. You'll have to use the default markers or create your own as images through the svgPath property.
Related
The container of the Google Places searchbox that is created with react-google-maps has class called .pac-container. Now, I've got multiple of those on one page and I want to style them differently. For example, one should drop upwards, another one downwards.
How can I achieve this? I can't pass down a class name...
you can wrap you StandAloneSearchBox with with a parent wrapper.
<div className="ancestor1"><StandAloneSearchBox></div>
<div className="ancestor2"><StandAloneSearchBox></div>
And
.ancestor1 .pac-container
.ancestor2 .pac-container
Maybe you need to put inside StandAloneSearchBox because sometimes google maps ignore parent div. Do let me know if the issue still persists.
I would like to render two distinct react components:
A leaflet map
A sidebar component where I render a list of checkbox to enable/disable GeoJSON layers.
I am using react-leaflet package. And I am using reflux store for keeping the list of all possible layers I will render in the map.
I would like to know whats the best approach for add layers on demand, using the checkbox onChange event. Thanks
In your checkbox events you would update a "layer toggle" value in your store. Assuming you are set up correctly this value should push a update to your page. So, all you have to do is conditionally render your page based on those "layer toggle" values saved in your store.
Let me know if you would like more explanation.
import { Map, TileLayer, LayersControl } from 'react-leaflet';
const { Overlay } = LayersControl;
use the overlay in your map, here is a detail example about this.
https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/layers-control.js
I've recently gotten into React Leaflet and from what I've gathered from the docs, it is not possible to add a custom React Element (Component or pure functional) as a marker.
What I want to achieve is to be able to use my React Element which is an SVG icon as the marker. This would be useful because I'll need to display several different color icons and it's way more convenient to pass the color as props and let React create the marker.
Am I right in assuming this isn't possible?
You are incorrect! :) React-leaflet allows the creation of custom components. Also, you should check out react-leaflet-div-icon since it seems like it's exactly what you need.
I am creating a basic map with ng-Map. I want to hide names of all roads/streets. How can I do it?
you can hide the road/street name by setting your own styles, and then set the styles to google map by map.setOptions({styles: customeStyles});
check this plunker.
Hi I was using the mobile map demo here: http://demo.qooxdoo.org/devel/mobileshowcase/index.html#%2Fmaps
and I was trying to add a toolbar at the bottom of the map page. It works, but then the map quickly covers it up. After looking at the DOM it looks like the toolbar gets added within the map div.
Is there a way to make it appear on top of the map rather than underneath? This code is all contained in the Application.js file.
var maps = test.page.Maps.getInstance();
var manager = new qx.ui.mobile.page.Manager(false);
manager.addDetail([
maps
]);
maps.show();
var toolbar = this.__toolbar = new qx.ui.mobile.toolbar.ToolBar();
maps.add(toolbar);
Thanks for the help!
With maps.add(toolbar) you're adding the toolbar to the map, that's why it is added to the map div. I guess you have to go through the page.Manager to add separate elements to the GUI. You might want to revise the mobile tutorial which achieves exactly that, also including a widget derived from NavigationPage like in the maps showcase.
have a look at:
https://github.com/qooxdoo/qooxdoo/blob/master/application/mobileshowcase/source/class/mobileshowcase/page/Maps.js
There are several important things in this example.
The methods "_createContent" and "_createScrollContainer()" are overridden.
A NavigationPage creates by default an iScroll container where you can put all widgets into.
But the OpenLayer div is not a qooxdoo widget, of course. It has its own scrolling logic.
That is why, you have to overwrite these methods. Much of the styling of OpenLayer can not be changed. The OpenLayer overlays all contents because its has an absolute positioning.
But there is a solution:
Use this method in initalize() method
this.addAfterNavigationBar(widget);
Assign a CSS class to your widget through
widget.addCssClass("your-class")
Change your "styles.css" in resource folder:
.your-class {
z-index: 5000;
position: absolute;
}
Greetz Christopher